- The Rules of Style
- Types of Selectors
- Styles in Context
- Styles for Special Cases
This chapter is from the book
This chapter is from the book
This chapter is from the book
Types of Selectors
So far, you’ve only seen one kind of selector: the HTML selector. This allows you to specify how any HTML tag on the page should be styled. If all you could do was style HTML tags and all of the paragraphs looked the same, and all of the level 2 headers looked the same, and all of the lists looked the same, and so forth, your designs would look pretty boring. You need ways to selectively style HTML tags with CSS.
For example, you might have your level 2 headers look one way when in the main text of an article, another in the sidebar, and yet a third when used as the caption for a photo.
CSS provides three distinct selector types that enable you to tailor your design to appear exactly the way you want.
HTML Selector
To define how a particular HTML tag should be styled indiscriminately across your Web page, use its HTML selector. For example, if you say that all header level 2 tags should be red:
The level 2 header’s text color is red.
h2 { color: red; }
The styles will be applied to any content tagged with:
<h2>...</h2>
All header level 2 tags on the page will be red, unless you override its declarations with other declarations. More about that later.
)
Class Selector
If you don’t want all of your tags to appear exactly the same, you need a “free agent” selector that can be applied to any HTML tag. This is the class selector. When defining a class rule, you place a period immediately before the class name to let the browser know, “Hey, this is a class selector, not an HTML or ID selector”:
.hilight { background-color: yellow;}
This says:
The hilight class text background color is yellow.
To apply this class (and thus its styles) to an HTML tag, add the class attribute to a tag with the class name in quotes. You can apply the same class to any HTML tag you choose, as many times as you want:
<h2 class=“hilight”>Chapter I...</h2>
Notice though that you do not add the period with the class name when it’s in the HTML tag. The period is only included when you are setting up the class rule.
)
Class Selector: Dependent Class
A dependent class allows you to specify the styles a class should have if the class is applied to a particular HTML tag. This allows you to create a general style for a class, but then specify more styles for a specific HTML tag within that class. For example, you might set up a general class to make the background color yellow, and then set up a dependent class so that when that class is applied to a particular tag, the background color is green instead:
If the hilight class is used with a level 2 header, then its background color is green.
h2.hilight { background-color: green; }
)
Class Selector: Mix and Match Classes
As if being able to add a single class to an HTML tag wasn’t enough, you can also add multiple classes to a single HTML tag, mixing and matching styles as needed. Simply list all of the classes you want applied to a particular HTML tag in the class attribute, separated by spaces:
<p class=“hilight smallprint”>'I should...</p>
When applied to an HTML tag, that tag picks up the styles of all of the classes applied to it.
)
ID Selector
The first thing to know about the ID selector is that, on the surface at least, it looks and acts exactly like the class selector. The only obvious difference is that you use a hash mark at the beginning, to declare it, rather than a period:
#title01 { color: green; }
To apply the ID (and thus its styles) to an HTML tag, add the ID attribute to the tag with the name of the ID you want to apply:
<div id=“title01”>Chapter I...</div>
Similar to the class selector, you do not add the hash mark with the ID name when it’s in the HTML tag. The hash mark is only included when you are setting up the ID rule.
)