Loading course content...
Loading course content...
Let's take a closer look at the CSS code demo from the previous lesson:
p {
color: red;
text-decoration: underline;
}p is a selector, and it selects all <p> elements in the HTML document.
p {
color: red;
text-decoration: underline;
}The styles defined within curly braces ({}) will then be applied to all selected elements.
p {
color: red;
text-decoration: underline;
}But, what if you have a more complex HTML structure?
For example, here we have two blocks, <div> and <section>, each with its own paragraphs. How do we assign different styles to the paragraphs?
<div>
<p>Lorem ipsum . . .</p>
<p>Lorem ipsum . . .</p>
</div>
<section>
<p>Lorem ipsum . . .</p>
</section>To answer this question, we must first discuss two essential HTML attributes, id and class.
<body>
<div>
<p id="first-paragraph"></p>
<p id="second-paragraph">. . .</p>
</div>
<section>
<p id="third-paragraph">. . .</p>
</section>
</body>The id must be unique across the entire document. You cannot have two different elements with the same id in the same document.
After setting an id, you can then use an id selector to give that paragraph a style.
An id selector starts with a hash character (#), followed by the id of the element you wish to select:
#first-paragraph {
color: red;
}
#second-paragraph {
color: blue;
}
#third-paragraph {
color: green;
}However, as you can imagine, since the ids are unique, this method requires us to micromanage individual elements.
So instead, you can use class to group elements into different categories.
<body>
<div>
<p class="red-text">. . .</p>
<p class="blue-text">. . .</p>
</div>
<section>
<p class="blue-text">. . .</p>
</section>
</body>Next, use the class selector to select elements under that particular class.
A class selector starts with a dot (.), followed by the class you wish to select.
.red-text {
color: red;
}
.blue-text {
color: blue;
}Each HTML element can also be placed under multiple classes, separated by space characters. This allows you to create different combinations like this:
<body>
<div>
<p class="red-text bold">. . .</p>
<p class="blue-text underline">. . .</p>
</div>
<section>
<p class="blue-text bold underline">. . .</p>
</section>
</body>.red-text {
color: red;
}
.blue-text {
color: blue;
}
.bold {
font-weight: bold;
}
.underline {
text-decoration: underline;
}Lastly, it is also possible to select elements of a particular type under the specified class.
For example, this is how you can select all <p> elements with the class red-text.
<h1 class="red-text">Heading</h1>
<p class="red-text">. . .</p>
<p class="blue-text">. . .</p>p.red-text {
color: red;
}Try this in the code playground, and notice that even though <h1> also has the class red-text, it remains unstyled, as p.red-text only selects the <p> elements with the red-text class.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> p { color: red; text-decoration: underline; } </style> </head> <body> <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> </body> </html>