short CSS tutorial - CSS selectors

MAIN MENU

Cascade Style Sheets (CSS) Introduction
CSS Selectors
Where CSS definitions are embed in HTML page
CSS attributes
CSS & MySpace

CSS SELECTORS

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

In the style definition you define how each selector should work (font, color etc.).

Then, in the body of your 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.

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
Used to define styles associated to HTML tags. (A way to redefine the look of tags)

Class selectors
Used to define styles that can be used without redefining plain HTML tags.

ID selectors
Used to 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>

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>

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.

ID SELECTORS

The general 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>

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 and every selector, one by one, you can group them, and thus 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;
}

As you can see, the only style that varies is the font-size.
In the next example we have grouped the selectors, and defined the common styles at once.

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

.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}

Less to type, easier to change and guaranteed to be the same for all styles.

CONTEXT DEPENDANT 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.

For example, the style should be in effect here:

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

but not here :

<b>example</b>.

THE SYNTAX
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.

USING GROUPED AND CONTEXT DEPENDENT SELECTORS AT THE SAME TIME:

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.

go home Contact tables graphics Profile videos Extended network graphics Animated icons

first previous next

webmaster Layouts4Myspace