Getting Started with CSS Rules
In the HTML section, you created an "index.html" file that contained an image and list. This article explains how to add CSS to that document. You will define styles for the <h1>
, <p>
, and <li>
elements. This example uses embedded CSS rules in an external .css file. This method is efficient for styling several documents.
Styling things based on their location in a document
There are times when you will want something to look different based on where it is in the document. There are a number of selectors that can help you here, but for now we will look at just a couple. In our document, there are two <em>
elements – one inside a paragraph and the other inside a list item. To select only an <em>
that is nested inside
an <li>
element I can use a selector called the descendant combinator, which takes the form of a space between two other selectors.
Add the following rule to your stylesheet.
li em {
color: rebeccapurple;
}
This selector will select any <em>
element that is inside (a descendant of) an <li>
.
So in your example document, you should find that the <em>
in the third list item is now purple, but the one inside the paragraph is unchanged.
Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so place a +
(an adjacent sibling combinator)
between the selectors.
Try adding this rule to your stylesheet as well:
h1 + p {
font-size: 200%;
}
Try adding a rule to make a span red, if it is inside a paragraph. You will know if you have it right as the span in the first paragraph will be red, but the one in the first list item will not change
color.
I am a level one headingThis is a paragraph of text. In the text is a span element and also a link. This is the second paragraph. It contains an emphasized element.
|
CSS and HTML
li em {
color: rebeccapurple;
}
h1 + p {
font-size: 200%;
}
<h1>I am a level one heading</h1>
<p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="http://example.com">link</a>.</p>
<p>This is the second
paragraph. It contains an <em>emphasized</em> element.</p>
<ul>
<li>Item <span>one</span></li>
<li>Item two</li>
<li>Item
<em>three</em></li>
</ul>
Note: As you can see, CSS gives us several ways to target elements, and we've only scratched the surface so far! We will be taking a proper look at all of these selectors and many more in our Selectors articles later on in the course.