CSS

CSS ist eine Stylesheet-Sprache mit der definiert wird, wie der HTML-Code dargestellt werden soll. Du kannst dir vorstellen, dass HTML das Skelett ist und CSS ist die Haut, die dem Skelett ein Gesicht gibt.

CSS steht für "Cascading style sheets" und wird vom World Wide Web Consortium (W3C) fortlaufend weiterentwickelt.

In diesem Artikel findest du Grundlagen zu CSS sowie Tipps und Tricks, mit denen du deine Website besser gestalten kannst.

Drei Wege um CSS einzubinden

Es gibt 3 verschiedene Arten, wie du CSS in ein HTML-Dokument einbinden kannst:

External (Standardweg): Die Stylecheets stehen in einer separaten, externen CSS-Datei, zum Beispiel mit dem Namen styles.css. Vorteil hiervon: Du kannst die Datei leicht in mehrere (oder alle) HTML-Dateien einbinden und musst Änderungen nur an einer Stelle vornehmen um den Look der ganzen Website zu verändern.
Embedded: Stylesheets im Head-Bereich der HTML-Datei. Es ist "good practise" diese unterhalb einer extern eingebunden CSS-Datei einzubinden, weil sie dann bewusst die extern eingebunden Styles überschreiben (sollen).

Inline: CSS direkt in den HTML-Tags, Beispiel: <p style="bla"></p>. Inline-Styles überschreiben externe Styles.

Specificity

Wie der Name schon sagt, setzt CSS auf eine Kaskadenstruktur. Es ist wichtig zu wissen, dass immer das am tiefsten liegende Style angewandt wird. External wird von Embedded überschrieben, und Embedded wird von Inline überschrieben. Inline-Styles sind im Waterfall immer ganz unten und somit am stärksten.

Es ist außerdem wichtig zu wissen: Je spezifischer eine Regel ist, desto stärker ist sie. In folgendem Beispiel greift die obere Deklaration (mit aqua) weil sie spezifischer ist als die untere Deklaration:

html body {
    background-color: aqua;
}
body {
    background-color: goldenrod;
}

Klassen wiederum sind spezifischer als reine Element-Selectors und ids sind spezifischer als Klassen. Spezifischer als ids ist nur inline definiertes CSS.

Um zu testen, welches CSS am spezifischsten ist, kannst du diesen Specificity Calculator benutzen.

Wichtige Begriffe

In Klammern die deutschen Begriffe:

Selector (Selektor): Mit diesem sprichst du bestimmte HTML-Elemente an.
Property ("Eigenschaft" oder "Attribut"): Die Eigenschaft, die du definieren/ändern willst.
Value (Wert): Der Wert, den die Eigenschaft bekommt.
Declaration (Deklaration): Property + Value zusammen.

Hier findest du die CSS-Begriffe grafisch dargestellt.

Die Values können unterschiedlich angegeben werden, zum Beispiel als:

Length units, zum Beispiel font-size: 30px; oder <font-size: 1em; (was standardmäßig 16 Pixel sind)
Keywords: zum Beispiel font-size: large;
Percentage: zum Beispiel font-size: 150%;

Allgemeines

Ohne CSS ist das Aussehen von den Default-Einstellungen des Browsers abhängig. Die Website sieht in diesem Fall in jedem Browser anders aus. Mit Stylesheets kann man erzwingen, dass die Website in jedem Browser gleich aussieht.
Die Reihenfolge der Deklarationen ist in CSS normalerweise egal. Eine Ausnahme gibt es allerdings: Für die Style-Definitionen der Links ist es wichtig, dass a:hover und a:active nach a:link und a:visited definiert werden.
Kommentare in CSS werden über diesen Code realisiert: /* Das ist ein Kommentar */ Sie können sich auch über mehrere Zeilen mit Umbrüchen erstrecken. Einen einzeiligen Kommentar der Form // Kommentar gibt es in CSS nicht.

Tipps & Tricks

Unterschied zwischen den Eigenschaften "width" und "max-width":
- "width" ist wirklich eine feste Breite -> wird das Browser-Fenster verkleinert, wird der Seiteninhalt rechts abgeschnitten
- "max-width" ist die maximale Breite -> wird das Browser-Fenster kleiner gemacht als die Angabe unter max-width, so wird der Seiteninhalt weiter verkleinert und ist somit noch komplett lesbar
media-Parameter: kann man zum Beispiel nutzen um fürs Drucken (media="print") andere Styles zu verwenden als auf dem Schirm (media="screen")
Das Attribut z-index (für Schichtpositionierungen) funktioniert nur bei positionierten Elementen (position:absolute, position:relative, position:fixed).
Mit dem Attribut "text-shadow" kann man einen Textschatten-Effekt produzieren - zum Beispiel mit dem Code text-shadow: 0 1px 2px #777777;
Die Standard-Attribute für das body-Tag sind color, background-color, font-size und font-family.
Beispiel für eine typische Style-Definition für den Body-Bereich:

