Was ist überhaupt CSS?
Während man mit HTML definiert, um welches Element (Überschrift, Textabschnitt, Bild, etc.) es sich handelt, kann man mit Cascading Style Sheets das Aussehen einer Website bestimmen. Vereinfacht gesagt also die Seite „hübsch machen“. Denn ohne jegliches Styling würden nur die Standard-Einstellungen des Browsers greifen und diese sind nur sehr rudimentär.
Wie kann ich was stylen?
Prinzipiell hat man 4 Möglichkeiten für das Styling:
- HTML-Elemente
- Klassen
- IDs
- Inline-Style
die Möglichkeiten 2 bis 4 werden direkt am HTML-Element definiert und veranschauliche ich hier am Beispiel eines Absatzes (engl. paragraph).
1. HTML-Elemente
HTML
<p>Text</p>
CSS
p {
font-size: 20px;
}
Ich kann HTML-Elemente direkt stylen ohne sie genauer zu deklarieren was vor allem für grundlegendes Styling sehr hilfreich ist. Die Schriftgröße ist in diesem Fall für alle Absätze gültig und kann später (falls notwendig) mithilfe von Klassen, IDs oder per Inline-Style überschrieben werden.
2. Klassen
HTML
<p class="excerpt">Text</p>
CSS
.excerpt {
font-size: 20px;
}
Klassen werden mit einem Punkt davor angesprochen. Der Vorteil von Klassen: diese können mehrfach im HTML-Dokument vergeben werden, somit kann ich mit meinem Styling mehrere HTML-Elemente gleichzeitig ansprechen.
3. IDs
HTML
<p id="excerpt">Text</p>
CSS
#excerpt {
font-size: 20px;
}
IDs werden mit einem Hashtag davor im CSS angesprochen und dürfen nur einmal im HTML-Dokument vergeben werden, um Elemente eindeutig und unverwechselbar zu kennzeichnen. So kann ich mir sicher sein, dass mein Styling nur für dieses eine spezielle Element greift.
4. Inline-Style
HTML/CSS
<p style="font-size: 20px;">Text</p>
Inline Styles werden direkt in das HTML-Element geschrieben. Jedoch ist dies nur in sehr seltenen Fällen zu empfehlen, da Inline Styles eine höhere Spezifizität als Klassen oder IDs besitzen und können nur per !important überschrieben werden:
p {
font-size: 30px !important;
}
Wenn jedoch der Inline Style auch ein !important besitzt, gibt es keine Möglichkeit dieses Styling zu überschreiben, außer man löscht es aus dem HTML.
Wo schreibe ich das CSS hin?
Hier gibt es 3 Möglichkeiten, wovon eine schon genannt wurde:
- Inline Style
- In den Kopf-Bereich des HTML Dokuments
- Einbinden einer CSS-Datei
1. Inline Style
Wie schon erklärt wird hier das Styling direkt in das HTML-Element eingetragen.
2. In den Kopf-Bereich des HTML Dokuments
Hier wird das CSS in den Kopf-Bereich <head></head> des HTML-Dokuments geschrieben:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Titel der Seite</title>
<!-- Hier wird das Styling festgelegt -->
<style type="text/css">
#excerpt {
font-size: 20px;
}
</style>
</head>
<body>
<p id="excerpt">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</p>
</body>
</html>
Jedoch wächst der Umfang und die Anzahl der Zeilen meistens sehr schnell und würde somit meiner Meinung nach besser in einer seperaten Datei aufgehoben sein. Außerdem gibt es dann eine strikte Trennung zwischen dem Markup (HTML) und dem Styling (CSS).
3. Einbinden einer CSS-Datei
Hier meine empfohlene Methode zur Einbindung von CSS: eine seperate Datei. Das geht folgendermaßen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Titel der Seite</title>
<!-- Hier wird die CSS-Datei eingebunden -->
<link rel="stylesheet" href="/pfad/zur/datei.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</p>
</body>
</html>
Fazit
Ich hoffe, ich konnte euch das Thema näher bringen und falls ihr Fragen oder Anregungen habt, schreibt sie gerne in die Kommentare.
Headerbild von unsplash
