The "class" Attribute
The "class" attribute is very similar to the "id" attribute in the fact that they both assign names to an element on your web page. There is one big difference between the tags that are important when learning CSS:
The "class" attribute can be used multiple times per page, so you can use a "class"-named attribute once, twice, 5, or 25 times on a page whereas you can only use an "id"-named attribute once.
When you create a style name to apply to an "class"-named attribute, you must begin the name of the style with the period character (.).
<head>
<title>Example of class attribute</title>
A <link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
B .highlight { background-color: yellow; }
</style>
</head>
<body>
<p>This is a paragraph of text where I want to highlight the C <span class="highlight">important</span> points, similar to how students use highlighters to mark D <span class="highlight">important</span> points in textbooks.</p>
For this example we have:
- Linked our main stylesheet
- Declared any elements with class="highlight" to use a yellow background
- Applied the style "highlight" to the first instance of the word "important"
- Applied the style "highlight" to the second instance of the word "important"
Note that in this example, the style declaration for "highlight" is defined within the document and not in the main stylesheet.css file. This style would only be available to use on this page. For styles that will be used on multiple pages, save them in your central style sheet file.
|
