Home Up Overview Introduction Selectors Placing CSS Text Colors Measure Links Lists Cursors

 
Selectors

Selectors are the names that you give to your different styles.

In a CSS style definition you define how each selector should define its appearance with font, colour, and so on.

Then, in the body of your web pages, you refer to these selectors to activate the styles.

For example:

<HTML>
<HEAD>
<style type="text/css">

B.headline { color:red; font-size:22px;
                     font-family:arial;
             text-decoration:underline;}
</style>
</HEAD>
<BODY>
<b>This is normal bold</b><br>
<b class="headline">This is headline style bold</b>
</BODY>
</HTML>

In this case B.headline is the selector.

NOTE:  If this does not work try adding the HTML comment tag to your page to look like:

<style type="text/css">

<!-- B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline;} -->

</style>

The above example would result in this output:

This is normal bold
This is headline style bold

There are three types of selectors:

HTML selectors
define styles associated to HTML tags. (A way to redefine the look of tags)
Class selectors
define styles that can be used without redefining plain HTML tags.
ID selectors
define styles relating to objects with a unique ID (most often layers)
Tag Selectors
The general syntax for an HTML selector is:

HTMLSelector {Property:Value;}

For example

<HTML>
<HEAD>
<style type="text/css">

B {font-family:arial; font-size:14px; color:red}

</style>
</HEAD>
<BODY>

<b>
   This is a customized headline style bold
</b>

</BODY>
</HTML>

The result 


This is headline style bold

HTML selectors are used when you want to redefine the general look for an entire HTML tag.
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>

The result


This is a bold tag carrying the headline class
This is an italics tag carrying the headline class

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. They are used 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 the <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.
ID Selectors
The syntax for an ID selector is:

.#IDSelector {Property:Value;}

For example

<HTML>
<HEAD>
<style type="text/css">

#layer1 {position:absolute; left:100; 
         top:100; z-Index:0}
#layer2 {position:absolute; left:140;
         top:140; z-Index:1}

</style>

</HEAD>
<BODY>

<div ID="layer1">
<table border="1" bgcolor="#FFCC00">
 <tr>
  <td>THIS IS LAYER 1<br>POSITIONED AT 100,100
  </td>
 </tr>
</table>
</div>

<div ID="layer2">
<table border="1" bgcolor="#00CCFF">
 <tr>
  <td>THIS IS LAYER 2<br>POSITIONED AT 140,140
  </td>
 </tr>
</table>
</div>

</BODY>
</HTML>

The result 


click here to view

ID selectors are used when you want to define a style relating to an object with a unique ID

This selector is most widely used with layers (as in the above example), since layers are always defined with a unique ID.
Grouped Selectors
Most often selectors will share some of the same styles, for example, being based on the same font.

In these cases rather than defining the font for each selector, you can group them and assign the font to all the selectors at once.

Look at this example, made without grouping:

.headlines {
font-family:arial; color:black; background:yellow;
font-size:14pt;}

.sublines {
font-family:arial; color:black; background:yellow;
font-size:12pt;}

.infotext {
font-family:arial; color:black; background:yellow;
font-size:10pt;}

The only style attribute that varies among the selectors is the font-size.  If we group the selectors, we can define the common styles.

.headlines, .sublines, .infotext {
  font-family:arial; 
  color:black; 
  background:yellow;}

.headlines {font-size:14pt;}

.sublines {font-size:12pt;}

.infotext {font-size: 10pt;}
Context Dependent Selectors
It is possible to make selectors that will only work in certain contexts.

For example, you can define a style for the <b> tag that is only triggered if the text is not only bold but also written in italics.

The style should be in effect here:


<i><b>example</b></i>

but not here :


<b>example</b>

Simply adding a normal style to the <b> tag is done like this:


B {font-size:16px}

Adding a context dependent style, like the one described above is done like this:


I B {font-size:16px}

We simply separated the contextual <i> tag from the <b> tag with a space.

It is possible to use context dependent and grouped selectors at the same time.

For example, like this


I B, .headlines, B .sublines {font-size:16px;}

In the example the font-size of 16 pixels is in effect on:

1) All <b> tags enclosed by <i> tags
2) All headlines classes.
3) sublines classes enclosed by <b> tags.