Titel
...
Die Trennung von Formatierung und Inhalten ermöglicht es, dasselbe Format und den gleichen Stil auf viele verschiedene Seiten anzuwenden. Beispielsweise muss eine Zeitungs-Website ihr Format nur einmal definieren (und der Browser es nur einmal herunterladen), und es wird dann auf jeden Artikel angewendet.
=== Selektoren und Formatierungsregeln ===
Jede CSS-Regel besteht aus zwei Teilen:
* dem **Selektor** - er bestimmt, für welche Elemente die Regel gilt, und
* den Formatierungsregeln - diese definieren, wie die gewählten Elemente aussehen sollen.
Der einfachste Selektor besteht einfach aus dem HTML-Element (also dem Tag-Namen). Es gibt noch andere Selektoren, auf die wir hier nicht eingehen.
Wollen wir alle Elemente mit `...` markierten Textstellen auswählen, schreiben wir also:
strong {
}
Nach dem Selektor folgen geschweifte Klammern, die die Formatierungseigenschaften enthalten. Jede Eigenschaft wird gefolgt von einem Doppelpunkt, dem gewünschten Wert, und einem Semikolon.
Die folgende CSS-Regel bestimmt, dass alle mit `...` markierten Textbestandteile mit rotem Hintergrund angezeigt werden sollen.
strong {
background-color: red;
}
Wollen wir noch etwas mehr formatieren, könnte eine CSS-Datei etwa so aussehen:
body {
background-color: lightgrey;
font-family: sans-serif;
}
h3 {
font-size: 5mm;
color: darkgrey;
}
strong {
background-color: red;
padding: 1mm;
border: 1px dashed black;
}
Speichere das CSS in die Datei `style.css`.
Nach einem Reload zeigt unsere Webseite nun `` Elemente mit rotem Hintergrund an.
My first paragraph, it's so strong!