CSS Tutorial

• Introduction
• CSS Syntax
• CSS Selectors
• Where to Place It
• CSS Text
• CSS Colors
• CSS Font
• CSS Border
• CSS Margin
• CSS Links
• CSS Layers
• CSS List
• CSS Cursors
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
<table>

<tr><td bgcolor="#FFCC00" align="left"><font 
face="arial" size="2" color="red"><b>this is line 
1</b></font></td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font 
face="arial" size="2" color="red"><b>this is line 
2</b></font></td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font 
face="arial" size="2" color="red"><b>this is line 
3</b></font></td></tr>

</table>

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

<table>
<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr>
<tr><td class="subtext">this is line 3</td></tr>
</table>
 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:

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

Note: Only one class attribute can be specified per HTML element! The example below is wrong:
<p class="right" class="center">
This is a paragraph.
</p>

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:

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

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:

<h1 id="green">Some text</h1>

<p id="green">Some text</p>

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:

<h1 id="green">Some text</h1>

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:

<HTML>
<HEAD>
<style type="text/css">
B.headline {color:red; font­size:22px; font­
family:arial; text­decoration:underline}
</style>

</HEAD>

<BODY>
<b>This is normal bold</b><br>
<b class="headline">This is headline style bold</b>
</BODY>

</HTML>

In this case B.headline is the selector.

The above example would result in this output:

 This is normal bold

This is headline style bold

There are three types of selectors:

HTML selectors
Used to define styles associated to HTML tags. (A way to
redefine the look of tags)

Class selectors
Used to define styles that can be used without redefining plain
HTML tags.

ID selectors
Used to define styles relating to objects with a unique ID (most
often layers)

The general syntax for an HTML selector is:

HTML selectors {Property:Value;}

For example:
<HTML>
<HEAD>
<style type="text/css">
B {font­family:arial; font­size:14px; color:red}
</style>

</HEAD>

<BODY>
<b>This is a customized headline style bold</b>
</BODY>

</HTML>

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:
 <HTML>
<HEAD>
<style type="text/css">
.headline {font­family:arial; font­size:14px; 
color:red}
</style>

</HEAD>

<BODY>
<b class="headline">This is a bold tag carrying 
the headline class</b>
<br>
<i class="headline">This is an italics tag 
carrying the headline class</i>
</BODY>

</HTML>

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: <SPAN> and <DIV>.

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

<SPAN> is an "inline-tag" in HTML, meaning that no line

breaks are inserted before or after the use of it.

<DIV> is a "block tag", meaning that line breaks are

automatically inserted to distance the block from the surrounding
content (like <P> or <TABLE> tags).

<DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice
when defining layers on your pages.

The general syntax for an ID selector is:

#IDSelector {Property:Value;}

For example:
 <HTML>
<HEAD>
<style type="text/css">
#layer1 {position:absolute; left:100;top:100; z­
Index:0}
#layer2 {position:absolute; left:140;top:140; z­
Index:1}
</style>
</HEAD>

<BODY>
<div ID="layer1">
<table border="1" bgcolor="#FFCC00"><tr><td>THIS 
IS LAYER 1<br>POSITIONED AT 
100,100</td></tr></table>
</div>

<div ID="layer2">
<table border="1" bgcolor="#00CCFF"><tr><td>THIS 
IS LAYER 2<br>POSITIONED AT 
140,140</td></tr></table>
</div>
</BODY>
</HTML>

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:

.headlines{
font­family:arial; color:black; background:yellow; 
font­size:14pt;
}

.sublines {
font­family:arial; color:black; background:yellow; 
font­size:12pt;
}

.infotext {
font­family:arial; color:black; background:yellow; 
font­size:10pt;
}

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.
 .headlines, .sublines, .infotext {
font­family:arial; color:black; background:yellow;
}

.headlines {font­size:14pt;}
.sublines {font­size:12pt;}
.infotext {font­size: 10pt;}

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:

It is <b style="font­size:16px;">NOT</b> me.

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:

<html>
<head>
<title>MY CSS PAGE</title>
<style type="text/css">
.headlines, .sublines, infotext {font­face:arial; 
color:black; background:yellow; font­weight:bold;}
.headlines {font­size:14pt;}
.sublines {font­size:12pt;}
.infotext {font­size: 10pt;}
</style>
</head>

<body>
<span class="headlines">Welcome</span><br>

<div class="sublines">
This is an example page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>

<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>

<hr>

<div class="infotext">
Example from Academic Articles.
</div>

<hr>
</body>
</html>

In the above example, although we used the sublines style twice, we only had to define it once: in the <head>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
<html>
<head>
<title>MY CSS PAGE</title>
<link rel=stylesheet href="whatever.css" 
type="text/css">
</head>
<body>
<span class="headlines">Welcome</span><br>

<div class="sublines">
This is an example of a page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>

