CSS Regel

CSS Regeln sind immer genau gleich aufgebaut. Ein Selektor bestimmt das zu formatierende Objekt. Es folgt ein mit geschweiften Klammern begrenzter Deklarationsblock. Innerhalb des Deklarationsblock finden sich die einzelnen CSS-Regeln.
Jede Regel besteht aus einer CSS-Eigenschaft gefolgt von Doppelpunkt : und Wert. Mit Semikolon ; wird jede einzelne Regel abgeschlossen.

Regeln können auch auf die beiden speziellen HTML-Formatierungs-Tags angewendet werden (s. Rubrik Texte und Absätze):

  • Block-Element: <div>...</div>
  • Inline-Element: <span>...</span>

Diese beiden Tags werden oft mit Hilfe von Klassen und/oder id-Namen formatiert (s. weiter unten).
Deklarationsblock html, body {
  font-size: small;
  font-family: Arial,Helvetica,sans-serif; 
  margin: 0;
  padding: 0;
  height: 100%; 
}

Deklarationsblock

Selektor

Regel oder Regelsatz

CSS-Eigenschaft

Wert


PS: Es wurden nur eine der 5 CSS-Regeln und nur je ein Beispiel für Eigenschaft und Wert farblich hervorgehoben.
Element-Selektoren 
p {color: blue;}

h1, h2, h3 {text-align: center;}

img {
  border-style: none;
  border-width: 0px;
  width: 280px;
}

Element-Selektoren beziehen sich auf HTML-Tags. Das Format wird allen entsprechenden Tags zugewiesen.

Kommagetrennt können mehrere HTML-Tags gleichzeitig angesprochen werden. Innerhalb des Deklarationsblocks können mehrere CSS-Formate durch Semikolon ; getrennt aufgeführt werden.
Klassen-Selektoren

CSS-Regel:

.wichtig {font-weight: bold; color: red;}

 
Zuweisung im HTML-Dokument:

<p class="wichtig"> ... </p>
<h2 class="wichtig"> ... </h2>

Sollen nur einzelne Tag einer Tagfamilie anders formatiert werden, so kann Ihnen eine CSS-Klasse zugewiesen werden. Eine Klassen-Regel wird mit einem Punkt . eingeleitet und ihr Name kann frei vergeben werden.
Klassen können mehrmals und unterschiedlichen HTML-Tags zugewiesen werden.
Pseudo-Klassen a:link {color:#000000;}
a:visited {color:#ffff00;}
a:hover {color:#ff0000;}
a:active {color:#ff0000;}

Pseudo-Klassen beziehen sich auf Zustände oder Ereignisse von HTML-Tags. Häufig werden die Pseudoklassen des a-Tags angesprochen. Damit die Link-Formatierung in allen Browsern klappt, müssen alle vier Zustände in gezeigter Reihenfolge definiert werden.
:link und :visited sind nur bei a-Elementen möglich, :hover, :active und :focus auch bei anderen Elementen.
ID-Selektoren

CSS-Regel:

#hauptmenue {background-color: salmon;}

 
Zuweisung im HTML-Dokument:

<ul id="hauptmenue"> ... </ul>

In CSS können mit der Raute # eingeleitet Regeln für ein dokumentweit einmaliges Element erstellt werden. Mit dem Attribut id darf daher im HTML-Dokument nur einmal der gleiche Name zugewiesen werden.
Diese Technik wird zusammen mit dem div-Tag oft für die Definition von Ebenen (Layern) verwendet.
Kind-Selektoren

Direkter Nachfahre:

p>strong {font-weight: bold; color: red;}

 
Direkter- oder indirekter Nachfahre:

p strong {font-weight: bold; color: red;}

Da HTML-Dokumente hierarchisch aufgebaut sind, können Elemente in Abhängigkeit von ihrem Vaterelement angesprochen werden. Wird in der CSS-Regel zwischen Vater- und Kindelement ein > notiert, so muss das Kindelement direkter Nachfahre sein, sonst wird die Regel nicht wirksam.
Folge-Selektoren h2+p {color: blue;}

Mit + kann auf HTML-Elemente zugegriffen werden, die unmittelbar ein bestimmtes Vorgänger-Element besitzen. Im Beispiel werden Absätze die unmittelbar auf eine Überschrift 2. Ordnung folgen mit blauer Schriftfarbe formatiert.
Media Queries @media screen and (min-width: 480px) {
    body {
        background-color: red;
    }
}

Die @media Regel ermöglicht unterschiedliche Formatierungen für unterschiedliche Medientypen zu definieren. Medientypen sind u.a.:

  • screen: Bildschirm
  • print: Drucker
  • speech: Sprachausgabe (vorlesen)
  • braille: Ausgabegeräte mit Braille-Zeile (Blindenschrift)

Regeln lassen sich mit den Operatoren and und not kombinieren.