4.2 Cla ss Selectors
Professor: Let me briefly summarize what we have learned about CSS so far. You
can style H TML elemen ts using CSS rules. A CSS rule consists of two basic parts: a
selector and a declaration block. Although the de claration block takes car e o f all the
formatting, the real p ower of CSS hides in the selec tor. With the selector, you take
charge of your page’s appearance , telling CSS what it is you want to style.
The type of selector that we learned abou t in our last meeting is the most general
one. At the same time it is also the simplest to use and understand. Because it le ts
you select elements only according to their names, it is called an element selector
(sometimes also a tag or type selecto r). It is not hard to id entify element selectors
in a CSS rule, for they are named after the elements they style . For example, body ,
p, h1, a, and so forth. Although they are efficient and easy to use, element selectors
have their drawbacks. In your homework, for example, you stumbled upon a problem
of how to right align a hyperlink within just one paragra ph while keeping text inside
other paragraphs left aligned. That is som ething that you cannot do with an element
selector.
Mike: What about an inline CSS declaration? We can use it to style a single element
instance, can’t we?
Professor: Technically, yes. Bu t even if you want to style a single element, it is not
recomme nded to use inlin e declaration. For one thing, using inline CSS means mix ing
structure (HTML) and presentation (CSS), which is considered bad style. Apart from
that, you will often want to repeat the same single ele ment instance stylin g in more
than a single file, as you can imagine could happen with the Continue... hyperlink
from your homework. A more elegant way of tackling the problem is using a so-
called class selector. You create a class selector simply by making up an appropria te
name for it, preceding it with a period (.). For example, let’s name our class continue
and construct the following rule with the continue class a s a selector:
.continue {
text-align: right;
}
Notice that a declaration bloc k is no different than that used with element selectors.
There is, however, an additional step req uired if you want that to work. The browser
won’t know what you want to style unless you explicitly mark an HTML element you
wish to style. For that purpose you use the class global attribute on the element. Like
this:
<p class="continue"><a href="#">Continue...</a></p>
Be careful not to include a pre ceding period with the value of th e class attribute. A
dot is not a par t o f a class name, but it is used in a CSS rule to signal that a class name
follows rather than an element name.
54 Meeting 4. More Contr ol over Style
Mike: If I under sto od correctly, with a class selector you can actually format just one
of the many <p> elements on the page.
Professor: That’s right. And not just one, as a matter of fact. You can select one
or any number you want, and what’s more, the type of an e le ment isn’t a limitation,
either. You can use the same class selector to match elements of differe nt types. For
example, if you want some of your text to bear some spec ia l meaning, then you can
define the following rule:
.something-special {
...
}
Next, you set the class attribute to something-special on any elemen t that you
want to mark (and desig n) as special:
<h1 class="something-special">Main Special Heading</h1>
<h2 class="something-special">Not Main but Still Special</h2>
<h2>I’m Quite Normal</h2>
<p class="something-special">I’m as special as it gets.</p>
Maria: H ow do I know what names I can give to my class selec tors. Is there a list like
there is for HTML e le ments or CSS properties?
Professor: No, there isn’t. You can invent any name you like, but you must f ollow
certain rules. Although the CSS specification allows a little more , I suggest you stick
to the following:
• Only letters (upper case or lower case), numbers, hyphens (-), and underscores
(_) are allowed in class name s.
• A name must always start with a letter. For example, 50cent isn’t a valid class
name, but b52s is.
• Spaces aren’t allowed in a class name . You can use classes like next_exit or
next-exit, but not next exit.
• CSS class names—like everything else in CSS—are not case sensitive but the
class HTML attribute is. Effectively, that makes CSS class names case sensi-
tive as well. For example, if a cl ass HTML attribute is named thingamabob,
then CSS class names Thingamabob or THINGAMABOB won’t match that HTML
attribute. However, don’t use two identically spelled and just differently cased
names for two different classes because CSS won’t be able to tell the difference.
As I already said, sticking to lower-case letters will make your life easier.
Again, don’t forget to p ut a period before a class nam e in a CSS rule, which must not,
however, appear in the class HTML attribute’s value.
Although names like h1 or s trong are perfectly legal class names, try to avoid them
if you want to stay out of trouble . Also, try to use descriptive nam es like copyrig ht
4.2. Class Selectors 55
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.