<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>

<hr>

<div class="infotext">Example from Academic 
Articles.</div>

<hr>
</body>
</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:

<link rel=stylesheet href="whatever.css" 
type="text/css">
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
.headlines, .sublines, infotext {font­face:arial; 
color:black; background:yellow; font­weight:bold;}
.headlines {font­size:14pt;}
.sublines {font­size:12pt;}
.infotext {font­size: 10pt;}

Now if you just add the line <link rel=stylesheet href="whatever.css" type="text/css"> to the <head> 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:

1: how to define styles for tags, classes and objects with ID's.
2: how to group styles and make them context dependent
3: how to add styles to single tags, single pages and entire sites

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

We will divide them into three categories:

1: Inline attributes. (Works on tags like: <SPAN>, <B> and <I>).

2: Block attributes. (Works on block tags: <DIV>, <TD> and
<P>).
3: Link attributes. (Works on links and use a special syntax).

CSS has several options for defining the styles of text.

These options can entirely replace the <font> tag, but there's even more. CSS allows you to define these styles much more
powerfully than you could ever do with plain HTML.
FONT PROPERTIES
Property Values NS IE Example
font­ font­family:arial
family font name 4+ 4+
font­family:arial, 
generic font 4+ 4+
helvetica
font­style normal 4+ 4+ font­style:normal
italic 4+ 4+ font­style:italic
oblique 4+ font­style:oblique
font­
variant normal 4+ font­variant:normal
small-caps 4+ font­variant:small­caps

font­
normal 4+ 4+ font­weight:normal
weight
bold 4+ 4+ font­weight:bold
bolder 4W 4+ font­weight:bolder
lighter 4W 4+ font­weight:lighter
100-900 4+ 4+ font­weight:250

font­size normal 4+ 4+ font­size:normal

length 4+ 4+ font­size:14px
length 4+ 4+ font­size:14pt
absolute 4+ 4+ font­size:xx­small
absolute 4+ 4+ font­size:x­small
absolute 4+ 4+ font­size:small
absolute 4+ 4+ font­size:medium
absolute 4+ 4+ font­size:large
absolute 4+ 4+ font­size:x­large
absolute 4+ 4+ font­size:xx­large
relative 4+ 4+ font­size:smaller
relative 4+ 4+ font­size:larger
percentage 4+ 4+ font­size:75%

4P:problems, 4M:Mac only, 4W:Windows only

ASSIGNING ALL FONT ATTRIBUTES AT ONCE
An example of a typical font definition would be:

B {font­family:arial, helvetica; font­size:12px; 
font­weight:bold;}

But since all font attributes can actually be expressed with the font property we could actually write it this way:

B {font:arial, helvetica 12px bold}

The above is obviously a shorter way to specify font settings - but in reality it is less useful than one might think. The reason is
that you'd be assigning the same font face to all your styles, for example, while you'd want different font weights and sizes for
headers and content areas etc.
TEXT PROPERTIES
Despite the font properties listed above there are some options for defining text properties such as alignments, underlines,
etc.

Property Values NS IE Example

line­height normal 4W 4+ line­height:normal
number 4+ 4P line­height:1.5
length 4+ 4+ line­height:22px
percentage 4+ 4P line­height:150%
text­decoration none 4+ 4M text-decoration:none
underline 4+ 4+ text-decoration:underline
overline 4W text-decoration:overline
line-through 4+ 4+ text-decoration:line-through
text-decoration:blink
blink 4+
text­transform none 4+ 4W text-transform:none
capitalize 4+ 4W text-transform:capitalize
uppercase 4+ 4W text-transform:uppercase
lowercase 4+ 4W text-transform:lowercase

text­align left 4+ 4+ text­align:left

right 4+ 4+ text­align:right
center 4+ 4+ text­align:center
justify 4+ 4W text­align:justify
text­indent length 4+ 4+ text­indent:20px;
percentage 4+ 4+ text­indent:10%
white­space normal 4+ white­space:normal
pre 4+ white­space:pre

4P:problems, 4M:Mac only, 4W:Windows only

 Note:

line­height :
When using a number (such as 1.5) the number refers to the font
size, where 1.5 would mean that a 1.5 lines spacing (using the
current font size) will be inserted between the lines.

text­transform :
Capitalize sets the first letter of each word in uppercase.
Uppercase forces all letters to uppercase.
Lowercase forces all letters to lowercase.

text­indent :
Use this to indent the first word of a paragraph.

white­space :
If white-space is set to pre the browser will show all spaces in
the text, rather than ignoring all occurrences of more than one
space. This is similar to the <pre> tag in plain HTML. Since the

white-space is only supported by NS you should use the <pre> 

tag instead.

The official CSS standard provided by W3C also includes properties for word spacing, letter spacing and vertical align, but these
aren't supported by today's browsers.

