Cascading Style Sheets: allgemein

CSS: Einbinden separater CSS-Datei

Allgemein:

<link rel="stylesheet" type="text/css" href="formate.css">

Medium: Bildschirm:

<link rel="stylesheet" media="screen" href="website.css">

Medium: Drucker:

<link rel="stylesheet" media="print, embossed" href="druck.css">

Medium: Hören:

<link rel="stylesheet" media="aural" href="speaker.css">

Medium: Braille:

<link rel="stylesheet" media="braille" href="braille.css">

CSS: Einbinden vermittels CSS-Syntax

(im Header:)

<style type="text/css">

@import "allgemein.css";

@import url("erweitert.css");

@import url("druck.css") print, embossed;

@import url("pocketcomputer.css") handheld;

@import url("normal.css") screen;

</style>

CSS: Formate für HTML-Tags speziell definieren

<style type="text/css">

h1 { font-size:300%;

     color:#FF0000;

     font-style:italic;

     border-bottom:solid thin black; }

p,li  { font-size:110%;

        line-height:140%;

        font-family:Helvetica,Arial,sans-serif;

        letter-spacing:0.1em;

        word-spacing:0.3em; }

</style>

Pseudoklassen

für Links

 

<style type="text/css">

 body { font-family:Arial,sans-serif; }

 a:link { color:#EE0000; text-decoration:none; font-weight:bold; }

 a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }

 a:focus { color:#00AA00; background-color:#FFFF77; font-weight:bold; }

 a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }

 a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }

</style>

für Absätze

:first-child = erstes Element in eienr div-Umgebung

:first-line = erste Textzeile

:first-letter = erste Zeichen