CSS – Cascading Style Sheets f√ľr eine moderne Gestaltung Ihrer Homepage



Cascading Style Sheets werden im moderen Webdesign zur Trennung von Inhalt und Design genutzt. Das hei√üt, im HTML-Code stehen die Inhalte und √ľber Stylesheet-Angaben werden die Gestaltung und Farben definiert.

Vorteile von CSS sind:

  • zentral definierbar (eine .css Datei bestimmt das Aussehen der gesamten Homepage, √Ąnderungen in dieser einen Datei ver√§ndern dann auch die Darstellung der gesamten Homepage)
  • schnellere Ladezeit, da die einzelnen HTML-Seiten schlanker werden und die zentrale .css Datei nur einmal geladen werden muss
  • CSS wird von allen Browsern in den Kernfunktionen unterst√ľtzt
  • Falls ein Browser eine CSS-Definition nicht kennt, wird diese einfach nicht angezeigt. Die Seite funktioniert trotzdem (sieht nat√ľrlich nicht so toll aus, aber die Funktionalit√§t bleibt erhalten)

Beispiel einer Formatierung mit CSS:

Mit CSS formatierter Text

<p style=“background-color:#0080FF; color:black; font-family:BankGothic Md BT; font-size:20pt; letter-spacing:5px; padding:10px; text-align:center“>Mit CSS formatierter Text</p>

Der fett gedruckte Teil sind die CSS-Angaben. Wie Sie sehen, sind die CSS-Angaben direkt im Tag <p> angegeben und werden mit dem abschließenden Tag </p> wieder beendet. Die CSS-Angaben wirken sich nur auf diesen Teil des Quelltextes aus.

Viel interessanter ist es aber, das komplette Design einer Webseite √ľber eine externe CSS-Datei zu steuern. So wird eine externe CSS-Datei eingebunden:

Im Kopf Ihrer HTML-Datei f√ľgen Sie einen Link auf eine .css Datei ein.

So sieht das aus (im Quelltext):

<head>
<meta http-equiv=“Content-Type“
content=“text/html; charset=iso-8859-1″>
<meta http-equiv=“keywords“
content=“css, cascading, style, sheets, Effekte, styling, desgin, der, homepage, internetseite, verbessern“>
<meta name=“author“ content=“Karl Oltmanns“>
<meta name=“description“
content=“CSS – cascading style sheets – mit css k√∂nnen Sie Ihre Homepage um interessante Effekte aufpeppen“>
<title>CSS – cascading style sheets</title>
<link rel=“stylesheet“ href=“design.css“ type=“text/css“>
</head>

Der fett gedruckte Teil ist der entscheidende Teil .css – hier wird auf Ihre Datei verwiesen.

Jetzt erstellen Sie im Editor von Windows eine passende .css-Datei, in unserem Beispiel die Datei design.css mit folgendem Inhalt:

body {font-family: Arial, Helvetica, sans-serif; background-color: #ffffff;}
a {color: #00008B; font-weight: bold;}
a:visited {color: #3366CC; font-weight: bold;}
a:active {color: #ff0000;}
a:hover {color: #ffffff; background-color: #00008B; font-weight: bold;}
#rahmen {border: solid #000000 1px; padding: 15px;}
#header {background-image: url(bg1.gif); padding-top: 5px; border: dotted #cccccc 1px; text-align: center;}
#navigation li {display: inline; padding: 10px;}


Achten Sie besonders auf die Datei-Endung .css! Die Datei design.css k√∂nnen Sie jetzt nach Ihren W√ľnschen √§ndern.

Am einfachsten können Sie mit dem CSS-Editor Topstyle .css-Dateien erstellen und bearbeiten. Hier bekommen Sie mehr Infos:

Es gibt eine ganze F√ľlle an Formatierungen von CSS. Am besten sind diese bei Selfhtml beschrieben:

  • wiki.selfhtml.org/wiki/CSS¬†– Selfhtml ist die Referenz zu HTML mit gro√üem CSS-Bereich, alle Formatierungsm√∂glichkeiten werden genau und ausf√ľhrlich beschrieben, erkl√§rt und es gibt auch Beispiele.

Außerdem gibt es jede Menge Tricks, Tipps und Experimente rund um CSS. Nachfolgend die interessantesten Webseiten zum Thema Cascading Style Sheets:


Fehler melden Sie haben einen Fehler auf meine-erste-homepage.com gefunden? Informieren Sie uns, damit wir den Fehler beheben können!

Neue Seite melden Sie haben ein neues Webmastertool f√ľr uns? Hier k√∂nnen Sie die f√ľr Webmaster n√ľtzliche Webseite bei uns anmelden!
Erstellt mit ❤ Liebe und WordPress