COLORS
As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception:
the color.

The color is not part of the font collection in CSS - rather it has its own definition.

If you want to add a color to the text in the above example you'd do it this way:

B {font:arial, helvetica 12px bold; color:red}

CSS has several options for defining colors of both text and background areas on your pages.

These options can entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have
in plain HTML.
For example, in plain HTML, when you wanted to create an area with a specific color you were forced to include a table. With
CSS, you can define an area to have a specific color without that area being part of a table.

Or even more useful, in plain HTML when working with tables, you had to specify font attributes and colors etc. for each and
every table cell. With CSS you can simply refer to a certain class in your <TD> tags.

COLOR PROPERTIES
Property Values NS IE
color <color> 4+ 4+
transparent 4+ 4+
background­color
<color> 4+ 4+
none 4+ 4+
background­image
url(<URL>) 4+ 4+
repeat 4+ 4+
repeat-x 4+ 4+
background­repeat
repeat-y 4+ 4+
no-repeat 4+ 4+
scroll 4+
background­attachment
fixed 4+
<percentage> 4+
<length> 4+
top 4+
background­position center 4+
bottom 4+
left 4+
right 4+
<background-color> 4+ 4+
<background-image> 4+ 4+
background <background-repeat> 4+ 4+
<background-attachment> 4+
<background-position> 4+

4P:problems, 4M:Mac only, 4W:Windows only

Setting colors
Basically you have three color options with CSS:
1: Setting the foreground color for contents
2: Setting the background color for an area
3: Setting a background image to fill out an area

In the next section we will list the different properties that let you
do that.
In plain HTML, colors can either be entered by name (red, blue etc.) or by a hexadecimal color code (for example: #FF9900).

With CSS you have these options:

Common name
You can define colors with the use of common names, by simply
enter the name of the desired color.

For example:

.myclass {color:red; background-color:blue;}

Hexadecimal value
You can define colors with the use of hexadecimal values, similar to
how it's done in plain HTML.

For example:

.myclass {color:#000000; background-color:#FFCC00;}

RGB value
You can define colors with the use of RGB values, by simply
entering the values for amounts of Red, Green and Blue.

For example:

.myclass {color:rgb(255,255,204); background-

color:rgb(51,51,102);}

You can also define RGB colors using percentage values for the
amounts of Red, Green and Blue:

For example:

.myclass {color:rgb(100%,100%,81%); background-

color:rgb(81%,18%,100%);}

Setting background colors
Background colors are defined similar to the colors mentioned above. For example you can set the background color of the
entire page using the BODY selector:

BODY {background­color:#FF6666;}
Setting a background image
CSS lets you set a background image for both the page and single elements on the page.

In addition, CSS offers several positioning methods for background images.

You can define the background image for the page like this:
BODY {background­image:url(myimage.gif);}

You can control the repetition of the image with the background­repeat property.

background­repeat:repeat
Tiles the image until the entire page is filled, just like an ordinary
background image in plain HTML.

background­repeat:repeat­x
Repeats the image horizontally - but not vertically.

background­repeat:repeat­y
Repeats the image vertically - but not horizontally.

background­repeat:no­repeat
Does not tile the image at all.

Positioning a background
Background positioning is done by entering a value for the left position and top position separated by a space.

In this example the image is positioned 75 pixels from the upper left corner of the page:

BODY {background­image:url(myimage.gif); 
background­position: 75px 75px;}

Note: Background positioning is not supported by Netscape 4 browsers.

Fixing a background
You can fixate an image at a certain position so that it doesn't move when scrolling occurs.
 BODY {background­image:url(myimage.gif); 
background­attachment: fixed;}

Note: Background fixation is not supported by Netscape 4 browsers.

Setting multiple background values
Rather than defining each background property with its own property you can assign them all with the use of the
background property.

Look at this example:

BODY {background:green url(myimage.gif) repeat­y 
fixed 75px 75px;}

The CSS font properties allow you to change the font family, boldness, size, and the style of a text.

Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property Description Values IE F N W3C

font A shorthand property for setting all font-style 4 1 4 1

of the properties for a font in one font-variant
declaration font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar

font-family A prioritized list of font family names family-name 3 1 4 1

and/or generic family names for an generic-family
element

font-size Sets the size of a font xx-small 3 1 4 1

x-small
small
medium
large
x-large
xx-large
smaller
larger
 length
%

font-size-adjust Specifies an aspect value for an none - - - 2

element that will preserve the x- number
height of the first-choice font

font-stretch Condenses or expands the current normal - - - 2

font-family wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

font-style Sets the style of the font normal 4 1 4 1

italic
oblique

font-variant Displays text in a small-caps font or normal 4 1 6 1

a normal font small-caps

font-weight Sets the weight of a font normal 4 1 4 1

bold
bolder
lighter
100
200
300
400
500
600
700
800
900