CSS Grundlagen

Veröffentlicht in: Programmieren, Webentwicklung

CSS (Cascading Style Sheets), wie eine Website zu ihrem Aussehen kommt.

Mithilfe von CSS (Cascading Style Sheets) gestalten Sie das Aussehen der einzelnen Komponenten eines HTML-Dokuments. So können Sie beispielsweise festlegen, welche Farbe die Überschriften oder der Dokumenten-Hintergrund haben sollen und welche Schriftart eingesetzt wird.

Grundsätzlich kann zwar CSS innerhalb eines HTML- Dokuments eingefügt werden, üblich ist es aber, eine separate Datei zu erstellen. Diese Formatierungsdateien haben die Dateiendung .css.

Sie werden über einen Link in das HTML-Dokument, konkret in den Header, eingebunden. Man findet unterschiedliche Schreibweisen:

<link rel="stylesheet" href="main.css">

<link rel="stylesheet" href="main.css">

oder

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

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

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

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

Bestandteile:

der Link-Tag: <link > oder <link />, der Schrägstrich vor der abschließenden spitzen Klammer ist optional.
das Attribut rel, zeigt die Relation zwischen dem Dokument und der eingebundenen Datei an.
das Attribut type ist hier optional, weil der Browser bereits aus der rel– Angabe stylesheet ableiten kann, dass es sich um „css/text“ handelt.
styles/styles.css gibt den Pfad zur Datei an: hier befindet sich die Datei styles.css im Ordner styles

Beispiel:

alle Überschriften der ersten Ebene: h1
mit der Textfarbe: color
Farbe: darkred

formatieren.

h1 {<br>  color: darkred;<br>}

h1 {<br>  color: darkred;<br>}

Dabei ist h1 ein sogenannter „Selektor“ mit dem Sie auswählen, welches Element im HTML- Dokument formatiert werden soll. Innerhalb der geschweiften Klammern steht, wie formatiert werden soll. Die Eigenschaft Textfarbe color, gefolgt von einem Doppelpunkt und der Wert darkred .

Das Dokument ohne eigene Formatierung, aber mit Standardformatierung:

Die Standardformatierung des Browsers, die auch als „Default Style“ oder „User Agent Style“ bezeichnet wird, wird angewendet, wenn keine spezifischen CSS-Anweisungen oder Browser-Erweiterungen den Inhalt formatieren. Dies ist insbesondere der Fall, wenn eine Webseite ohne explizite CSS-Regeln erstellt wurde oder wenn diese Regeln von den Browsereinstellungen überschrieben werden.

Die vollständigen Dateien:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/main.css">
    <title>Demo</title>
</head>
<body>
    <h1>Meine Überschrift</h1>
    <p>Ein Absatz</p>
</body>
</html>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/main.css">
    <title>Demo</title>
</head>
<body>
    <h1>Meine Überschrift</h1>
    <p>Ein Absatz</p>
</body>
</html>

Und die zugehörige CSS-Datei:

/* demo css file for index.html */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}

h1 {
    color:darkred;
}

/* demo css file for index.html */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}

h1 {
    color:darkred;
}

Erklärung:

body	ist der Selektor, mit dem der gesamte sichtbare Inhalt eines HTML-Dokuments, das im Browser angezeigt wird, für die Formatierung auswählt
font-family	bestimmt die Schriftart, sie kann eine oder mehrere Schriftarten oder Schriftfamilien als Werte erhalten, die in einer priorisierten Liste angegeben werden
font-size 1.5em	die Schrift im `body` ist 1,5 mal größer, als die Standard-Schriftgröße des Browsers
h1	der Selektor für die Überschrift der ersten Ebene, der Hauptüberschrift
color:darkred	setzt die Textfarbe für das Element auf dunkelrot