HMTL Inhalte über Stylesheets steuern

Cascading Stylesheets wird auch kurz CSS genannt und ist eine sogenannte deklarative Sprache für Dokumente. Mit CSS kann man die Darstellung der HTML Inhalte steuern und regeln. Es können z. B. die Präsentationen, die Ausgabe, die Farben, die Abstände usw. formatiert werden.

 

CSS im HTML Element definieren

CSS kann auf unterschiedlichen Weisen in das HTML Dokument eingebunden werden. Die einfachste Weise ist, wenn man das CSS direkt in die HTML Elemente schreibt.

Beispiel:

Wir definieren für das HTML Element body, das Attribut style. Im style können wir dann festlegen, dass der Hintergrund z. B. rot sein soll.

<body style="background-color:red">
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</body>

Ergebnis im Browser:

css im HTML Element

Sie können im Attribut style beliebig viele Eigenschaften eintragen. Wir definieren z. B., dass der Hintergrund rot ist, aber die Schrift bzw. der Vordergrund weiß ist.

<body style="background-color:red; color: white;">

Ergebnis im Browser:

mehrere Style Attribute im HTML Element

Mehrere Eigenschaften des Style Attributs werden mit einem Semikolon getrennt. Auch am Ende jeder Eigenschaft muss ein Semikolon stehen.

Auf diese Weise können Sie die HTML Elemente formatieren. Allerdings ist die Lösung CSS im HTML Element zu definieren nicht so optimal, da es sehr kompliziert und unübersichtlich werden kann, wenn man z. B. allen H1 Überschriften einen Stil verpassen möchte. D. h., Sie müssen komplett alle H1 Überschriften einzeln bearbeiten. Das ist sehr mühselig.

Deshalb gibt es noch weitere Möglichkeiten CSS einzubinden.

 

CSS im Head Bereich einbinden

Sie können im HTML Dokument im Head Bereich mit dem Tag Style CSS im Seitenkopf einbinden.

<head>
<meta charset=utf-8" />
<title>Hier ist der Titel der Seite</title>
<style></style>
</head>

Zwischen dem Style Tag können Sie jetzt CSS schreiben, welches komplett auf die Website eingewendet wird.

Wir wollen z. B., dass alle H1 Überschriften gelb sind. Dann können wir Folgendes schreiben:

<head>
<meta charset=utf-8" />
<title>Hier ist der Titel der Seite</title>
<style>
h1 {
color: yellow;
}
</style>
</head>

Ergebnis im Browser

Bild

Alles was sich zwischen <style> </style> befindet, ist in der Sprache CSS codiert und hat eine eigene Syntax.

Der Selektor, der vor den geschweiften Klammern steht, definiert, welche Attribute adressiert und selektiert werden. D. h., dass Sie mit dem Selektor Stile für die gewünschten Elemente zuweisen können.

Zwischen den geschweiften Klammern { und } befindet sich der sogenannte Regelsatz. Hier können auch mehrere Anweisungen angegeben werden. Ein Regelsatz besteht aus mehreren Regeln. Ich empfehle Ihnen das Sie eine Regel jeweils in eine Zeile schreiben.

Beispiel

h1 {
color: yellow;
font-size: 19pt;
}

Diese Schreibweise ist übersichtlicher, wie, wenn man alle Regeln in eine Zeile schreibt.

Beispiel

h1 { color: yellow; font-size: 19pt; }

Sie können natürlich zwischen den Style Tag mehrere Selektoren mit mehreren Regelsätzen für CSS festlegen.

Beispiel

<style>
h1 {
color: yellow;
font-size: 19pt;
}

body {
background-color:red;
}
</style>

 

CSS auslagern

Eine weitere Möglichkeit um CSS einzubinden ist das Auslagern des CSS in eine separate Datei. Dazu müssen Sie sich eine neue Datei anlegen. Fügen Sie z. B. die folgende CSS Anweisung in das leere Dokument

h1 {
color: yellow;
font-size: 19pt;
}

body {
background-color:red;
}

Und speichern Sie die Datei z. B. unter style.css ab. Danach müssen Sie in Ihrem HTML Dokument die Datei einbinden. Das Einbinden der externen CSS Datei funktioniert über den Link Tag im Head Bereich.

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hier ist der Titel der Seite</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</body>
</html>

Damit bezieht sich das HTML auf diese CSS, das wir ausgelagert haben. Das HTML ist nun vom CSS getrennt.

 

Haben Sie Fragen oder Probleme beim CSS für gutes Webdesign? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.