Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 06. Juni 2019

CSS für Anfänger – Stylesheet erstellen

Mit einem Stylesheet trennst Du CSS und HTML, ohne die logische Verbindung zu verlieren. Die Vorteile: weniger Schreibaufwand, mehr Übersichtlichkeit und schnellere Ladezeiten.

Hinweis: Lege vorbereitend für alles, was jetzt kommt, eine neue leere Text-Datei an und speichere diese als „stylesheet.css“ im gleichen Verzeichnis ab, in dem Deine HTML-Datei liegt.

HTML und CSS verbinden

In Teil 1 dieser Beitragsserie hast Du CSS in das style-Attribut innerhalb eines HTML-Tags geschrieben. Dadurch war die Verbindung von CSS und HTML klar: „diese CSS-Anweisung gilt für diesen HTML-Tag“.

Das wird aber spätestens dann unbequem, wenn Du die gleiche Anweisung mehr als einmal benötigst. Betrachte dieses Beispiel:

<html>

<body>

<h1 style=“font-family: Arial; font-size: 30px; color: red;“>Überschrift</h1>

<p style=“font-family: Arial; font-size: 16px; color: black;“>Erster Absatz</p>

<h2 style=“font-family: Arial; font-size: 24px; color: orange;“>Zweite Überschrift</h2>

<p style=“font-family: Arial; font-size: 16px; color: black;“>Zweiter Absatz</p>

</body>

</html>

Wiederholungen vermeiden

Dieser Code enthält sehr viele überflüssige Wiederholungen; ausserdem ist er sehr unübersichtlich geworden. Der Code für die beiden Überschriften hat die gleiche „font-family“-Einstellung und der CSS-Code für beide <p>-Tags ist vollkommen identisch. Diese Erkenntnis lässt sich genauso in CSS formulieren mit sogenannten CSS-Regeln.

Eine CSS-Regel sieht immer so aus:

Selektor { Eigenschaft : Wert ; }

Ein Selektor wählt HTML-Elemente aus, für die die nachfolgenden Eigenschaften gelten sollen. Die einfachste Form von Selektoren ist der Name des HTML-Tags, in diesem Fall zum Beispiel „p“, „h1“ und „h2“.

Der Teil innerhalb der geschweiften Klammern ist exakt das, was Du bisher in das style-Attribut geschrieben hast. Du kannst einfach alles innerhalb der Anführungszeichen hinter style= kopieren und in die geschweiften Klammern einfügen.

Du kannst die CSS-Regel für die beiden <p>-Tags nun in die leere „stylesheet.css“-Datei einfügen:

p { font-family: Arial; font-size: 16px; color: black; }

Diese CSS-Regel sagt, dass für alle <p>-Tags die Eigenschaften in den Klammern gelten.

Du hast später Vorteile, wenn Du es etwas ordentlicher formatierst:

p {

  font-family: Arial;

  font-size: 16px;

  color: black;

}

Dem Browser ist es recht egal, ob Du CSS für Menschen gut lesbar schreibst oder nicht. Für spätere Änderungen oder eine Fehlersuche ist es jedoch besser, ein wenig auf die Form zu achten.

HTML aufräumen

Jetzt brauchst Du das CSS in den style-Attributen für die <p>-Tags nicht mehr. Wenn Du die gleichen Schritte für die beiden Überschriften wiederholst, sieht der HTML-Code nun wieder ganz sauber aus:

<html>

<body>

<h1>Überschrift</h1>

<p>Erster Absatz</p>

<h2>Zweite Überschrift</h2>

<p>Zweiter Absatz</p>

</body>

</html>

Die „stylesheet.css“-Datei enthält diesen Code:

p {

  font-family: Arial;

  font-size: 16px;

  color: black;

}

 

h1 {

   font-family: Arial;

   font-size: 30px;

   color: red;

}

 

h2 {

   font-family: Arial;

   font-size: 24px;

   color: orange;

}

Externes Stylesheet laden

Damit das überhaupt funktioniert und alles wieder so aussieht wie vorher, musst Du noch einen entscheidenden letzten Schritt durchführen: das Stylesheet muss geladen werden. Das passiert mit einem <link>-Tag (nicht zu verwechseln mit dem Anker <a>!).

<link> gehört in den Header des HTML-Dokuments, also zwischen <head> und </head>.

<html>

<head>

     <link rel=stylesheet href=stylesheet.css>

</head>

<body>

<h1>Überschrift</h1>

<p>Erster Absatz</p>

<h2>Zweite Überschrift</h2>

<p>Zweiter Absatz</p>

</body>

</html>

Neben der Ordnung gibt es einen weiteren großen Vorteil für diese Trennung von CSS und HTML: Du kannst weitere HTML-Seiten bauen und dort das gleiche Stylesheet laden. Da der Browser das erste Laden des Stylesheets bereits im Cache hat, sparst Du dabei sogar Ladezeit.

CSS-Selektoren sind der komplexeste Teil von CSS und gehen weit über das hinaus, was Du in diesem Tutorial gelesen hast. Wenn Du mehr wissen möchtest, empfehlen wir Dir den CSS-Bereich von SELFHTML:  https://wiki.selfhtml.org/wiki/CSS

Möchtest Du CSS für Deine eigene Website nutzen?

Zu den STRATO Hosting-Paketen

Sommer-Aktion bei STRATO

Unsere Sommer-Aktion bringt Dir alle zwei Wochen eine Welle mit einem neuen Angebot für das Paket Hosting-Basic. Aktuell bekommst Du das Paket vergünstigt mit einer zusätzlichen SSL Flat – bis zur nächsten Welle am 16.06.

Zur Sommer-Aktion
Tags: Code · Webdesign · Website

Der Autor:

Autor: Oliver Meiners

Hallo, ich bin Oliver und Online-Redakteur bei STRATO.

2 Kommentare

  1. Aren sagte am 10. Juni 2019 um 14:40:

    Vielen Dank für diesen schönen Artikel !

    Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen