Rules:
Class vs. ID
If you want to uniquely identify a particular element on a page for
styling, use the id attribute. For example:
#content {
font-family: verdana;
font-size: .85em;
color: #333;
}
|
This is helpful for headers, navbars and other elements that appear only
once on many different pages. There can only be one element with
a particular id per page:
| <div id="content">content</div>
|
If you want to identify an element as part of a group of elements that
you can style similarly, use the class attribute. There can be many
elements with the class "important", and they will all be styled
the same. For example:
<p class="important">You have an overdue book!</p> |
The tag name is followed by a dot, then the name of the
class to which the rule applies.
| with this style rule: |
|
p.first {
color: yellow;
background-color: black;
}
|
| this HTML markup |
renders like this |
<p class="first">
This is some high-contrast text.
</p>
|
This is some high-contrast text.
|
If an explicit HTML tag is not supplied with a rule, then the rule applies
to all tags of that class.
| with these style rules: |
|
.option {
color: #BE365D;
font-size: 1.2em;
font-style: italic;
font-weight: normal;
}
h3.option {
color: #BE365D;
font-weight: bold;
} |
| this HTML markup |
renders like this |
<h3 class="option">
Bill Gates' prophetic vision
</h3>
|
Bill Gates' prophetic vision
|
<blockquote class="option">
640k should be enough for everyone...
</blockquote>
|
640k should be enough for everyone...
|
This rule applies equally to paragraphs, headers, or any other HTML structure
of class option.
A style rule can be applied to several tags by listing the tags separated
by commas. For example, to display all the headers in a blue sans-serif
font, as on this page, use:
H1, H2, H3, H4, H5, H6 {
font-family: Arial, sans-serif;
font-weight: normal;
color: #0050B2;
background: transparent;
}
|
|
