Help Stefan Campaign
If you can spare $1 then help support this site and change someone's life forever? Learn how and why on the Help Stefan campaign page. Or donate $10 and get my guide to spices book as a gift for your donation!

Celtnet Information:

Introduction to CSS: Part 3

In this section you'll learn a little more about the three main CSS Selector type along with definitions of what they are and examples of what they do. This page will show you all the main types of selectors; including definitions and examples. You may want to bookmark this page to refer back to it as you delve deeper into the intricacies of Cascading Style Sheets.

Tag Selectors

Syntactically an HTML selector is:

HTML Selector {Property:Value;}

A good example of this is the re-definition of the heading style seen in second page of this course:

<HTML>
<HEAD>
<style type="text/css">
h1 {font: 24pt/48pt Monotype Corsiva; margin-top: 1.5px; text-align: center;}
</style>

</head>

<body>
<h1>This is a customized heading!</h1>
</body>

</html>

The effect of using this newly-defined <h1> is as follows:

This is a customized heading!

HTML selectors are employed to redefine the genral look for an HTML tag in your entire website.

CLASS Selectors

Syntactically a Class selector is:

.ClassSelector{Property:Value;}

The following example should make things clearer:

<HTML>
<HEAD>
<style type="text/css">
.headline {font: 24pt/48pt Monotype Corsiva; margin-top: 1.5px; text-align: center;}
</style>

</HEAD>

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

</HTML>

The effect of using this newly-defined <.headline> class is as follows:

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

Class selectors are usually used when you want to modify the behaviour of an HTML tag. They can either be defined globally (use the .ClassSelector format) or they can be applied to just a single type of HTML tag (eg p.ClassSelector which only applies as a class to the <p> paragraph HTML tag).

Class Selectors are often used with the special HTML <SPAN> (which is an 'inline-tag' in HTML, meaning that no line breaks are inserted before or after the use of it) and the <DIV> (this is a 'block tag' meaning that line breaks are automatically inserted to distance the block from the surrounding content) tags.

CLASS Selectors

Syntactically a Class selector is:

#IDSelector{Property:Value;}

<html>
<head>
<style type="text/css">
#layer1 {position:absolute; left:100;top:100; z-Index:0}
#layer2 {position:absolute; left:135;top:135; z-Index:1}
</style>
</head>

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

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

As the example above uses layers, please click here to show the results in a new window.

ID selectors are used to define a style that relates to an object with an unique ID. As such they can only be called once in a single HTML pages. For this reason ID Selectors are most widely used with layers (as shown above). This is a good match, as layers are always defined with an unique identifier.

The next part of this CSS course will tell you more about CSS styles and how they actually apply to HTML elements. If you are interested in following this course, of if you want to brush-up your CSS programming skills then I suggest that you buy yourself a book on CSS and HTML (a number of possible options form Amazon are shown at the bottom of this page).

On to the next part...