CSShark - Basic CSS Syntax
The CSS Know-How Site

The Basics

The Syntax

A stylesheet consists of one or more rules that describe how document elements should be displayed.

A rule in CSS has two parts: the selector and the declaration:

There are three types of elements that a CSS selector can be applied to:

• HTML Elements, such as <P> tags, <DIV> tags etc.
• Elements with a specific CLASS, for example an element with the class "content" (<P CLASS="content">)
• Elements with a specific ID, for example an element with the ID "warning1" (<P ID="warning1">)

H1 {font-size: 1.8em;}

This expression is a rule and consists of a selector and the declaration, and the rule says:
Every H1 tag in this HTML document has to be of a font-size of 1.8em.

Redefining HTML tags

The big advantage with CSS is that you can create your 'own' tags by creating classes. That does not mean that you have to.... in most cases, redefining the HTML tags like BODY, P, STRONG etc makes things easier, more logical and leaner.

Note: by redefining the original structural HTML tags you keep the structure of a document, while you change the presentation to your liking.

That means, if your document comes across a device or browser that can't do CSS, but HTML, then the structure of the document makes it still usable, accessible and readable, only the colors and styles are gone.

On the other hand, if you re-invent the wheel and style your document exclusively with <div>s and <span>s you do *not* take advantage of the very idea of CSS. Also you render your document useless in any browser/device that doesn't do CSS.

If I imagine that one uses HTML for presentation and a bit of CSS for mark-up, then this would constitute for "the worst of both worlds"

Let's get back to the rule:

H1 {font-size: 1.8em;}

This whole expression is a rule. This rule says: Every HTML H1 tag in this document has to be of a font-size of 1.8em.

 Back to the Top 

Now let's take a look at the different parts of this rule:

H1 This is the Selector.

{} everything within these brackets is the declaration.

font-size: this is a property.

1.8em; is the value of the property.

It is a good idea to always 'close' a value with the semicolon. According to the specification, you can leave the last value open, but I found that by repeatedly adding and deleting properties there is a good chance that you forget to add the semicolon, and this gives you a wonderful session in debugging.

We have the font-size declared, but now we want to change the color of all the text in that document to be dark blue. That includes lists, headers, simple text, and even the text in the odd table cell.

There are a few ways to achieve this. The most elegant would be

BODY {color: #000088;}

A modern browser interprets that rule as: Everything in this document has the color #000088, with the exception of the background(s). The cascading effect of inheritance colors borders, text, headers in this color, as long as there is no other color specified.

 Back to the Top 

Some older browsers do have difficulties with inheritance. Therefore you have to exactly specify what the selectors are that you want to have this color:

BODY, P, H1, H2, H3, H4, H5, H6, TD, DIV, OL, UL, DL {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background: #FFFFFF;
color: #000088;
}

Now we have grouped several selectors, and several declarations. Compared to an old-fashioned HTML document, we have saved tons of deprecated font-tags. Changing the font-family or the color is now a matter of minutes - site wide.

Since HTML tags have inherent properties it makes sense to redefine those tags. Applying CSS this way means that the structure of the document is preserved.

Other topics:

•  Syntax
•  Elements, Properties and Values
•  Links
•  DIVs and SPANs
•  CLASS and ID
•  Inheritance and
•  The Stylesheet