CSS - Aussehen der HTML-Elemente bestimmen

Cascading Stylesheets (CSS) sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente.
Man kann also u.a. Schriftart und Buchstabengrösse definieren, die Elemente pixelgenau positionieren und Listen, Tabellenzellen, Ebenen, Formularelemente mit bestimmten Hintergundfarben, Hintergrundbildern und Rahmen versehen.
Die CSS-Stilangaben kann man auf verschiedene Arten ins HTML-Dokument integrieren:

Einmalige Formatierung eines Elementes:

Diese kann mit der Attributangabe "style" innerhalb des Tags angegeben werden.
 
<Element style="CSS-Eigenschaft:Wert; ...">...</Element>

Mehrfach-Formatierung über Selektoren:

Damit Formateigenschaften mehrfach angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren.
Diese Formatierungsangaben können im <head>-Bereich der HTML-Seite oder in einer externen CSS-Datei definiert werden.
Dateispezifische Formatierung:
Diese Angaben müssen zwischen <head> und </head> stehen.
<style>
Selektor1 { Eigenschaft:Wert; ...}
Selektor2 { Eigenschaft:Wert; ...}
...
</style>
Verweis auf externe CSS-Datei:
Auch dieser Link muss zwischen <head> und </head> stehen.
<link rel="stylesheet" href="formatdatei.css">
CSS-Datei:
In dieser Textdatei (*.css) können die Formatanweisungen aufgelistet werden.
Selektor1 { Eigenschaft:Wert; ...}
Selektor2 { Eigenschaft:Wert; ...}
...

Selektoren-Typen:

Es gibt einfache CSS-Selektoren (Elemente, Klassen oder ID's) und zusammengesetzte Selektoren (Kombinatoren, Pseudoelemente und Pseudoklassen). Ich stelle hier die wichtigsten vor:
HTML-Elemente:
HTML-Elemente welche den sichtbaren Teil einer Webseite definieren, können mit CSS formatiert werden. Die Formatdefinitionen gelten dann automatisch für alle diese Elemente im HTML-Dokument sowie auch für dessen Kindelemente.
z.B.
body { Eigenschaft:Wert; ...} (gilt für alle sichtbaren Elemente des Dokuments)
oder
h1,h2 { Eigenschaft:Wert; ...}
Klassen:
Wiederholt vorkommende Formatangaben, die aber nicht allgemein einem speziellen HTML-Element zugewiesen werden sollen, können als Klasse formatiert werden. Die Klasse wird mit einem "." vor dem Klassennamen definiert.
Definition:
.klassenname { Eigenschaft:Wert; ...}
Anwendung:
<Element class="klassenname">...</Element>
Individualformate:
Einmalig vorkommende Formatangaben können mit einer "id" formatiert werden. Diese "id" kann dann per Skripts auch eindeutig angesprochen werden. Definition über "#"
Definition:
#id-Name { Eigenschaft:Wert; ...}
Anwendung:
<Element id="id-Name">...</Element>
Pseudoklassen:
Bei Pseudoklassen handelt es sich um einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt, z.B. ein "noch nicht besuchter Verweis" (a:link) oder das "erste Kindelement eines anderen Elementes" (:first-child). Definition über ":".
Selektor:Pseudonym { Eigenschaft:Wert; ...}
z.B.
a:link { Eigenschaft:Wert; ...}
oder
li:first-child { Eigenschaft:Wert; ...} //erstes Listenelement
Pseudoelemente:
Ein Pseudoelement erzeugt einen nicht im Elementbaum vorhandenen Abschnitt, der formatiert oder mit Inhalt gefüllt werden kann. Z.B. a::before erzeugt ein Element vor einem Link, oder p::first-letter spricht das erste Zeichen eines Abschnitts an, und macht daraus ein formatierbares Element. Definition über "::".
Selektor::Pseudonym { Eigenschaft:Wert; ...}
z.B.
a::before { Eigenschaft:Wert; ...}
oder
p::first-letter { Eigenschaft:Wert; ...}
Kombinatoren:
Kombinatoren sind Zeichen, die zwei Selektoren miteinander verketten. Durch diese Verkettung bildet der erste Teilselektor eine Bedingung und der zweite Teilselektor das Ziel, das angesprochen werden soll, wenn die Bedingung erfüllt wurde. Mögliche Kombinatoren: > (Kindselektor), + (Nachbarselektor), ~ (Geschwisterselektor), Leerzeichen (Nachfahrenselektor).
Selektor1 Kombinator Selektor2 { Eigenschaft:Wert; ...}
z.B.
p > em { Eigenschaft:Wert; ...} //wenn em Kindelement von p ist
p em { Eigenschaft:Wert; ...} //wenn em Nachfahrenelement von p ist
p + em { Eigenschaft:Wert; ...} //wenn em direkt auf p folgt

Eine ausführliche Auflistung aller möglichen Selektoren finden Sie bei SELFHTML/Selektoren
 
Media Queries für responsive Webseiten:

Nebst der Formatierung über Selektoren kann man in CSS auch Darstellungen anhand des verwendeten Geräts resp. der Bildschirmgrösse via Media Queries anpassen. Das ist sehr wichtig, da die Besucher ja sehr unterschiedliche Geräte benutzen. Von kleinen Bildschirmen auf Handies bis PC's mit sehr grossen Monitoren.
Grundsätzlich sollte man zunächst alle Formatierungen optimiert auf kleine Mobiltelefon-Bildschirme definieren. Und dann ist es üblich über Media Queries - @media - zunächst Anpassungen für Tabletts und danach für grosse Bildschirme anzugeben. Für Selektoren die unter @media nicht angegeben werden, gelten die Angaben die für Handys gemacht wurden. Eine gängige Strukturierung sieht folgendermassen aus:
 
... Selektoren-Formatierungen für kleine Handy-Bildschirme ...
@media (min-width: 768px){
... Selektoren welche auf Tablett und grossen Bildschirmen anders dargestellt werden sollen...
}
@media (min-width: 1024px){
... Selektoren welche nur auf grossen Bildschirmen anders dargestellt werden sollen...
}

Bei den Anwendungen gehe ich auf wichtige CSS-Eigenschaften ein.