CSS Tutorial

CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.

How it works:

A style is a definition of fonts, colors, etc.

Each style has a unique name: a selector.

The selectors and their styles are defined in one place.

In your HTML contents you simply refer to the selectors whenever you want to activate a certain style.

For example:

Instead of defining fonts and colors each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells.

Compare the following examples of a simple table:

Classic HTML



With CSS (assuming that a selector called subtext is defined)


While CSS lets you separate the layout from the content, it also lets you define the layout much more powerfully than you could with classic HTML.


With CSS, you will be able to:

- define the look of your pages in one place rather than repeating yourself over and over again throughout your site. (Ever get tired of defining colors and fonts each time you start a new cell in a table? Those days are over with CSS!)

- easily change the look of your pages even after they're created. Since the styles are defined in one place you can change the look of the entire site at once. (Ever get tired of replacing tags throughout your site when you want to change the look of a certain element? Those days are over with CSS!)

- define font sizes and similar attributes with the same accuracy as you have with a word processor - not being limited to just the seven different font sizes defined in HTML.

- position the content of your pages with pixel precision.

- redefine entire HTML tags. Say for example, if you wanted the bold tag to be red using a special font - this can be done easily with CSS.

- define customized styles for links - such as getting rid of the underline.

- define layers that can be positioned on top of each other (often used for menus that pop up).

Your pages will load faster, since they aren't filled with tags that define the look. The style definitions are kept in a single CSS document that is only loaded once when a visitor enters your site.


The one disadvantage is:

- these will only work on version 4 browsers or newer. However, more than 95% of all browsers live up to that.


Syntax:
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note: If you wish to specify more than one property, you must separate each property with a semi-colon. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red}
To make the style definitions more readable, you can describe one property on each line, like this:
p
{
text-align: center;
color: black;
font-family: arial
}


Grouping:
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be green:
h1,h2,h3,h4,h5,h6
{
color: green
}


Class Selector:
With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align: right}
p.center {text-align: center}
You have to use the class attribute in your HTML document:

This paragraph will be right-aligned.

This paragraph will be center-aligned.

Note: Only one class attribute can be specified per HTML element! The example below is wrong:

This is a paragraph.

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align: center}
In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

This heading will be center-aligned

This paragraph will also be center-aligned.

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.


id Selector:
With the id selector you can define the same style for different HTML elements.
The style rule below will match any element that has an id attribute with a value of "green":
#green {color: green}
The rule above will match both the h1 and the p element:

Some text

Some text
The style rule below will match a p element that has an id with a value of "para1":
p#para1
{
text-align: center;
color: red
}
The style rule below will match any p element that has an id attribute with a value of "green":
p#green {color: green}
The rule above will not match an h1 element:

Some text

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Comments:
You can insert comments into CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/", like this:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}


Selectors are the names that you give to your different styles.

In the style definition you define how each selector should work (font, color etc.).

Then, in the body of your pages, you refer to these selectors to activate the styles.

For example:



In this case B.headline is the selector.

The above example would result in this output:


There are three types of selectors:



The general syntax for an HTML selector is:

HTML selectors {Property:Value;}

For example:

HTML selectors are used when you want to redefine the general look for an entire HTML tag.


The general syntax for a Class selector is:

.ClassSelector {Property:Value;}

For example:

Class selectors are used when you want to define a style that does not redefine an HTML tag entirely.

When referring to a Class selector you simply add the class to an HTML tag like in the above example (class="headline").




SPAN and DIV as carriers

Two tags are particularly useful in combination with class selectors: and

.

Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles.

has a particular importance for layers. Since layers are separate blocks of information.

is an obvious choice when defining layers on your pages.


The general syntax for an ID selector is:

#IDSelector {Property:Value;}

For example:

ID selectors are used when you want to define a style relating to an object with a unique ID.

This selector is most widely used with layers (as in the above example), since layers are always defined with a unique ID.


Grouped Selector

Most often selectors will share some of the same styles, for example, being based on the same font.
In these cases, rather than defining the font for each and every selector, one by one, you can group them, and thus assign the font to all the selectors at once.

Look at this example, made without grouping:

As you can see, the only style that varies is the font-size.
In the next example we have grouped the selectors, and defined the common styles at once.


Less to type, easier to change and guaranteed to be the same for all styles.


CSS can be added to your pages at 3 different levels.

It is possible to create CSS styles that only work for the single tag it is defined for.

Single tag CSS is used when the style is used in a single place on the entire site.

Usually a certain style appears more than once on your pages, and thus you should use the second technique: adding styles that are defined once for the entire page.

If, however, that certain style is used on more than a single page, you should use the third - and most powerful - technique described: adding styles that are defined once for the entire site.

The following Sections will explain each of these techniques....

Single Tags / Inline Style Sheet

CSS can be defined for single tags by simply adding style="styledefinition:styleattribute;" to the tags.

Look at this example:


You should limit your use of single tag CSS.

If you define your styles for each and every tag they're used on, you will lose much of the power associated with CSS.

For example, you will have to define the style over and over again whenever it's used, rather than just defining it once and then referring to that one definition whenever it's used.

Furthermore, if you wanted to change a certain style, you'd have to change it all over in your document, rather than in one place.


Single Pages / Internal Style Sheet

CSS can be defined for entire pages by simply adding a style definition to the head section.

Look at this example:



In the above example, although we used the sublines style twice, we only had to define it once: in the section.

By defining styles for entire pages, you will gain the freedom to easily change the styles even after the entire page has been made.

This is an obvious advantage for you as a designer. But the advantage is on the visitors side as well.

Since the styles are only defined in one place, the page size will be smaller, and thus faster to load.

There is a way to emphasize these advantages even more: using external CSS styles that work for entire sites.


Entire Sites / External Style Sheet

CSS can be defined for entire sites by simply writing the CSS definitions in a plain text file that is referred to from each of the pages in the site.

Rather than writing the entire CSS definition on each page, as in the previous examples, you can write it to a text file that is only loaded on the first page that a visitor sees at your site.
When the visitor jumps to other pages, the CSS text file will be cached and thus doesn't have to be transferred via the internet for subsequent pages.

This means that your pages will load faster while at the same time you will have extreme flexibility to change the style for your entire site even after it has been made.

Look at this example:

File: example.html



The above example is the exact same as we used for CSS defined for entire pages, with one important exception:
There is no style definition on the page. Instead we added a reference to an external style sheet:



This means that the browser will look for a file called whatever.css and insert it at the place where the reference was found in the
html document.

So in order to complete our example we need to have a file called whatever.css that looks like this:

File: whatever.css



Now if you just add the line to the of all your pages, then the one style definition will be in effect for your entire site.

Imagine the power and flexibility this gives you to make changes to the layout even after the site is done.
But also realize how using an external style sheet will guarantee that all pages are following the same thread.
There won't be single pages that you forgot to update when you decided to change the style for your headers.




At this point of the tutorial you should know:



All we need now is a walkthrough of the various style attributes that can be assigned.

We will divide them into three categories:


CSS has several options for defining the styles of text.

These options can entirely replace the tag, but there's even more. CSS allows you to define these styles much more powerfully than you could ever do with plain HTML.