WebWissen: CSS – Cascading Style Sheets

Wenn du dich schon immer gefragt hast, was dieses CSS überhaupt ist und was der von dir will und ob man das essen kann, dann bist du hier genau richtig!

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:

  1. HTML-Elemente
  2. Klassen
  3. IDs
  4. 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:

  1. Inline Style
  2. In den Kopf-Bereich des HTML Dokuments
  3. 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

Alle Beiträge von Timo

Unsere meistgelesenen Beiträge

Zwei Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. Zwei Jahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.