XHTML - CSS Selectors - CSS Classes

CSS Selectors

CSS selectors
Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.

What is a rule or "rule set"?
Introduction
A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.

Rule structure

rule structure

Selector
The selector "selects" the elements on an HTML page that are affected by the rule set. The selector consists of everything up to (but not including) the first left curly bracket. For example:
h1 { color: blue; margin-top: 1em; } p { padding: 5px; } td { background-color: #ddd; }

Declaration block
The declaration block is a container that consists of anything between (and including) the curly brackets. Whitespace inside a declaration block is ignored - so it can be used to lay out rules in any way you want.
For example:
h1 { color: blue; }
p { padding: 5px; }
td { background-color: #ddd; }
Or, with whitespace added to aid readability:
h1 { color: blue; }

Declaration
The declaration tells a browser how to draw any element on a page that is selected. A declaration consists of a property and a value, separated by a colon ":". Although it is not essential to add a semicolon after a single declaration, it is recommended that you finish the last declaration in a block with a semicolon.
For example:
h1 { color: blue; }

Property
The property is the aspect of that element that you are choosing to style. There can only be one property within each declaration.
For example: p { padding: 5px; }

Value
The value is the exact style you wish to set for the property.
For example:
p { padding:5px; }

CSS Classes

CSS Classes
You may be wondering if it is possible to give an HTML element multiple looks with CSS. Say for example that sometimes you want the font to be large and white, while other times you would prefer the font to be small and black. CSS would not be very useful if it did not allow you to have many different types of formats for a single HTML tag. Well, you are in luck! CSS allows you to do just that with the use of classes.

You can use CSS classes with any HTML element! However, what happens if we had already defined a value for the default <p> tag, would this cause any problems for classes of the paragraph tag?
Well, when this happens the CSS class for any <p> tag will override the default <p> CSS. If the CSS class uses a CSS attribute already defined by the default CSS, then the formatting defined by the class will be the value that is used.
It may be easier to imagine that the CSS for a generic HTML element is the starting point and the only way to change that look is to overwrite the attributes using CSS classes. Please see the example below for a visual of this tricky topic.

CSS Code:
p{ color: red; font-size: 20px; } p.test1{ color: blue; } p.test2{ font-size: 12px; }

This is a normal paragraph.

This is a paragraph that uses the p.test1 CSS code!

This is a paragraph that uses the p.test2 CSS code!

For feedback on my site Email Me

Top of Page