Selektoren

CSS-Regeln haben grundlegend diesen Aufbau:

selector {
  /* hier stehen die Deklarationen der Regel */
  declaration1;
  declaration2;
  /* usw. */
}

Elementtyp bzw. Tagname

Wie bereits im Beispiel gesehen, kann der Name des Elements bzw. Tags direkt als Selektor verwendet werden:

h1 {
  color: red;
  text-decoration: underline;
}

Dadurch wird auf alle h1-Elemente diese Regel angewendet.

Allgemeine Form:

elementname { 
  /* Deklarationen dieser Regel */
}

Mehrere Selektoren anwenden

Mehrere Selektoren werden durch eine Art „Aufzählung“ (durch Komma getrennt) angewendet:

selector1, selector2 /* , usw. ... */ {
  /* Deklarationen dieser Regel */
}

Diese Regel betrifft dann *alle aufgezählten Elemente, z.B. alle Überschriften der Art h1, h2 und h3:

h1, h2, h3 {
  color: red;
}

id-Attribute

In einem HTML-Dokument sollten id-Attributwerte eines Elements eindeutig sein. Um genau dieses Element für eine CSS-Regel zu selektieren, kann ein id-Selektor eingesetzt werden:

#idval {
  /* Deklarationen dieser Regel */
}

Haben wir also ein z.B. button-Element mit einem id-Attribut:

<button id="my_button">Suche</button>

Dann kann dieser Button (und zwar nur genau dieser Button) z.B. wie folgt eine blaue Hintergrundfarbe erhalten:

#my_button {
  background-color: blue;
}

class-Attribute

Ähnlich wie id-Attribute gibt es für class-Attribute die Möglichkeit, alle HTML-Elemente mit dem gleichen Wert im class-Attribut zu stylen:

.classval {
  /* Deklarationen dieser Regel */
}

Beispiel in der Wetter-App: 
Rahmen bzw. border für mehrere Orte mit class

<div class="weather_location">
  ...
</div>
<div class="weather_location">
  ...
</div>
<!-- usw. >

Hierfür würde sich folgende CSS-Regel eignen:

.weather_location {
    border-width: 2px;
    border-style: solid;
    border-color: silver;
    border-radius: 4px;
}

Kombination von Selektoren

CSS stellt eine Art „Grammatik“ dar, sodass verschiedene Selektoren durch die gegebene Syntax miteinander verknüpft werden können.

So könnten beispielsweise alle p-Elemente mit einem class-Attributwert note ausgewählt werden:

p.note {
  /* Deklarationen dieser Regel */
}

Mehr zu Selektoren auf Prog Content