## Introduction

In the last article [What is CSS and how to use it](https://hackinbits.firebaseapp.com/articles/-what-is-css-and-how-to-use-it), we learned basic CSS syntax and different way of including CSS in an HTML document. We also learned about CSS declaration, ruleset, and CSS Selectors.

In this article, we will discuss the CSS Selectors in detail. We will explore Simple CSS Selectors that can be used to target desired elements for styling.

## Simple CSS Selectors

As it is said learning by doing is the best way to learn anything. In this article, we will learn Simple CSS Selectors by designing a Profile Card. Below is the final design.

----

![Profile Card using Simple CSS Selectors](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/blog_b_10_2.png?alt=media&token=b2d6da41-4627-4439-9874-97f71b32c2d8 "Profile Card using Simple CSS Selectors")

----

Simple CSS Selectors directly select one or more elements on the basis of the type of element, class or id. We will start learning different types of CSS selectors by editing below example document:

**index.html:**

```html
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div id="container">
    <div id="card">
      <img src="https://hackinbits.com/images/blog/john_doe.png" class="img-profile" alt="profile pic" />
      <p>John Doe</p>
      <div>
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_3.png" alt="facebook icon" />
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_4.png" alt="linkedin icon" />
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_5.png" alt="twitter icon" />

      </div>
    </div>
  </div>
</body>

</html>
```
[Example Link](https://codepen.io/SRIJAN1709/pen/QBYbLL)

----

**style.css:**

```css
/* We are going to apply our CSS knowledge as we learn about Simple CSS Selectors in this article to design the profile card */
```

**Following are Simple CSS Selectors:**

- Type/Element selector
- Class selector
- Id Selector
- Universal Selector


## Type Selectors or Element Selectors

Type Selector or Element Selector matches elements on the basis of tag names. For example, to match all div elements, we will write,

```css
div {
   .......
}
```

For the profile card we will add following type selectors in style.css file:

**style.css:**

```css
/* Center align content inside div */
div {
   text-align:center;
   margin:auto;
}
/* Setting font properties - color, size, family and weight for paragraph */
p {
   font-size:32px;
   font-weight: bold;
}
```

**The above styles will be applied to all div and paragraph elements as matched by the selectors.**

## Class Selectors

```css
.social-icon{
   height:50px;
   padding:20px;
   cursor:pointer;
}
```

Class selector consists of a prefixed "." dot before the class name. The class name is defined in class attribute in an HTML element. Multiple HTML elements are allowed to have the same class value. The class selector matches all HTML elements with the same class name.

```html
<img class="social-icon" src="./social/facebook.png" alt="facebook icon"/>
<img class="social-icon" src="./social/linkedin.png" alt="linkedin icon"/>
<img class="social-icon" src="./social/twitter.png" alt="twitter icon"/>
```


A single HTML element can also have multiple classes separated by white space.

```html
<img class="social-icon img-profile" src="./social/facebook.png" alt="facebook icon"/>
```

For the profile card we will add following class selectors in 'style.css' file:

```css
.img-profile{
   max-width: 100%;
   height: auto;
}
.social-icon{
   height:50px;
   padding:20px;
   cursor:pointer;
}
```

The **.img-profile class** defines the style for profile image and **.social-icon class** styles the social icons i.e. Facebook, LinkedIn, and Twitter icons.


## Id Selectors

```html
#container{
   width: 100%;
   padding:5px;
}

<div id="container">
```

Id selector consists of a prefixed "#" pound symbol before the id name of the HTML element. Id name is defined in id attribute in an HTML element. The id should be unique in the whole document. Duplicated ids can cause unpredictable behavior.


For the profile card we will add following id selectors in 'style.css' file:

```css
#container{
   width: 100%;
   padding:5px;
}

#card{
   max-width:320px;
   padding:5px;
   border-radius:8px;
   box-shadow:0px 1px 6px 0px #00000033;
}
```

These rulesets will apply unique styles to div having 'container' and 'card' id values.

```css
Universal selectors
* {
   color:grey;
}
```

Universal selector '*' selects all elements in a document.

For the **profile card** we will add following universal selector in 'style.css' file:

```css
* {
   font-family:sans-serif;
   color:grey;
}
```

## Completed Profile Card

**index.html:**
```html
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div id="container">
    <div id="card">
      <img src="https://hackinbits.com/images/blog/john_doe.png" class="img-profile" alt="profile pic" />
      <p>John Doe</p>
      <div>
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_3.png" alt="facebook icon" />
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_4.png" alt="linkedin icon" />
        <img class="social-icon" src="https://hackinbits.com/images/blog/blog_b_10_5.png" alt="twitter icon" />

      </div>
    </div>
  </div>
</body>

</html>
```

----

**style.css:**

```css
#container {
  width: 100%;
  padding: 5px;
}

#card {
  max-width: 320px;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0px 1px 6px 0px #00000033;
}

div {
  text-align: center;
  margin: auto;
}

p {
  font-color: grey;
  font-size: 32px;
  font-family: sans-serif;
  font-weight: bold;
}
.img-profile {
  max-width: 100%;
  height: auto;
}
.social-icon {
  height: 50px;
  padding: 20px;
  cursor: pointer;
}
```
[Example Link](https://codepen.io/SRIJAN1709/pen/gjqOXw)

In the next article, we will explore attributes and pseudo selectors.

## Useful Resources

- [CSS Selectors(MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

CSS Selectors - Simple CSS Selectors in detail

## Introduction

In this article, we are going to discuss CSS Attribute selectors in detail. We are going to design a web page that will contain links to some famous websites. The websites we are considering for this example are :

- Facebook
- Linkedin
- edX
- Khan Academy

Following are the design requirements for the example page:

- If the website under consideration is a professional social network, like LinkedIn, it should have a dashed border and for a casual social network like Facebook, it should have a solid border.

- For a social website, the background color should be blue and the text color should be white.

- If the link uses https, it should have an orange outline.

- For all .org domain, text-color should be red.

Below is the final layout :

![Example Image](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/blog_b_15_2.png?alt=media&token=98e70f89-8e80-4021-b346-0a068fd10d11)

The Skeleton HTML code for the example page is given below:

```html
<h1 id="main-heading" style="text-align:center">Website Links</h1>

<div style="text-align:center">
  <a data-link="social-casual" class="networking" href="https://www.facebook.com">Facebook</a>
  <a data-link="education-open" class="mooc" href="https://www.khanacademy.org">Khan Academy</a>
  <a data-link="education-open" class="mooc" href="https://www.edx.org">EdX</a>
  <a data-link="social-professional" class="networking" href="https://www.linkedin.com">Linkedin</a>
  <a data-link="More-links">More Links</a>
</div>
```
[Example Link](https://codepen.io/SRIJAN1709/pen/WgeMVz)

We will apply the required styles using attribute selectors for the above document.

## Attribute Selectors

CSS Attribute selectors select elements on the basis of attributes and their values. For example, we can match an element based on whether a particular attribute is present in an element or not.

```css
p[lang='en']{
   color:blue;
}
```

In the above example, the paragraph having lang attribute with value 'en' will be selected and text color is set to blue.

We can match elements using the following attribute selectors:

### \[attribute\]

It matches all the elements having the attribute named 'attribute'.

For links in our example document, we will add the following styles :

```css
a[href]{
  text-decoration:none;
}
```

It will select all *<a>* tags with href attribute and set their text-decoration to none(as we don't want default styles for links).

### \[attribute=value\]

It matches all the elements having the attribute named 'attribute' with a value of 'value'.

For our example document we will add the following styles :

```css
h1[id="main-heading"]{
  font-family:sans-serif;
  color:darkslategrey;
}
```

The above ruleset will select <h1> tag with an id of 'main-heading' and apply styles to it.

### \[attribute~=value\]

It matches all the elements having the attribute named 'attribute' whose value is a whitespace-separated list of words, one of which is the exact value.

For our example document, we will add the following styles which will fulfill part of our first requirement:

```css
a[class~='networking']{
   border:8px darkslategrey solid;
}
```

### \[attribute|=value\]

It matches all the elements having the attribute named 'attribute' whose value can be exactly 'value' or can begin with 'value' immediately followed by a hyphen (-).

For our example document, we will add the following styles which will fulfill our second requirement :

```css
a[data-link|='social']{
  background-color:blue;
  color:white;
}
```

### \[attribute^=value\]

It matches all the elements having the attribute named 'attribute' whose value is prefixed by 'value'.

For our example document we will add the following styles which will fulfill our third requirement :

```css
a[href^='https']{
  outline:8px orange solid;
}
```

### \[attribute$=value\]

It matches all the elements having the attribute named 'attribute' whose value is appended(followed) by 'value'.

For our example document, we will add the following styles which will fulfill our fourth requirement :

```css
a[href$='.org']{
  color:red;
}
```

### \[attr*=value\]

It matches all the elements having an attribute named 'attribute' whose value contains at least one occurrence of 'value'.

For our example document, we will add the following styles which will fulfill part of our first requirement:

```css
a[data-link*='professional']{
   border-style: dashed!important;
}
```

### \[attribute operator value i\]

Adding 'i' before closing bracket as shown in the below example, will match the value case-insensitively.

```css
a[data-link='more-links' i]{
   color: blue;
}
```

## Final layout - after applying all styles

**html:** 

```html
<h1 id="main-heading" style="text-align:center">Website Links</h1>

<div style="text-align:center">
  <a data-link="social-casual" class="networking" href="https://www.facebook.com">Facebook</a>
  <a data-link="education-open" class="mooc" href="https://www.khanacademy.org">Khan Academy</a>
  <a data-link="education-open" class="mooc" href="https://www.edx.org">EdX</a>
  <a data-link="social-professional" class="networking" href="https://www.linkedin.com">Linkedin</a>
  <a data-link="More-links">More Links</a>
</div>
```

----

**css:**

```css
a{
  padding:12px;
  margin:12px;
  display: inline-block;
  font-size:20px;
  font-family:sans-serif;
}


a[href]{
 text-decoration:none;
}

h1[id="main-heading"]{
  font-family:sans-serif;
  color:darkslategrey;
}

a[href$='.org']{
  color:red;
}


a[href^='https']{
  outline:8px orange solid;
}

a[class~='networking']{
  border:8px darkslategrey solid;
}

a[data-link|='social']{
  background-color:blue;
  color:white;
}

a[data-link*='professional']{
  border-style: dashed!important;
}

a[data-link='more-links' i]{
  color: blue;
}
```

[Example Link](https://codepen.io/SRIJAN1709/pen/vzBRNg)

We will discuss pseudo-selectors in the next article of this series.

## Useful Resources

- [Attribute selectors(MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

 CSS Selectors - Attribute Selectors in detail

## Introduction

Cascading Stylesheet (CSS) is a stylesheet language. Stylesheet languages like CSS describe the presentation of a document.

CSS is mostly used to style web pages written in HTML. All aspects of presenting an HTML document can be controlled using CSS including font, color, size, spacing, animations, etc.

## CSS Syntax

CSS syntax is optimized for declaring sets of styles you want to apply to HTML elements.

### CSS Declaration

----

![CSS Declaration](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/css_b_9_1.png?alt=media&token=1796e7ee-61c7-48c6-99f4-a19a7fdb3362)

-----

A CSS declaration consist of property and value pairs:

- **Property:** It is the aspect or feature of elements that we want to style using CSS like font color or border color.
- **Value:** Value describes how the feature will affect the presentation of elements. Each property has a set of values. For example, font and border color can be set to any color like green, blue or yellow.

**CSS declarations are case-insensitive.**

```css
color: blue     /*set font color to blue*/
font-family: helvetica     /*set font family to helvetica*/
border-width: 2px      /*set width of border equal to 2 px */
```

### Declaration Block

CSS Declarations can be grouped into blocks, delimited by opening '{' and closing '}' braces. Declarations inside a block are separated by a semi-colon.

----

![CSS Declaration Block](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/css_b_9_2.png?alt=media&token=b8108ed2-0734-4ca5-aa5f-37e7ffb5809b)

----

A Declaration block is not very useful when used alone (without CSS Selectors) as the styles defined inside it will be applied to the whole document.

```css
{
font-family : helvetica;
font-size : 12px;
}
```

The above example sets the style for the whole document.

### Using CSS Selector

We can target a specific element or group of elements using CSS Selector and can apply a set of styles to it using-declaration block as shown below.

```css
p {
font-family : helvetica;
font-size : 12px;
}
```

Here p is a CSS Selector that selects all paragraph in the document and apply properties defined inside a declaration block. We will discuss different types of CSS Selectors in another article.

### CSS Ruleset

CSS Selector along with declaration block forms the CSS Ruleset.

----

![CSS Ruleset](https://firebasestorage.googleapis.com/v0/b/hackinbits.appspot.com/o/css_b_9_3.png?alt=media&token=1924bbed-0a15-4695-9424-9f9f97092ce9)

----

Using CSS ruleset we can easily set the style of all elements in a document according to our requirement.

## Adding CSS in an HTML document

CSS can be added in three different ways :

- Inline styles
- Internal stylesheet
- External stylesheet

### Inline Styles

CSS can be added inline in HTML elements using the style attributes.

```css
<p style="color : blue; font-family : helvetica"> Paragraph goes here...
</p>
```

In the above example, we are using CSS to change the paragraph's font color to blue and font family to Helvetica.


### Internal Stylesheets

Instead of adding CSS inline to each HTML element, we can add CSS using **<style>** tag in **<head>** section. We can make use of CSS Selectors to apply specific styles to different elements.

```css
<head >
...
<style>
p {
color : blue;
font-family : helvetica;
}
</style>
...
</head>
```


Here **p** is a selector that selects all p elements in the document. There are CSS selectors that are more specific and allow us to select a particular paragraph instead of selecting all of them. We will discuss CSS selectors in detail in another article.

### External Stylesheets

We can also write CSS in a separate CSS file(.css). CSS files defined in this way are added to the HTML document using <link> tag in <head> section.


**index.html:**

```css
<head>
...
<link rel="stylesheet" type="text/css" href="./css/mystyle.css" /> ...
</head>
```
----

**mystyle.css:**

```css
p {
color: blue;
font-family: helvetica;
}
```

The link tag is used here to include an external CSS document. The attributes used are:

href specify the path of the linked document.
rel attribute in <link> tag specifies that the linked resource is a CSS file for the current document.
In the next article, we will explore different CSS Selectors that can be used to select elements in a document.

## Useful Resources

[Introduction to CSS(MDN)](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps)


 What is CSS and how to use it

This quiz has 12 multiple-choice questions. Only one answer is correct for all questions. 

----

   
1. CSS is used for __________ .  
    a. describing the structure of Web pages  
    b. describing the presentation of Web pages  
    c. making Web Pages interactive  
    d. sending data to the server  

> **b. describing the presentation of Web pages**

----
  
2. Which is a valid property for changing text color?  
    a. font-color  
    b. color  
    c. text-color  
    d. None of the above  

> **b. color**

----

3. CSS is a ___________.  
    a. Programming Language  
    b. Scripting Language  
    c. Markup Language  
    d. Stylesheet Language  

> **d. Stylesheet Language **

----

4. Which tag is used to link external stylesheets?  
    a. <link>  
    b. <a>  
    c. <style>  
    d. <meta>  

> **a. <link> **

----

5. Which ruleset will be applied to all HTML elements?  
    a. body { color: blue;}  
    b. \* { color: blue;}  
    c. div { color: blue;}  
    d. .container { color: blue;}  

> **b. \* { color: blue;} **

----

6. Which tag is used to define internal stylesheet ?  
    a. <link>  
    b. <a>  
    c. <style>  
    d. <meta>  

> **c. <style>**

----

7. Which CSS property is used to change text size ?  
    a. font-size  
    b. text-size  
    c. font-family  
    d. None of the above  

> **a. font-size **

----

8. Which attribute is used to define inline styles?  
    a. styles  
    b. font  
    c. style  
    d. target  

> **c. style**

----

9. Which is a valid CSS Declaration?  
    a. color = 'blue'  
    b. color : blue  
    c. 'color' : 'blue'  
    d. 'color' = 'blue'  

> **b. color : blue**

----

10. External Stylesheets are defined in file with ________ extension.  
    a. .css  
    b. .js  
    c. .design  
    d. None of the above  

> **a. .css**

----

11. Which attribute value should be unique in the whole document to avoid unpredictable behavior?  
    a. id  
    b. class  
    c. style  
    d. data-*  

> **a. id**  

----

12. How a comment is written in CSS?  
    a. ~ This is a valid comment ~  
    b. \# This is a valid comment  
    c. // This is a valid comment  
    d. /\* This is a valid comment \*/  

> **d. /\* This is a valid comment \*/**

----