Lesson 9: CSS Selectors
Well you have some really cool settings to play with thanks to lesson 8, but how do you choose what they’re applied to? You have to select the object you want to style. Here’s how.
p {
border: solid black 1px;
}
This applies the border only to paragraphs (
tags).
p.important {
border: solid black 1px;
}
This applies the border only to paragraphs that are written as <p class="important">.
.centre {
text-align: center;
}
Makes the text centred in any element that has “class=”center”” in its tag.
#footer p {
font-size: 80%;
}
This applies a font size of 80% of normal to paragraphs in the footer. Other paragraphs are unaffected. You’d use it this way:
<div id="footer">
<p>This text will be smaller</p>
</div>
A <div> tag simply defines a container that can have its own styling. You should only use each id once per page – otherwise you should use a class instead (eg. div.footer).
ul, ol {
font-weight: bold;
}
This makes text in lists bold. When you use a comma, the styling is applied to each of the elements in the list.
p + p {
text-indent: 3em;
}
Any paragraph that is preceded by a paragraph will have its first line indented by 3 ems (the space taken by three letter Ms).
There is more to selectors, of course. This is a good place to find out about them.