home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

CSS - Cascading Style Sheets

CSS ist eine Sprache zum Formatieren von HTML-Elementen.CSS gilt heutzutage als die Standard-Stylesheetsprache für Webseiten. CSS erleichtert das Layouting von HTML-Seiten enorm. Früher musste mit HTML-Tabellen das Layout der Seite realisiert werden, wobei praktisch jeder Browser das Layout anders interpretierte. CSS verringert diese Problematik und bietet viele Zusatzfunktionen. Neben diversen Angaben zu Farben und Schriften bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen. CSS ist perfekt für alle die beim Webdesign kreativ sein wollen!

Wichtig: Trennung zwischen Struktur/Inhalt und Layout.

HTML ist dabei für die Struktur und den Inhalt verantwortlich: Entwickler

CSS ist für das Layout und das Design verantwortlich: Web-Designer

Um zu erfahren was mit CSS möglich ist, ist es sinnvoll sich ein Beispiel anzusehen:

Zen Garden

Diese Seite kann mit Hilfe von CSS unterschiedlich gestaltet werden. Hierbei sind zwei identische Seiten mit identischem HTML-Code,aber unterschiedlichen Layout.Es gibt verschiedene Möglichkeiten CSS in einer HTML-Seite zu verwenden, wobei man der Trennung halber, eigentlich immer eine externe Datei erstellen sollte. Dennoch kann es manchmal auch sinnvoll sein, die zweite Variante zu nutzen:

Eine externe CSS-Datei erstellen und diese im <head>-Bereich einbinden:

<html>

<head>

<link rel="stylesheet" type="text/css" href="dateiname.css">
</head> 
<body> 
</body> 
</html>

 

 

Diese Anweisungen gelten für das gesamte HTML-Dokument.

CSS-Anweisung direkt in den <head>-Bereich der HTML-Seite schreiben:

<html> 

<head>

<style type="text/css">
<!--Stylesheet Angaben//-->
</style>
</head>
<body>
</body>
</html>

 

 

Diese Anweisungen gelten für das gesamte HTML-Dokument.

Einen Bereich oder ein HTML-Element mit CSS-Definitionen versehen:

Dies ist <span style="color:#ff0000; font-weight:bold;">
irgendein Text</span> und der soll formatiert werden.

Format der CSS-Anweisung in einem Element:

style="CSS-Anweisung;CSS-Anweisung;"

 

Diese Anweisungen gelten jeweils nur für das Element in dem die CSS-Anweisung zu finden ist.

Beispiele & Links