Selectors - CSS tutorial

CSS SELECTORS :

CLASS SELECTORS

The general syntax for a Class selector is:

.ClassSelector {Property:Value;}

For example:

<HTML>
<HEAD>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>

</HEAD>

<BODY>
<b class="headline">This is a bold tag carrying the headline class</b>
<br>
<i class="headline">This is an italics tag carrying the headline class</i>
</BODY>

</HTML>

Click here to open a window that shows the result of the above example.

Class selectors are used when you want to define a style that does not redefine an HTML tag entirely.

When referring to a Class selector you simply add the class to an HTML tag like in the above example (class="headline").

SPAN and DIV as carriers

Two tags are particularly useful in combination with class selectors: <SPAN> and <DIV>.

Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles.

<SPAN> is an "inline-tag" in HTML, meaning that no line breaks are inserted before or after the use of it.

<DIV> is a "block tag", meaning that line breaks are automatically inserted to distance the block from the surrounding content (like <P> or <TABLE> tags).

<DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice when defining layers on your pages.

<< PREVIOUS