CSS styles / selectors / rules by Matt Ottewill

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

Types of selector

Tag selectors (re-defined tags)

This type of style rule allows the designer to re-defines the default property/values 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;
}

Planet Of Tunes TV

CSS classes
YouTube button

Class selectors

Class selectors can be applied to any HTML element, and used many time in the same document. 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 selectors

Contextual selectors allow you to define property/values 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 selectors

Grouped selectors allow you to attach a property/values 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 selectors

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 selectors

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.