Navigation überspringen

Einleitung

Benötigtes Vorwissen

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

Was ist CSS?

  • 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

Praxis:

  • 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

Stylesheet Einbindung

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>