body {
     color: #5d665b;
     background-color: #e8eae8;
     font-size: 100%;
     font-family: Verdana, Geneva, Arial, sans-serif;
}

Um einen pre-Bereich nicht über die ganze Seitenbreite zu strecken, sondern der Breite des Elternelements anzupassen: white-space: pre-wrap;
Wie du eine Website mit CSS zentrierst: [1]
Klassen- und ID-Namen dürfen nicht mit Zahlen beginnen, sondern nur mit Buchstaben, einem Unterstrich oder einem Bindestrich.
Um den längeren Text eines Submit-Buttons (<input type="submit"...>) auf Mobile nicht abzuschneiden, sondern über mehrere Zeilen gehen zu lassen: white-space: normal;

Es gibt 3 Möglichkeiten ein Element auszublenden:

display: none;: Das Element wird aus dem Dokument entfernt. Es wirkt als ob das Element nicht existiert. Andere Elemente nehmen den freiwerdenden Platz ein.
visibility: hidden;: Das Element wird nur ausgeblendet, nimmt aber noch Raum ein, den andere Elemente nicht belegen.
opacity: 0;: Das Element wird nur ausgeblendet, nimmt aber noch Raum ein, den andere Elemente nicht belegen.

Positionierung

Werte für die Eigenschaft position und Erklärung:

static: Defaultwert. Jedes Element wird im normalen Elementefluss platziert.
relative: Das Element wird relativ zu der Position platziert auf der es eigentlich gewesen wäre. Beispiel:

    position: relative;
    top: -40px;
    margin-bottom: -40px;

Durch top: -40px; würde eine Lücke zu dem folgende Element entstehen, weil das folgende Element von der ursprünglichen Position des darüberliegenden Elements ausgeht. Um das zu verhindern wird mit einer negativen margin-bottom gearbeitet.

absolute: Entfernt das Element aus dem normalen Flow. Positionsangaben beziehen sich auf das erste Elternelement, das nicht static ist. Wenn alle Elternelemente static sind, dann bezieht es sich auf das root-Element html. Um das absolute-Element anhand eines bestimmten Elternelements auszrichten, gib diesem Elternelement einfach position: relative; mit (ohne Positionsangaben).
fixed: Element wird fixiert. Zum Beispiel sinnvoll für feststehende Header, die immer sichtbar sein sollen.

Möglichkeiten um Ausgabe unterhalb von floatenden Objekten zu erzwingen (Textumfluss beenden):

Ein Element mit clear: both wird unterhalb von links oder rechts floatenden Elementen platziert.
Ein Element mit clear: left wird unterhalb von links floatenden Elementen platziert.
Ein Element mit clear: right wird unterhalb von rechts floatenden Elementen platziert.
Wenn Designs mit float gemacht werden, kann es sinnvoll sein am Ende ein leeres div einzufügen mit clear: both. Ein zugehöriger Klassenname, der häufig verwendet wird ist clearfix.
Alternative zu CSS: <br clear="all">

Sonstiges:

Ein übersichtliches Tutorial über display: flex und die vielfältigen Design-Möglichkeiten mit Flexboxes, findest du hier.
Um in einem Wrapper (der eine bestimmte Maximalbreite hat) ein div wieder full-width zu machen:

.full-width-innerhalb-wrapper {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

Pseudoklassen

Hilfreiche Pseudoklassen:

:first-child: Wählt das erste Child-Element aus.
:last-child: Wählt das letzte Child-Element aus.
:nth-child(x): Wählt das x-te Child-Element aus.
:nth-child(odd): Wählt alle ungeraden Child-Elemente aus (1,3,5,7...).
:nth-child(even): Wählt alle geraden Child-Elemente aus (2,4,6,8...).
a:hover: Wenn mit der Maus auf den Link gegangen wird (ohne zu klicken).
a:active: Wenn Link geklickt wird (in diesem Moment).
a:visited: Wenn Link bereits angeklickt wurde - um zu kennzeichnen, dass man auf dieser Seite bereits war.

Pseudoklassen haben immer ein (einzigen) Doppelpunkt vor der Klasse.

Pseudo-Elemente

::before: Fügt etwas vor einem Element ein. Typischerweise wird dann mit der Eigenschaft content gearbeitet, also zum Beispiel:

ul li::before {
    content: "⇨  ";
}

Pseudoelemente beginnen immer mit zwei Doppelpunkten.
Sie können mit Pseudoklassen kombiniert werden, zum Beispiel:

ul li a:hover::before {
    content: "⇨  ";
}

Um einen Zeilenumbruch innerhalb content: hinzubekommen, baue ein /A ein und nutze white-space: pre;. Beispiel:

#deine-ID::before {
    content: "Hallo \A";
    white-space: pre;
}

Um ein Leerzeichen innerhalb content: hinzubekommen, nutze diese Code:

#deine-ID::before {
  content: " ";
  white-space: pre;
}

