Introduction to CSS

webdesign 5

CSS - Cascading Style Sheets · Syntax example · Usage and embedding in HTML · Colours · Homework · Links ·

CSS – Cascading Style Sheets

- new, flexible way of adding design (CSS) to content and structure (HTML)
- separation of style (CSS) and content (HTML) enables quicker changes to whole sites and easier “corporate design”

Syntax example

body	{
	background-image: url(mona_mit_hand_am_hut_kontrast_ausschnitt_p981.jpg);
	background-color: #000000;
	background-repeat: no-repeat;
	background-position: top right;
	background-attachment: fixed;
	color: #ffffff;

Usage and embedding in HTML

1. possibility – external stylesheet
  <link rel="stylesheet" type="text/css" href="dangerousstyle.css" media="all" />
2. possibility – inline stylesheet in HEAD element
  <style type="text/css">
    a:link { color: #d00000; }
    a:visited { color: #900000; }
    a:active { color: #ffffff; }
3. possibility – define style inside an element (only for this element)
  <h1 style="font-style: italic;">This heading should be italic.</h1>

IMPORTANT: more specific style definitions override the more general ones – the list above ranges from the most general to the most specific


  • Triple of RGB data (Red Green Blue)
  • notation: #rrggbb (RedRedGreenGreenBlueBlue), every part of the triple is a hexadecimal number ranging from 00-ff (0-255)
  • examples: #ff0000 is pure red, #ffffff is white, #000000 is black, #909090 is gray, #0000ff is blue, …


Create your own stylesheet for your project which should contain at least one definition. Reference this stylesheet from your HTML pages.


Using CSS (German): http://
Embedding in HTML (German): http://