CSS Rules and Selectors part 3

• COURSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

CSS Rules and Selectors

12

3/4

     

id and class Selectors

id selectors allow you to style an HTML element that has an id attribute, regardless of their position in the document tree. Here is an example of an id selector:

The HTML:<div id="intro">
<p> This paragraph is in the intro section.</p>
</div>
<p> This paragraph is not in the intro section.</p>
The CSS:

#intro {
color: white;
background-color: gray;
}Try It Yourself

To select an element with a specific id, use a hash character, and then follow it with the id of the element.
Result:
Class selectors work in a similar way. The major difference is that IDs can only be applied once per page, while classes can be used as many times on a page as needed. 

In the example below, both paragraphs having the class "first" will be affected by the CSS: 

The HTML:<div>
<p class="first">This is a paragraph</p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section</p>
<p> The second paragraph is not in the intro section. </p>
The CSS:

.first {font-size: 200%;}Try It Yourself

To select elements with a specific class, use a period character, followed by the name of the class.
Do NOT start a class or id name with a number!