strong {
background-color: red;
}
Nach einem Reload zeigt unsere Webseite nun `` Elemente mit rotem Hintergrund an.
== Beispiel 2 ==
body {
background-color: lightgrey;
font-family: sans-serif;
}
h3 {
font-size: 5mm;
color: darkgrey;
}
strong {
background-color: red;
padding: 1mm;
border: 1px dashed black;
}
Section heading
My first paragraph, it's so strong!
border: 5mm solid darkblue;
Mehr Informationen [[https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/border|selfhtml]].
== Grössenangaben ==
Die Geräte, die unsere Webseite anzeigen sollen, sind sehr unterschiedlich gross: ein Mobiltelefon ist vielleicht 8 oder 10cm breit, auf dem Projektor stehen mehrere Meter zur Verfügung. Deshalb werden auch vermeintlich absolute Grössen wie `cm` oder `mm` vom Browser nicht so absolut interpretiert. Oft ist es ohnehin besser, stattdessen mit einem Mass zu arbeiten, dass sich auf die Schriftgrösse des Elements bezieht:
* `1em` ist ungefähr die Grösse des Buchstabens `M`, je nach Schriftgrösse des Elements.
* `1lh` entspricht der Zeilenhöhe.
Für grössere Layouts können wir mit Grössenangaben relativ zur Grösse des Browserfensters arbeiten:
* `1vw` ist ein Prozent der Breite des Browserfensters.
* `1vh` ist ein Prozent der Höhe des Browserfensters.
Mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]].
=== Erweiterte Selektoren ===
Bisher haben wir CSS-Regeln für alle gleichen Elemente geschrieben. Die Selektoren können aber noch nach weiteren Kriterien entscheiden, ob eine Regel für ein Element gilt:
== Das class Attribut ==
Ein HTML-Element kann deklarieren, dass es zu einer Klasse gehört, mit dem `class`-Attribut. Ein Selektor aus dem Punkt und dem Klassenamen wählt alle Elemente dieser Klasse aus:
Ein grüner Abschnitt.
Ein roter Abschnitt.
.green {
background-color: green;
}
.red {
background-color: red;
}
Ein grüner Abschnitt.
Ein roter Abschnitt.
Ein grüner Abschnitt mit Padding.
Ein roter Abschnitt mit Padding links rechts.
p.rounded {
padding: 1em;
border-radius: 0.5em;
}
div.rounded {
padding: 0 2em;
border-radius: 0.5em;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
Ein grüner Abschnitt mit Padding.
Ein roter Abschnitt mit Padding links rechts.
Der eine, wichtige Abschnitt.
Ein ganz anderer Abschnitt.
p#theoneandonly {
padding: 0.5em;
background-color: red;
border: 2px dashed black;
}
Der eine, wichtige Abschnitt.
Ein ganz anderer Abschnitt.
- `-Liste), und vieles mehr. [[https://wiki.selfhtml.org/wiki/CSS/Selektoren|Selfhtml]] hat die ganze Auswahl.
=== Weiterführende Links ===
Die Website [[https://wiki.selfhtml.org/wiki/CSS|SelfHTML]] bietet sowohl eine **Einführung in CSS** als auch ein **Nachschlagewerk** für die tausenden von Eigenschaften, Layouts, und Tricks.
* mehr zu [[https://wiki.selfhtml.org/wiki/Grafik/Farbe|Farben]]
* mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]]
* mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie|Schriftformatierung]]