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

Stylesheet http://http://www.edition1.net/dangerous/dangerousstyle.css
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
<head>
  [...]
  <link rel="stylesheet" type="text/css" href="dangerousstyle.css" media="all" />
</head>
2. possibility – inline stylesheet in HEAD element
<head>
  [...]
  <style type="text/css">
    a:link { color: #d00000; }
    a:visited { color: #900000; }
    a:active { color: #ffffff; }
  </style>
</head>
3. possibility – define style inside an element (only for this element)
<body>
  [...]
  <h1 style="font-style: italic;">This heading should be italic.</h1>
  [...]
</body>

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

Colours

  • 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, …

Homework:

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

Links:

Using CSS (German): http://http://de.selfhtml.org/css/index.htm
Embedding in HTML (German): http://http://de.selfhtml.org/css/formate/einbinden.htm