Lesson: Classes and ID's
Why should a particular style be specified only for particular tags? Classes and ID's make it possible to specify a particular style for a variety of tags. With classes and ID's, you can also define different styles for the same HTML tag.
This lesson focuses on:
- Classes
- ID's
Classes
With classes, you can specify different styles for the same HTML tag.
For example, you can specify two paragraphs to have different color text:
p.green {color: green;}
p.blue {color: blue;}
To specify a tag as part of a class, you have to use the class attribute within that tag:
<p class="green">This text is green</p> <p class="blue">This text is blue</p>
Styles for classes are specified with the . (dot) character followed by the class name in an internal or external style sheet.
Example:
<style type="text/css">
.text{
font-family: arial;
font-size: 10pt;
font-weight: bold;
color: green;
}
</style>
In the above example, the class text is specified to have a typeface of arial, a font size of 10 points, to be bold, and green. Any tag specified as part of the text class will get these properties.
Based on the style sheet from above:
<p class="text">This text will be green, bold, arial, and have
a font size of 10</p>
will be displayed as:
This text will be green, bold, arial, and have a font size of 10
NOTE: Begin class names with letters, not numbers. Class names that begin with numbers do not work in Mozilla/Firefox browsers.
ID's
ID's are specified with the # (pound sign) followed by the ID name in an internal or external style sheet.
Example:
<style type="text/css">
#text{
font-family: courier;
font-size: 15pt;
font-weight: bold;
color: blue;
}
</style>
In this example, the text ID is specified to have a typeface of courier, a font size of 15 points, to be bold, and blue. Any tag specified as part of the text ID will get these properties.
Based on the style sheet from above:
<p id="text">This text will be blue, bold, courier, and have a
font size of 15</p>
will be displayed as:
This text will be blue, bold, courier, and have a font size of 15
NOTE: Begin ID names with letters, not numbers. ID names that begin with numbers do not work in Mozilla/Firefox browsers.
