Hintergrund der Webseite formatieren

Zeilenumbrüche und Zeileneinrückungen im Quelltext verbessern die Lesbarkeit der CSS-Regeln, wie in den folgenden Beispielen ersichtlich ist:


body {	Hintergrundfarbe der Website
	background-color: #FFCCCC;  Schriftart
	font-family: Arial;         
}

Das Aussehen der Überschrift < h1 > formatieren


h1 {															Schriftart
	font-family: Arial;                        Schriftgrösse
	font-size: 26px;                           Schriftschnitt: fett
	font-weight: bold;                         
}

Das Aussehen der Überschrift < h2 > formatieren


h2 {															Schriftart
	font-family: "Comic Sans MS";              Schriftgrösse
	font-size: 22;                             Schriftfarbe
	color: black;                              Untersrichen und Strichfarbe
	border-bottom: 1px solid #FF9900;          
}

Absätze formatieren


p {                                                Schriftfarbe von Absätzen
  color: #003366;
}

Aufzählung mit Zahlen formatieren


ol {																Aufzählungsarten: decimal
   font-family: "Comic Sans MS";                   lower-alpha, upper-alpha
																	lower-roman, upper-roman
}

Aufzählung mit Zeichen formatieren

															Aufzählungszeichen:
ul {																none, disc, circle, square													
    list-style-type: circle;                       Einzug links
    list-style-position: outside;                  Bild als Aufzählungszeichen
    list-style-image: url(stern.gif);				Schriftart
    font-family: "Cooper Std Black";               Schriftgrösse
    font-size: 24px;                               Schriftfarbe
    color: #003366;                                
}

Link noch nicht besucht (a:link) und Link bereits besucht (a:visited)


a:link, a:visited {                      Schriftfarbe           
    color: #FF6600;              Schrift: Fett                   
    font-weight: bold;             Nicht unterstrichen                 
    text-decoration: none;             Abstand vom Link links             
    padding-left: 3px;                  Abstand vom Link rechts            
    padding-right: 3px;                             
}

Link, über dem der Mauszeiger gerade darüber schwebt (a:hover)


a:hover {                                           Schriftfarbe
    color: #FFFFFF;                    Hintergrundfarbe             
    background-color: #FF6600;             Unterstrichen         
    text-decoration: underline;                     
}

Link, der gerade angeklickt wurde (a:active)


a:active {                                          Schriftfarbe
    color: #FF9933;                                 
}