Benötigtes Vorwissen

Schüler-Autoren dieses Artikels sind Dana Rebecca Fendt, Luca Leon Meyer und Sven Cordes

Die Abkürzung CSS steht für „Cascading Style Sheets“
CSS ist eine Gestaltungs- und Formatierungssprache
„Cascading Style Sheets“ bedeutet übersetzt so viel wie „gestufte Gestaltungsbögen“
Kurz gesagt: CSS wird benutzt, um Webseiten bzw. HTML-Dokumente zu gestalten
Um das Design einer Webseite zu erstellen (zum Beispiel Schriftgröße, Schriftfarbe und andere Merkmale), benötigt man eine einheitliche Programmier-Sprache HTML und CSS sind die am häufigsten genutzten Sprachen um Webseiten zu gestalten
CSS wird von allen gängigen Browsern (z.B. Mozilla Firefox; Internet Explorer; …) unterstützt; es können lediglich Einschränkungen bei der Darstellung des Layouts geben
Aus diesem Grund ist es ratsam eine CSS-Webseite auf allen Browsern zu testen!
CSS ist übersichtig und trennt ein HTML-Dokument mit Inhalt und Gestaltung, wodurch das HTML-Dokument kürzer und auch übersichtiger wird

Das CSS-Dokument (mit der Dateiendung .css) muss mit dem HTML-Dokument (mit der Dateiendung .html) verbunden werden, damit man überhaupt etwas ausgegeben bekommt
Die Verbindung kann man auf mehrere Arten programmieren

Es gibt vier Varianten die CSS Inhalte einzubinden:

1 Einbindung eines Stylesheet über eine separate Datei.

HTML

<html>
<head>
<title></title>
<link rel='stylesheet' href='Stylesheet.css'>
</head>
<body>
<div class= 'h1'>
</div>
</body>
</html>

CSS [Stylesheet.css]

.h1 {

Background-color: blue;

}

2 Einbindung der CSS Anteile direkt in der HTML Datei

HTML

<html>
<head>
<title></title>
<style>
h1{background-color: Blue;
</style>
</head>
<body>
<div class= 'h1'>
</div>
</body>
</html>

3 Einbindung eines Stylesheets aus dem Internet.

<html>
<head>
<title></title>
<style>
@import url("style.css") screen;
</style>
</head>
<body>
<div class= “h1”>
</div>
</body>
</html>

4 Einbindung über Inline CSS: style-Attribut im HTML-Tag

<html>
<head>
<title></title>
</head>
<body>
<div style="border:1px solid #000000;">
</div>
</body>
</html>