Um unter Überschriften einen kleinen Strich anzuzeigen, der nicht über die komplette Breite geht^[1]:

h2::after {
    content: "";
    display: block;
    width: 70px; 
    padding-top: 20px;
    border-bottom: 1px solid #aaa;
}

Einheiten

em ist eine relative Größenangabe und bezieht sich immer auf das Elternelement. Wenn du in einem child-Element einer Eigenschaft den Wert 1em gibst, so ist die Eigenschaft genauso groß wie beim Elternelement.
em eignet sich gut für Responsive Webdesign.
Der Unterschied zwischen den Einheitenem und rem: Die Einheit em bezieht sich immer auf das Elternelement. rem steht für "root em" (CSS 3) und bezieht sich somit immer auf die Schriftgröße des body beziehungsweise html (also standardmäßig 16 Pixel). Die Berechnung von endgültigen Schriftgrößen ist mit rem einfacher, weil die Bezugsgröße immer fix ist. Bei em dagegen kann es durch mehrere verschaltete em schwieriger werden, endgültige Schriftgrößen zu bestimmen.

Schriften

Die Eigenschaft font-weight kann Hunderter-Werte von 100 bis 900 annehmen. Dabei entspricht 400 einem normalen Gewicht und 700 entspricht Fettschreibung.

Bilder

Um ein background-image mit opacity zu versehen, siehe [2].

Farben

Es gibt 140 vordefinierte Keywords um Farben zu setzen. Diese werden gerne zum schnellen Testen verwendet. In endgültigen Designs wird meist mit hex-Werten gearbeitet.

Inline-Elemente vs. Block-Elemente

Inline-Elemente:

Inline-Element nehmen immer genauso viel Platz ein, wie sie brauchen. Wenn du ihnen eine width oder eine height zuweist, hat dies keine Auswirkung. Es sei denn du setzt gleichzeitig display: inline-block;.
Sie reihen sich horizontal aneinander und brechen um, sobald zu wenig Platz im Viewport ist.
Beispiele für Inline-Elemente: a, span, b, em

Block-Elemente:

Ein Block-Element startet immer in einer neuen Zeile und nimmt die komplette Breite des parent Elements ein.
Block-Element werden vertikal übereinander gereiht.
Beispiele für Block-Elemente: div, h1 bis h6, p

Abstände

Die margin- und padding-Attribute können 4 Werte annehmen: margin: a b c d. Dabei stehen die Werte a bis d der Reihe nach für die Abstände top, right, bottom und left. Du kannst dir merken, dass der erste Wert sozusagen bei 12 Uhr startet, dann 3 Uhr, 6 Uhr und 9 Uhr.
Wird nur ein Wert hinter margin angegeben, so wird allen 4 Abständen dieser Wert zugewiesen. Beispiel: margin: 200px; erzeugt einen Abstand von 200 Pixel in alle 4 Richtungen.
Normalerweiße vergrößert padding das Element. Dies kannst du verhindern mit box-sizing: border-box;. Die Eigenschaft margin dagegen vergrößert das Element grundsätzlich nicht. margin kommt sozusagen immer draußen an das Element dran, lässt aber die Innengröße gleich.

Zeilenumbrüche

hyphens: auto trennt Worte bei Zeilenumbrüchen mit Bindestrich. Gleichzeitig muss break-word auf normal gesetzt sein, was der Standardfall ist.

Sass, SCSS und Less

Sass und Less sind CSS-Präprozessoren, die CSS unter anderem um folgende Funktionen erweitern:

Variablen
Verschachtelung
Mixins
Mathematische Funktionen

Sass ist ein Akronym und steht für Syntactically Awesome Stylesheets. Bei Sass wird auf Klammern und Semikolons verzichtet. Stattdessen wird einfach mit Einrückungen gearbeitet.

SCSS ist eine andere Syntax für Sass, bei der wiederum mit Klammern und Semikolons gecoded wird. SCSS hat also den Vorteil, dass man sich als CSS-Gewohnter nicht umgewöhnen muss.

In Sass werden Variablen mit einem $-Zeichen dargestellt. Less nutzt für Variable das @-Zeichen.

Ein gute Einführung in Sass findest du hier.

Weblinks

CSS: Best practices
campaignmonitor.com/css/ - Infos über den Einsatz von CSS in E-Mails
css-tricks.com/downloads/css-stuff - Slider, Tabs, Zoomer und vieles mehr in CSS
emailology.org - List of universally supported CSS & HTML in Email clients
universalwebservices.net - Modify CSS with JavaScript
Context dependant selectors in CSS
css3button.net - Button-Generator mit Hilfe von CSS3

Tipps & Tricks

Weiterführendes

HTML

Tools

HTMLPad - Intelligenter HTML-, CSS- und JavaScript-Editor

↑ Shorten the Length of the Border-Bottom With Pure CSS, abgerufen am 29.1.2021

[1] Shorten the Length of the Border-Bottom With Pure CSS, abgerufen am 29.1.2021

[1]