Loading course content...
Loading course content...
Code Playground is only enabled on larger screen sizes.
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 inside the curly braces ({}) will then be assigned to all the 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 can we make the paragraphs inside have different styles?
<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. In an HTML document, each element can be assigned an id.
<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 still 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 class selectors to select HTML 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 elements can also be placed under multiple classes, separated by space characters. This enables you to create different combinations:
<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 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>