CSS Selectors
Any tag can serve as a CSS selector, and the rules for that selector will be applied to all instances of that tag on the page. You can add a rule to the b tag that sets the font weight to normal if you choose to do so, or italicize every paragraph on your page by applying a style to the p tag. Applying styles to the <body> tag using the body selector enables you to apply page wide settings. However, there are also a number of ways to apply styles on a more granular basis and to apply them across multiple types of elements using a single selector.
Let’s take for example you want all unordered lists, ordered lists, and paragraphs on a page to be displayed using blue text. Rather than writing individual rules for each of these elements, you can write a single rule that applies to all of them. Here’s the syntax:
p, ol, ul { color: blue }
A comma-separated list indicates that the style rule should apply to all the tags listed. The preceding rule is just an easier way to write.
p { color: blue }
ol { color: blue }
ul { color: blue }
<html>
<head>
<title>Your title</title>
<style type="text/css">
p, ol, ul { color: blue }
</style>
</head>
<body>
<p>some text here for test</p>
<ul>
<li>Bullet point number one</li>
<li>Bullet point number two</li>
<li>Bullet point number three</li>
</ul>
<ol>
<li>Bullet point number one</li>
<li>Bullet point number two</li>
<li>Bullet point number three</li>
</ol>
</body>
</html>
Contextual Selectors:
These are used to apply styles to elements only when they’re nested within other specified elements. Here is an example:
p ol { color: blue }
The fact that I left out the comma indicates that this rule applies only to ol elements that are nested within p elements. Let’s look at two slightly different rules:
p cite { font-style: italic; font-weight: normal }
li cite { font-style: normal; font-weight: bold }
<html>
<head>
<title>Your title</title>
<style type="text/css">
p cite { font-style: italic; font-weight: normal; color:red }
li cite { font-style: normal; font-weight: bold }
</style>
</head>
<body>
<p>some text here for <cite>test<cite></p>
<ol>
<li>Bullet point number one</li>
<li>Bullet point number two</li>
<li><cite>Bullet point number three</cite></li>
</ol>
</body>
</html>
In this case, <cite> tags that appear within <p> tags will be italicized. If a <cite> tag appears inside a list item, the contents will be rendered in boldface. Let’s add in one more rule:
cite { color: green }
p cite { font-style: italic; font-weight: normal }
li cite { font-style: normal; font-weight: bold }
In this case, the nested styles override the default style for the <cite> tag. The contents of <cite> tags that don’t meet the criteria of the nested rules will appear in green. The nested rules will override the color specified in the less-specific rule, so for <cite> tags that are inside <p> tags, the contents will be red. Inside list items, the contents will be blue.
Classes and IDs:
Sometimes selecting by tag (even using contextual selectors) isn’t specific enough for your needs, and you must create your own classifications for use with CSS. There are two attributes supported by all HTML tags: class and id. The class attribute is for assigning elements to groups of tags, and the id attribute is for assigning identifiers to specific elements.
To differentiate between classes and regular element names in your rules, you prepend . to the class name. So, if you have a tag like this:
<div>Some text.</div>
<p>your paragraph here.</p>
then you write the rule like this:
.important { color: red; font-weight: bold; }
Any element with its class set to important will appear in bold red text. If you want to give this treatment to only important <div>s, you can include the element name along with the class name in your rule.
div.important { color: red; font-weight: bold; }
p.important { color: blue; font-weight: bold; }
In this case, if a <p> tag is assigned to the important class, the text inside will be blue. If a <div> is in the important class, its text will be red. You could also rewrite the preceding two rules as follows:
.important { font-weight: bold; }
div.important { color: red; }
p.important { color: blue; }
<html>
<head>
<title>Your title</title>
<style type="text/css">
.important { color: red; font-weight: bold; }
div.important { color: red; font-weight: bold; }
p.important { color: blue; font-weight: bold; }
</style>
</head>
<body>
<div class="important">Some text.</div>
<p class="important">your paragraph here.</p>
<p><span class="important">some text ...</span></p>
<p><span>some text ......</span></p>
</body>
</html>
All members of the important class will be bold and <div>s withimportant class will be red, whereas paragraphs with important class will be blue. If you put a list in the important class, the default color would be applied to it.Whenever you want to specify styles for one element in a style sheet, assign it an ID. Assigning IDs to elements is also very useful when using JavaScript or dynamic HTML because doing so lets you write programs that reference individual items specifically. For now, though, let’s look at how IDs are used with CSS. Generally, a page will have only one footer. To identify it, use the id attribute:
<div id=”footer”>
Copyright 2008, Company Inc.
</div>
So to apply that rule to this element using CSS by referencing the ID. Here’s an example:
#footer { font-size: small; }
<html>
<head>
<title>Your title</title>
<style type="text/css">
#footer { font-size: small; }
</style>
</head>
<body>
<div id="footer">
Copyright 2008, Company Inc.
</div>
</body>
</html>
As you can see, when you refer to IDs in your style sheets, you need to pretend a # on the front in order to distinguish them from class names and element names. Note that there’s no additional facility for referring to IDs that are associated with particular elements. IDs are supposed to be unique, so there’s no need for qualifying them further. Finally, there’s nothing to say that you can’t mix up all of these selectors in one rule, like so:
h1, #headline, .heading, div.important { font-size: large; color: green; }
Here we have several types of selectors in one rule. This is perfectly legal if you want to set the same properties for a number of different selectors. Classes also work with contextual selectors:
ul li.sample2 { color: red }
<html>
<head>
<title>Your title</title>
<style type="text/css">
ul li.sample2 { color: red }
</style>
</head>
<body>
<ul>
<li>number one</li>
<li class="sample2">number two</li>
<li>number three</li>
</ul>
</body>
</html>
In this case, list items in the samlpe2 class will be red if they occur in an unordered list. If they’re in an ordered list, the rule will not be applied.
Layouts With CSS' CATEGORY »
Adding CSS to HTML pagesCSS Selectors
CSS Units Of Measure
CSS Box Properties