Inhalt
Was ist CSS?
Natürlich könnten wir jetzt darauf eingehen, wann und wer CSS entwickelt hat, wie es strukturiert ist und welchen historischen Hintergrund es hat. Aber wenn du das hier liest, möchtest du vermutlich eher wissen, wie CSS funktioniert und wie es dir weiterhilft. Und das werden wir dir hier erklären!
Das Akronym CSS steht für Cascading Style Sheets und heißt so viel wie kaskadierende, formgebende Seite. Und genau das tut es auch. Während HTML lediglich das Gerüst für eine Webseite darstellt, hat es relativ wenig Möglichkeiten auch eine ansprechende Optik zu realisieren. Und genau da kommt CSS ins Spiel.
Ein großer Vorteil von CSS ist, dass die Befehle hier von oben nach unten und nach Relevanz interpretiert werden. Daher heißt es auch kaskadierend. Wenn man CSS klug einsetzt, sollten Befehle so allgemeingültig wie möglich eingesetzt werden. Beispiele dafür zeigen wir später.
CSS „programmieren“
Tu dir bitte selbst den Gefallen und sage nie, dass du CSS programmieren kannst. Es ist genauso wenig eine Programmiersprache wie HTML. Beides sind sogenannte Stylesheet-Sprache. Früher wurde sie mit Auszeichnungssprachen in einen Topf geworfen, das ist aber nicht richtig. HTML ist zum Beispiel eine Auszeichnungssprache, weil sie zwar kein Programm baut, aber von Programmen wie Browsern interpretiert werden kann. Daher kann HTML auch alleine stehen. CSS aber kann das nicht. Es kann nur mit HTML, XML oder einer anderen kombiniert werden.
XML und CSS
Neben dem allgemein bekannten Anwendungsfall HTML + CSS, kann man das Stylesheet auch für eine andere Auszeichnungssprache verwenden. Und zwar XML. Auch diese wird von Browsern, aber auch von anderen Programmen interpretiert. Ich möchte jetzt nicht zu sehr auf XML abschweifen, aber wer CSS lernt, kann in Kombination mit XML sogar Grafiken schreiben. Und das ganz ohne Grafikprogramm. Beispielsweise das Format SVG. Diese Vektorgrafiken werden heute primär für Icons und andere einfache Grafiken verwendet.
In diesem Tutorial gehen wir aber natürlich erst einmal nur auf die Verwendung mit HTML-Webseiten ein.
Webdesign-Trends 2023: Die Top 5 Trends, die das Webdesign dominierenDas Jahr 2023 ist in vollem Gange und bringt eine Fülle von Innovationen und Fortschritten im Bereich des...In Design
CSS in die eigene Webseite einbinden
Wir setzen jetzt einmal voraus, dass wir bereits eine HTML-Seite haben, die wir mit CSS stylen möchten. Dafür haben wir drei verschiedene Möglichkeiten. Einerseits können wir entweder direkt im HTML-Code CSS anwenden, CSS direkt im Kopf der HTML-Datei anlegen oder eine eigene Datei erstellen und diese mit HTML verlinken. Meistens wird nur die letzte Variante verwendet, aber wir stellen dir alle drei Möglichkeiten vor.
CSS direkt im HTML-Code
Gestaltungsbefehle direkt im jeweiligen HTML-Tag einzusetzen ist die seltenste Form mit Stylesheets umzugehen. Das liegt daran, dass die CSS-Anweisungen nur für diesen einen Tag gelten, in denen sie eingebunden sind. Das widerspricht natürlich dem Anspruch der allgemeingültigen Regeln des CSS. Daher wird der Inline-Style nur in Ausnahmen verwendet, wenn wirklich nur dieses eine Element anders aussehen soll als der Rest. Üblicherweise arbeitet man aber auch dann eher mit eindeutigen IDs anstatt mit Inline-Styles. Manchmal geht es aber auch einfach nicht anders. Wenn aber möglich, meidet man diese Option.
Stellen wir uns einmal folgenden HTML-Tag vor:
<p>Hierbei handelt es sich um einen einfachen Absatz.</p>
Wie wir wissen, steht der HTML-Tag <p> für „paragraph“ also Absatz. Der hat zwar kein Styling, wird aber von den meisten Browsern einen kleinen Abstand oben und unten bekommen. Wir möchten jetzt beispielsweise die Schriftfarbe und -größe dieses Absatzes mit CSS verändern. Das machen wir mit dem style-Tag:
<p style=““>Hierbei handelt es sich um einen einfachen Absatz.</p>
So sieht der style-Tag ohne jeden Befehl aus. Wir fügen jetzt die CSS-Befehle für die Farbe und Größe hinzu:
<p style=“font-size: 1.2 em; color: #C0C0C0;“>Hierbei handelt es sich um einen einfachen Absatz.</p>
Mit „font-size“ haben wir die Größe der Schrift auf 1.2 em (Größeneinheit eines Gevierts) und mit „color“ die Schrift auf den Hexidezimalwert # C0C0C0 (Mittelgrau) gesetzt.
Und das ist auch schon alles. Wichtig ist nur, dass wir nach jeder Eigenschaft wie „color“ einen Doppelpunkt setzen, danach den Wert und dann ein Semikolon. Das Semikolon auch beim letzten CSS-Befehl.
Am Anfang der HTML-Seite einbinden
Da wir aber natürlich den Anspruch haben CSS-Befehle so allgemeingültig wie möglich zu schreiben, können wir die Befehle sammeln und einfach am Anfang der HTML-Seite einbinden. Der Vorteil ist, dass die CSS-Befehle dem Browser gleich zu Anfang übergeben werden und sie schnell geladen sind. Der große Nachteil aber ist, dass die Befehle immer nur für die Seite gelten, in der sie auch eingebunden sind. Das kann aber auch nützlich sein, wenn wir bestimmte CSS-Befehle gar nicht überall benötigen, dann müssen wir sie ja nicht immer mit laden und binden sie nur dort ein, wo sie auch wirklich vorkommen.
Nehmen wir uns mal folgenden HTML-Code als Beispiel:
<html>
<head>
</head>
<body>
<h1>Die titelgebende Überschrift</h1>
<p>Der erste Absatz.</p>
<p>Der zweite Absatz.</p>
</body>
</html>
Der CSS-Teil wird nun in den Head-Abschnitt des HTML-Dokuments eingesetzt.
<html>
<head>
</head>
<body>
<h1>Die titelgebende Überschrift</h1>
<p>Der erste Absatz.</p>
<p>Der zweite Absatz.</p>
</body>
</html>
Dieses Mal mussten wir neben den beiden CSS-Befehlen noch einen sogenannten Selektor „p“ hinzufügen. Der weist den Browser an, dass alle <p>-Tags diese Eigenschaften bekommen sollen. Somit gelten diese Eigenschaften für beide Absätze, in unserem HTML-Dokument.
Externe CSS-Datei verwenden
Jetzt kommen wir zum gängigsten Weg CSS-Befehle in eine HTML-Datei einzubinden. Das funktioniert mithilfe einer oder mehrere externen Dateien. Der offensichtliche Vorteil hierbei ist, dass wir nur eine CSS-Datei benötigen, die dann für alle Seiten gleich gilt, in der sie verlinkt wurden. Änderungen müssen dann nur noch in dieser CSS-Datei vorgenommen werden. Der Nachteil ist, dass wir dadurch auch Befehle laden, die eventuell gar nicht gebraucht werden. Deshalb unterteilt man die Befehle je nach Seitenfunktion und lädt dann eben nur die Dateien, die vorkommen sollen.
Grundsätzlich ändert sich nichts an der Syntax im vorherigen Beispiel mit dem Head-Bereich. Wir lagern lediglich das CSS in eine eigene Datei aus:
p {
font-size: 1.2 em;
color: #C0C0C0;
}
Mehr als das braucht eine CSS-Datei eigentlich nicht, um zu funktionieren. Es bedarf keiner Einleitung oder Definition der Datei. Wir speichern die Datei aber mit der Endung .css. Der Name der Datei sollte websicher sein. Üblicherweise heißt sie main.css oder entsprechend der Funktion, die sie beinhaltet. Für CSS-Befehle für Formulare beispielsweise dann form.css.
Die HTML-Seite bekommt an der Stelle des CSS nun einen Verweis auf die CSS-Datei:
<html>
<head>
</head>
<body>
<h1>Die titelgebende Überschrift</h1>
<p>Der erste Absatz.</p>
<p>Der zweite Absatz.</p>
</body>
</html>
Das war es im Grunde schon. Mit dem link-Tag wird dem HTML-Dokument gesagt wo die CSS-Datei zu finden ist. Wenn die Datei im selben Ordner liegt wie die HTML-Datei, reicht der Name der CSS-Datei. Liegt sie woanders, muss im href-Parameter der relative Pfad angegeben werden. Also so was wie „css/main.css“ wenn die Datei im Unterordner „css“ liegt.
Es ist vorteilhaft die CSS-Dateien nach Funktion aufzuteilen. Dann müssen, je nachdem welche in der jeweiligen Seite gebraucht werden, auch entsprechend diese verlinkt werden. Das kann man problemlos mit mehreren link-Tags tun. Es können so viele verwendet werden, wie eben CSS-Dateien eingebunden werden sollen.
Von Selektoren, Klassen und IDs
Jetzt möchten wir uns aber mit der eigentlichen CSS-Syntax auseinandersetzen. Die ist an sich nicht kompliziert und das Wesentliche haben wir ja bereits kennen gelernt. Die eigentliche Macht von CSS liegt in den Selektoren. Davon gibt es nämlich eine ganze Reihe und viele erlauben Vererbung, können zählen und sogar einfache Kalkulationen sind möglich. Aber zunächst gehen wir auf die Grundlagen der Selektoren ein.
Selektoren sind Muster, die bestimmen, welche HTML-Elemente für bestimmte CSS-Befehle ausgewählt werden. Klingt jetzt komplizierter als es ist. Wir haben in unserem Beispiel bereits „p“ als Selektor verwendet und damit alle <p>-Tags im HTML-Dokument ausgewählt. Herzlichen Glückwunsch! Du hast bereits Selektoren benutzt. Neben der Auswahl von HTML-Tags können wir aber auch Klassen und IDs verwenden. Denn vielleicht möchten wir ja gar nicht alle Paragrafen auswählen.
Klassen
Stellen wir uns vor, wir wollen nicht alle Absätze mit grauem Text versehen, sondern nur bestimmte. Dann müssen wir im HTML-Dokument allen Absätzen, die wir mit dem CSS-Befehl ansprechen wollen, eine sogenannte Klasse zuordnen. Schauen wir uns noch mal den HTML-Tag an:
<p>Der erste Absatz.</p>
<p>Der zweite Absatz.</p>
Jetzt wollen wir nur dem zweiten Absatz eine graue Schriftfarbe vergeben. Dafür setzen wir eine Klasse:
<p>Der erste Absatz.</p>
<p class=“gray-font“>Der zweite Absatz.</p>
Wir können uns den Namen der Klasse aussuchen, es muss aber immer ein verbundener Begriff sein. In diesem Fall habe ich mich einfachheitshalber für „gray-font“ entschieden. Es gibt bei der Benennung von Klassen und IDs auch Konventionen, aber darauf kommen wir später.
Jetzt können wir in der CSS-Datei eine Klasse schreiben:
.gray-font {
color: #C0C0C0;
}
Statt dem allgemeinen „p“ haben wir den vorher gewählten Klassennamen verwendet. Wichtig ist, dass du vor dem Namen einen Punkt setzt. Damit wird eine Klasse definiert. Den Punkt brauchst du nur in bei den CSS-Befehlen, nicht im HTML-Tag.
Damit haben wir definiert, dass alle Elemente, die diese Klasse haben, eine graue Schrift bekommen. Und weißt du was noch großartig ist? Das gilt nicht nur für Absätze. Alle Elemente mit dieser Klasse, können somit eine graue Schrift bekommen. Zum Beispiel könntest du der Überschrift ebenfalls die Klasse geben.
IDs
Ähnlich verhält es sich auch mit IDs. Sie werden aber im HTML-Tag nicht mit „class“ eingeleitet, sondern mit „id“:
<p id=“gray-font“>Der zweite Absatz.</p>
Und wenn du nun diese ID mit CSS ansprechen möchtest, leitest du es eben nicht mit einem Punkt, sondern mit einer Raute ein:
#gray-font {
color: #C0C0C0;
}
Aber wofür braucht man IDs, wenn es doch schon Klassen gibt? Das ist eine sehr gute Frage! IDs bekommen automatisch eine höhere Priorität als eine Klasse. Wenn ein HTML-Tag sowohl eine ID und eine Klasse hat, was nicht selten passiert, dann bekommt der Befehl der ID immer den Vorrang. Das liegt daran, dass man eventuell mal einer Reihe von Klassen widersprechen möchte. Stell dir vor, du hast mehrere Absätze. Und alle sollen die Schriftfarbe Grau und Schriftgröße 12 px haben.
Jetzt hast du den Absätzen die Klasse „gray-font“ gegeben. Nun soll aber ein einziger Absatz eine rote Schriftfarbe bekommen, die Schriftgröße und andere CSS-Befehle der Klasse behalten. Dann kannst du dem einen Absatz eine ID geben, die nur dieser Absatz hat. Und so überschreibst du nur die Eigenschaft der Schriftfarbe.
Du kannst IDs aber auch vergeben, ohne einen Konflikt zu verhindern zu wollen. IDs sind immer dann sinnvoll, wenn ein bestimmtes Element einzigartig auf der Webseite ist. Beispielsweise Felder in einem Formular. Felder im Formular gibt es viele. Dafür verwendest du Klassen. Aber es gibt vermutlich nur ein einziges Feld für den Vornamen. Da würdest du die ID setzen.
Konventionen, die man kennen sollte
Ich habe ja bereits darauf hingewiesen, dass es bei den Namen von Klassen und IDs bestimmte Konventionen gibt. Da CSS-Dateien sehr groß und unübersichtlich werden können, ist es mittlerweile Standard geworden, Selektoren bestimmte Namen zu geben, um sie im Quellcode leichter ausfindig zu machen. Die bekannteste Konvention ist BEM.
BEM steht hier für Blocks, Elements and Modifiers. Es ist Name und Gedächtnisstütze zugleich. Denn genau das soll die Reihenfolge sein, nach der man seine Selektoren benennt.
Blöcke sind also grobe Teile einer Webseite. Wenn wir uns eine Webseite in Sektionen vorstellen, handelt es sich dabei um Blöcke. Bleiben wir bei dem Beispiel bei einem Formular. Hier ist also das Formular auf einer Webseite der Block.
Beispiele für Blöcke: Header, Container, Menu, Input, Form, etc.
Jetzt bestehen diese Blöcke aus einzelnen Elementen. Bei einem Formular sind es beispielsweise die einzelnen Felder und auch der Absende-Button. Bei einem Menu sind es die Menupunkte, beim Header das Logo, etc.
Beispiele für Elemente: menu item, form field, header logo, etc.
Abschließend haben wir den Modifier. Er beschreibt die Eigenschaft oder Zustand des jeweiligen Elements. Bei einem Formularfeld kann es beispielsweise die Größe, die Tatsache sein, dass das Feld deaktiviert ist oder ob es ausgefüllt wurde. Bei einem Menuelement kann wird es oft die Position sein oder ob es der gerade aktive Menupunkt ist.
Beispiele für Modifier: disabled, color gray, checked, etc.
Die Syntax für diese Konvention sieht vor, dass die einzelnen Elemente getrennt werden. Meistens durch einen doppelten Unterstrich oder doppelten Bindestrich. Ein Beispiel wäre also wie folgt:
.form__field—disabled
Diese Klasse wäre also logischerweise für alle Formularfelder zuständig, die deaktiviert sind und gibt ihnen die Befehle, wie sie auszusehen haben.
Eine ausführliche Anleitung für die BEM-Konvention gibt es auf folgender Seite: http://getbem.com/naming/
Wichtigste CSS-Befehle
Jetzt wo wir die Grundlagen abgedeckt haben, brauchen wir natürlich noch ein paar CSS-Eigenschaften. Hier ist eine Tabelle der gängigsten Eigenschaften, die man auch routiniert einsetzen können sollte.
| Eigenschaften | Beschreibung |
|---|---|
| color | Schriftfarbe |
| background-color | Hintergrundfarbe eines Elements |
| background-image | Hintergrundbild eines Elements |
| display | Darstellungsverhalten |
| width | Breite des Elements |
| height | Höhe des Elements |
| min-width | Mindestbreite |
| min-height | Mindesthöhe |
| max-width | Maximale Breite |
| max-height | Maximale Höhe |
| margin | Abstand zu äußeren Elementen |
| padding | Abstand zu inneren Elementen |
| border | Rahmeneigenschaften |
| border-color | Farbe des Rahmens |
| border-width | Dicke des Rahmens |
| border-style | Stil des Rahmens |
| border-radius | Rundung der Ecken |
| font | Eigenschaften der Schrift |
| font-family | Schrifttyp |
| font-style | Stil der Schrift |
| font-weight | Dicke der Schrift |
| position | Position des Elements relativ zu anderen |
| z-index | Reihenfolge der Elemente, im Vorder- oder Hintergrund |
Natürlich gibt es noch ausführliche CSS-Referenzen in die man immer mal wieder schauen sollte. Dort ist auch erklärt, welche Werte eingesetzt werden können und wie die Eigenschaften sich einsetzen lassen: https://www.w3schools.com/cssref/
