Cascading Style Sheets (CSS) - Tutorial http://www.vogella.de/articles/CSS/article.

html

Cascading Style Sheets (CSS) - Tutorial

Lars Vogel

Version 0.6

Copyright © 2007 - 2010 Lars Vogel

19.12.2010

Revision History
Revision 0.1 12.04.2007 Lars Vogel
created
Revision 0.2 - 0.7 05.11.2009 - 19.12.2010 Lars Vogel
bugfixes and enhancements

HTML and CSS

This article explains how to use CSS for styling HTML pages.

Table of Contents

1. Cascading Style Sheets (CSS)

2. Usage of CSS
2.1. First example
2.2. CSS syntax
2.3. HTML container via id and class
3. Defining size
4. Alignment and Text transformations
5. Margins and padding
6. Positioning HTML elements with CSS
7. CSS based layout
8. Thank you
9. Questions and Discussion
10. Links and Literature

1. Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a mechanism for adding style and layout (e.g. fonts, colors, spacing) to Web documents.
This layout information is typically maintained in an external css file. HTML code which should use these files refer to these
files in their code.

2. Usage of CSS
2.1. First example

Pick a certain directory can create the following file "styles.css".

In the same directory define this HTML file. This file defines that it will use the style sheet "styles.css" which can be found in
the same directory.

1 of 7 4/11/2011 4:00 PM
Cascading Style Sheets (CSS) - Tutorial http://www.vogella.de/articles/CSS/article.html

2.2. CSS syntax

CSS defines via selectors certain values for pre-defined properties. This follows the following syntax,

For example the following css file defines the size an color for header tag h1. The rest of the HTML file is not affected by
this definition.

2.3. HTML container via id and class

HTML elements can have and id and / or an class attribute. An id must be unique in the HTML document while the class
attribute can be defined for several HTML elements. CSS allows to style these elements via special selectors. HTML also
allows to define sections via "div" containers. These "div" containers can be used to style parts of the HTML document
differently. div can also be identified by an id and / or by a class and can container other block elements.

The following example demonstrate both usages. Create the file "stylesdiv.css"

Create the following HTML file to use the style sheet.

2 of 7 4/11/2011 4:00 PM
Cascading Style Sheets (CSS) - Tutorial http://www.vogella.de/articles/CSS/article.html

You can also select by position in the HTML document. For example "td a" only selects links which are within a table row.

You can also use other attributes for example the following will define certain styling for links which have been visited or
over which the mouse hovers. The will identify if you have a link already visited or if the mouse hovers over a link and will
change the display of the link accordingly.

3. Defining size
The most consist way to define size is the unit "em" which is a relative unit to the font-size. 1em is as large as the font-size.
You can use 1em for defining the space between words (word-spacing), or letters (letter-spacing) or to define the line
height (line-height) of an HTML element. text-indent allows you to define the intent of the first line of a paragraph.
text-indent: -1em put the first line a bit before the rest of the text.

4. Alignment and Text transformations

Via text-align you can define how your content (not only text) should be aligned. text-transform allow to transform the text to
upper, lower case or to capitalize the first letter.

5. Margins and padding

You can define margins and paddings for your HTML block element. A block element can be though of as a box which
contains something.This box has a border to other elements. Padding defines the inner distance of elements to the end of
the box. Margin defines the outer distance of other elements.

3 of 7 4/11/2011 4:00 PM
Cascading Style Sheets (CSS) - Tutorial http://www.vogella.de/articles/CSS/article.html

The total size of the HTML box is defined by the initial size of the box, plus the margins and the padding and a border, if
defined.

6. Positioning HTML elements with CSS

CSS allows to setup element with fixed, relate and absolute positions. Relative is the standard and will change the
distribution of the different text containers based on the available space.

Frequently you want to make sure that you boxes stay on a specific place. You can use postion:absolute for this. A block
element with this style will be removed from the normal flow of the HTML page and will have a fixed space. For example:

If you want to have a element always on a certain position you can use the fixed position and will not move even if you scroll
down the HTML page.

4 of 7 4/11/2011 4:00 PM
Cascading Style Sheets (CSS) - Tutorial http://www.vogella.de/articles/CSS/article.html

For more examples see CSS positioning .

7. CSS based layout

You can use HTML div container and CSS to layout your webpage.

Your example the following webpage uses div container.

5 of 7 4/11/2011 4:00 PM
Cascading Style Sheets (CSS) - Tutorial http://www.vogella.de/articles/CSS/article.html

This result in the following layout.

8. Thank you
Please help me maintaining this article:
106

6 of 7 4/11/2011 4:00 PM
Cascading Style Sheets (CSS) - Tutorial http://www.vogella.de/articles/CSS/article.html

9. Questions and Discussion

Before posting questions, please see the vogella FAQ . If you have questions or find an error in this article please use the
www.vogella.de Google Group . I have created a short list how to create good questions which might also help you.

Free premium phpBB styles Community favorite phpBB styles by STSoftware design team stsoftware.biz
Create Website like Pro Easy for Novice, powerful for Pros Get 50% off (Promo code "dnjsgud" ) www.Namo.com
OSS Fast Infoset Tools Fast, compact XML without a schema Ideal for embedded devices. Evals. www.oss.com

10. Links and Literature

http://de.selfhtml.org/ Selfhtml - German

7 of 7 4/11/2011 4:00 PM