Introduction

If you have not already done so, you may wish to read the article on CSS concepts first.

What is a style (also called a rule or a selector)?

HTML uses a system of tags to tell "elements", such as lines of text, how they should be styled. For example, a sentence of text surrounded by the paragraph tag <p> will look like this ...

<p>This is a sentence.</p>

A style applies one or more attributes to a tag. For example, the following style styles text within a <p> tag with some attributes ...

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

Styles are usually collected together in a style sheet (CSS) which is attached to the html pages.

What is a selector?

In CSS terms, a style is also known as a selector because it selects the tag it will apply attributes to.

In the example above, "p" is the selector (this rule will style all text formatted with the p - paragraph tag), and "font-size: 10px;" and
"color: #000000;" are the attributes which make the style.

Lets keep this simple!!! Most of the time a style, selector and rule are the same thing!!!

Types of selector (styles)

Element selectors (re-defined tags)

This type of style allows the designer to re-defines the default attributes of an tag (such as the p or h1 tags). Click here for advice on how to do this in Dreamweaver. For example ...

p {
font-weight:bold;
color: #000000;
}

Class selectors/styles

Class selector/styles are normally used to modify an element, group of elements or perhaps a few word within a paragraph. For example, this selector/style ...

.greenText {
color: green;
}

... could be used to colour the text of several tags ...

<p class="greenText">I'm feeling green</p>

<h1 class="greenText">I'm feeling big and green</h1>

... or a word within a paragraph ...

<p>... or a <span class="greenText">word</span> within a paragraph ...</p>

Classes and divs

You can also make a class selector/style work like a <div> tag. This allows you to have multiple boxes on a single page but, they will be positioned in the text flow and cannot be accurately positioned like layers. Here's an example ...

<div class="boxclass">

<p>Here is some text in a box</p>

</div>

... and the selector/style

.boxclass {
width: 500px;
height: 500px;
}

Contextual selector/styles

Contextual selectors allow you to define attributes for an element depending on its context.

For example, you could create a style which will re-define the style of a paragraph tag which is nested within a <div> tag but which will not effect any instances of the p tag elsewhere on the page.

In this example ONLY paragraph text inside a div called "boxparagraphtext" will be green.

<div id= "boxparagraphtext">
<p>Here is some paragraph text in a box defined by a div tag</p>
</div>

#boxparagraphtext p {
color: green;
}

Paragraph text elsewhere on the page (outside of the <div id= "boxparagraphtext"> box will be red.

p {
color: red;
}

Grouped selector/styles

Grouped selectors allow you to attach an attribute value to a group of selector/styles in one go. For example ...

p, h1, h2 {
color: blue;
}

... or in this example ... using a single selector to style the background colour of multiple div ID selectors ...

#box1, #box2, #box3, #box4 {
background-color: #099020;
}

... or in this example ... using a single selector to style the a:link inside multiple div ID selectors ...

#homebutton a:link, #aboutmebutton a:link, #creativebutton a:link, #workbutton a:link, #candgbutton a:link {
background-image: url(link.gif);
}

Pseudoclass selector/styles

A pseudoclass is a CSS oddity and is mostly used to redefine the appearance of hyperlinks (link, hoover, active & visited states).
Click here for advice on how to do this in Dreamweaver.

ID selector/styles

ID selectors are unique individually named identifiers for a single object on a page. ID selectors work in partnership with tags and most commonly with the <div> tag. You could create an ID selector which precisely positions a text box on a page, styles the text within it, and defines padding and a border. You can only apply one instance of an ID to a page.
Click here for advice on how to do this in Dreamweaver.

Layers

When you add positioning and stacking order (z-index) to a div tag it becomes a layer and layers are another "flavor"of CSS and DHTML. Layers are usually associated with CSS and the div tag.

Click here for advice on how to do this in Dreamweaver.