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 h2 tags). Click here for advice on how to do this in Dreamweaver. For example ...
p {
font-weight:bold;
color: #000000;
}
CSS classes
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>
<h2 class="greenText">I'm feeling big and green</h2>
... 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, h2, h3 {
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.