CSS - Einführung

Leon A. -

Was ist CSS?

CSS steht für Cascading Style Sheets. Es ist eine Stylesheet-Sprache, die verwendet wird, um die Darstellung eines in einer Auszeichnungssprache wie HTML oder XML geschriebenen Dokuments zu beschreiben. Mit CSS können Sie Webseiten gestalten und layouten, indem Sie festlegen, wie Elemente auf dem Bildschirm, auf Papier oder in anderen Medien dargestellt werden sollen.

CSS arbeitet mit HTML zusammen. Während HTML für die Struktur und den Inhalt einer Webseite zuständig ist, konzentriert sich CSS auf die visuelle Darstellung und das Layout. Es ermöglicht Ihnen, verschiedene Aspekte des Erscheinungsbildes der Webseite zu steuern, wie Farben, Schriftarten, Abstände und Positionierung.

Mit CSS können Sie Stile auf bestimmte HTML-Elemente oder Gruppen von Elementen anwenden.

Beispiel: CSS-Stile für HTML-Elemente

h1 {
    font-family: Arial;
    font-size: 24px;
    color: blue;
}

div {
    background-color: lightgray;
    padding: 10px;
}

Durch die Verwendung von CSS:

  • Können Sie die Präsentationslogik vom strukturellen Inhalt Ihrer Webseiten trennen.
  • Diese Trennung verbessert die Wartbarkeit und Wiederverwendbarkeit.
  • Sie können Stile in einer externen CSS-Datei definieren und sie mit mehreren HTML-Seiten verknüpfen.

Beispiel: Verknüpfung einer externen CSS-Datei

<link rel="stylesheet" type="text/css" href="styles.css">

CSS ermöglicht es Ihnen auch, responsive Designs zu erstellen, die sich an verschiedene Bildschirmgrößen und Geräte anpassen.

Beispiel: CSS-Medienabfragen

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Insgesamt ist CSS ein wichtiges Werkzeug für Webentwickler und Designer. Es gibt Ihnen die Kontrolle darüber, wie Ihre Webseiten auf verschiedenen Geräten und Bildschirmen aussehen.

Warum CSS verwenden?

CSS ist ein Werkzeug für die Webentwicklung. Es gibt mehrere Gründe, warum Sie CSS in Ihren Webprojekten einsetzen sollten:

CSS trennt die Darstellung einer Webseite von ihrer Struktur und ihrem Inhalt. Das bedeutet, dass Sie die visuellen Stile Ihrer Webseite getrennt vom HTML-Markup definieren können. Indem Sie die Präsentationslogik in einer separaten CSS-Datei halten, wird Ihr HTML-Code übersichtlicher und konzentriert sich mehr auf die Struktur und den Inhalt der Seite. Diese Trennung erleichtert zukünftige Aktualisierungen Ihres Codes.

Die Verwendung von CSS gibt Ihnen mehr Kontrolle über das Aussehen Ihrer Webseiten. Mit CSS können Sie verschiedene visuelle Eigenschaften für HTML-Elemente festlegen, wie Farben, Schriftarten, Abstände, Ränder und Hintergründe. Sie können unterschiedliche Stile auf bestimmte Elemente oder Gruppen von Elementen anwenden und so eine feinkörnige Kontrolle über das Aussehen Ihrer Webseite erhalten.

CSS reduziert die Komplexität und Wiederholung im strukturellen Inhalt Ihrer Webseiten. Ohne CSS müssten Sie die gleichen Stile für jedes HTML-Element separat anwenden, was zu vielen Wiederholungen und aufgeblähtem Code führen kann. Mit CSS können Sie Stile einmal definieren und sie mit Hilfe von Selektoren auf mehrere Elemente anwenden. Dies reduziert Code-Duplikationen und macht Ihr HTML übersichtlicher.

Eine leistungsstarke Funktion von CSS ist die gemeinsame Nutzung von Formatierungen über mehrere Webseiten hinweg. Indem Sie Stile in einer externen CSS-Datei definieren, können Sie diese Datei mit mehreren HTML-Seiten verknüpfen. Das bedeutet, dass Sie globale Änderungen vornehmen können, indem Sie eine einzige CSS-Datei modifizieren, anstatt die Stile jeder einzelnen Seite zu aktualisieren.

Wie funktioniert CSS?

CSS funktioniert, indem es HTML-Elementen auf einer Webseite Stile zuweist. Die Stile werden mithilfe von CSS-Regeln definiert, die aus Selektoren und Deklarationsblöcken bestehen.

CSS-Regeln können in einer separaten Datei mit der Erweiterung .css definiert oder mithilfe des <style>-Tags direkt in das HTML-Dokument eingebettet werden. Bei Verwendung einer externen CSS-Datei muss diese über den <link>-Tag im <head>-Bereich mit dem HTML-Dokument verknüpft werden.

Verknüpfen einer externen CSS-Datei

Beispiel: Verknüpfen einer externen CSS-Datei

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Jede CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Selektor zeigt auf das HTML-Element oder die Elemente, die Sie stylen möchten. Es kann ein Element-Selektor (z.B. p für Absätze), ein Klassen-Selektor (z.B. .highlight für Elemente mit der Klasse "highlight") oder ein ID-Selektor (z.B. #header für das Element mit der ID "header") sein.

CSS-Regel-Syntax

Beispiel: CSS-Regel-Syntax

selector {
    property1: value1;
    property2: value2;
}

Der Deklarationsblock wird in geschweifte Klammern {} eingeschlossen und enthält eine oder mehrere Deklarationen. Jede Deklaration gibt eine CSS-Eigenschaft und den dazugehörigen Wert an, getrennt durch einen Doppelpunkt :. Mehrere Deklarationen innerhalb eines Blocks werden durch Semikolons ; getrennt.

CSS-Deklarationsblock

Beispiel: CSS-Deklarationsblock

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Wenn ein Webbrowser eine Webseite lädt, liest er sowohl HTML- als auch CSS-Dateien. Der Browser wendet dann diese Regeln auf die entsprechenden HTML-Elemente gemäß den deklarierten Eigenschaften und Werten an. Dieser Vorgang wird als Rendering bezeichnet.

CSS ermöglicht auch Kaskadierung und Vererbung. Wenn mehrere Regeln auf ein Element zutreffen, hat die Regel mit der höheren Spezifität Vorrang. Einige Eigenschaften werden von Kindelementen von ihren übergeordneten Elementen geerbt.

Insgesamt definiert CSS Regeln, die auf HTML-Elemente abzielen und deren visuelle Eigenschaften festlegen, sodass Sie das Aussehen Ihrer Webseiten steuern können.