Selectors, Classes, and IDs

Cascading Style Sheets — hmm — the style sheets part of that seems pretty obvious. Well, with a little struggle, maybe. I honestly cannot tell you why the inventors decided on sheets instead of files or some other more common term — that’s just one of life’s little mysteries. But the style part, at least, should be obvious: it’s a way of establishing the style (appearance) of your Web pages, giving you much more control than standard HTML does. The cascading part is, after a moment’s reflection on the way CSS works, also obvious: The style formatting flows from the top down, just the same as a waterfall or cascade does. (Perhaps its originators had a sheet of water in mind. . . .)

The preceding section describes three methods of adding CSS to your Web pages. The top in this case is a separate .css file, the next level down the cascade is a general style declaration and, at the bottom of the cascade, you find your inline styles. Each of these is interpreted in that order.

Whether you realize it, you’ve already learned about using selectors in CSS. A selector is simply the name of the element or elements that you’re altering. The H1 element that was used in the preceding examples, for instance, is a selector.

What if you don’t want to change all instances of an element, but just want to change some instances of them? That’s where classes and IDs come in. You create a class in either a style declaration in the HEAD element or in a separate .css file. The syntax is, by now, familiar:

<HEAD>                                                   
						<STYLE>                                                  
						.class1 {color:blue}                                     
						.class2 {font-family:Arial, Helvetica, sans-serif}       
						</STYLE>                                                 
						</HEAD>

If this is done in a separate .css file, leave out the HTML parts (HEAD and STYLE).

This declares that any element that is assigned class1 will be blue while any element that is assigned class2 will be Arial. (The other terms in that font family are the most likely similar fonts in descending order. Any modern operating system will recognize at least one of them and, therefore, display something close to what the Web site designer intended.)

The .class definition is CSS. You recall that CSS and HTML aren’t the same thing, of course, and HTML has a slightly different way of actually assigning the declared classes. All you have to do, basically, is drop the dot at the beginning:

<H1 class="class1">This text will be blue. </H1>              
						<H2 class="class2">This text will be in the Arial             
						   font.<H2>

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.93.136