HTML and CSS Reference
In-Depth Information
In this case, if a
<p>
tag is has the class
important
, the text inside will be blue. If a
<div>
has 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; }
All members of the
important
class will be bold and important
<div>
s will be red,
whereas important paragraphs will be blue. If you assigned the
important
class to
another tag, like
<li>
, the default color would be applied to it.
Whenever you want to specify styles for a single element, assign it an ID. As you'll learn
later in the topic, assigning IDs to elements is also very useful when using JavaScript
because doing so lets you write scripts that reference individual items specifically. For
now, however, 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 2010, Example Industries.
</div>
You can then write CSS rules that apply to that element by referencing the ID. Here's an
example:
#footer { font-size: small; }
As you can see, when you refer to IDs in your style sheets, you need to prepend a
#
on
the front 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 these selectors in one rule, like so:
h1, #headline, .heading, div.important { font-size: large; color: green; }
As you can see, I've included 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.important { color: red }
In this case, list items in the
important
class will be red if they occur in an unordered
list. If they're in an ordered list, the rule will not be applied.
