CSS for the Newbie - Selectors...Unite!
(Page 3 of 5 )
You can assign groups of selectors the same value in the following manner:
h1,h2,h3,h4,h5,h6
{
font-family: “Comic Sans”;
font-size: 12pt
color: red;
text-align: center
}
Now, every time we use any of the headers, the text will automatically have the font type of Comic Sans, have a font size of 12 points, be red in color, and aligned to the center of the page.
Assigning the Same HTML Element with a Different Value
Say you wanted to have an <h1> header tag with a certain default value. Every time you used that tag, it would have the attributes you defined. But what if every once in a while you wanted to insert an <h1> tag that had different attributes? Well you can do so by using the Class Selector. Here it is in code:
h1.weird {font-family:”Comic Sans”;color:red}
h1.notweird{font-family:Verdana;color:black}
The above would create two Class Selectors. If you typed h1.weird, it would apply the attributes you defined in that Selector. If you typed h1.notweird, it would apply the font as Verdana and the color as black.
This allows you more flexibility when designing your site.
You use the class attribute to apply it:
<h1 class=”weird”>
Here is a mighty header!
</h1>
<h1 class=”notweird”>
Here is an even mightier header!
</h1>
Say I wanted to add more than one class to my element. First, let's create a third element:
h1.weird {font-family:”Comic Sans”;color:red}
h1.notweird{font-family:Verdana;color:black}
h1.center{text-align:center}
Now to apply two of the classes:
<h1 class=”weird center”>
Here is a mighty header!
</h1>
Next: Applying a Style to an Element with an Attribute >>
More Style Sheets Articles
More By James Payne
