W3C: "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents".
CSS gilt heute als die Standard-Design-Sprache für das Gestalten von Webseiten ( siehe z.B. W3C: CSS , Tips , de.Wikipedia: Layout , CSS , CSS Quick Reference für CSS-Propertys ) http://www.webmeister.at/Style/CSS/
Ein HTML5 - Quelltext - Grundgerüst mit einer externen CSS-Styles sieht etwa so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<title> HTML5- Grundgerüst mit extern-CSS </title>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<h1> Seiten-Überschrift </h1>
<p>
Sichtbarer Seiteninhalt ...
</p>
</body>
</html>
HTML-Tags haben ein ( voreingestelltes, browser-spezifische ) Aussehen. CSS wird für das grafische Seitendesign ( Farben, Textauszeichnungen, Abstände, usw. ) verwendet. Zum "Web Graphic Design" gehören CSS, Farben, Schrift, Fonts, ästetische Hervorhebungen, Umrahmungen, usw.
Wird für jede Seite die gleiche externen CSS-Style-Datei ( layout.css ) includiert, so erhalten alle Seiten ein einheitliches Corporate Design ( Corporate Identity ).
Hier ist eine kurze CSS-Einführung . Es gibt zahlreiche CSS-Properties, siehe z.B. Übersicht zu den CSS-Properties .
Die CSS-Syntax (Selectoren, Property, Value) hat den folgenden Aufbau: Selektor { Eigenschaft:Wert; }
Selector | | Property | | | Value | | | | | h1 { background: snow; } ————————————————— | | Declaration
Die CSS-Schreibweise (Selector, Property, Value) wird innerhalb des style-Tags definiert und in XHTM verwendet:
CSS-Definition{ ... } XHTML (Tag mit Attribut) | | #xyz {...} <tag id="xyz" ... .xyz {...} <tag class="xyz" ... tag {...} <tag ... >
Wo können Styles-Direktiven stehen?
Styles-Direktiven können Tag-intern und/oder Seiten-intern im HTML-Header und/oder in externen .css-Dateien stehen (includieren).
Sollen alle -Tag ein spezielles Ausshen erhalten, so kann in der Datei layout.css dann etwa stehen
p, .p { font: 15px "Times New Roman",Times, Serif; }
Soll ein Tag eingerückt werden, so kann z.B. die Klasse "dir" deklariert werden. In der Datei layout.css steht dann etwa
.dir { margin-left: 48px; }
Im htm-Quelltext der Seite steht dann etwa
<p class="dir"> Mein Text in einem p-Tag ... </p>
Alle h1-Tag und weitere Tags mit class="h1" sollen "gestylt" werden. In der Datei layout.css steht dann etwa
h1, .h1 {
color: #fff;
background: #191999;
font: normal 22px/28px "Zapf Dingbats",Tahoma,sans-serif;
margin: 4px 64px 12px 64px;
padding: 4px 0px 8px 4px;
border-radius: 14px;
border: 1px solid #888;
text-shadow: 1px 1px 0px #aad,
1px 2px 0px #88a,
2px 3px 0px #777;
box-shadow: 4px 4px 4px #666;
}
Durch
<p class="border"> Mein Text in einer gerundete Box ... </p>
wird der Text in einer gerundeten Box angezeigt, wenn in der Datei layout.css etwa steht
.border {
margin-bottom: 12px;
margin-right: 12px;
padding: 12px 12px;
border: 1px solid #aaa !important;
border-radius: 6px;
box-shadow: 2px 3px 6px #ccd,
-2px -3px 6px #bbb,
inset 2px -2px 12px rgba(240,240,240,0.95);
}
Im Internet werden bei HTML-Seiten die folgenden Typografie-Maße verwendet:
| Art | Einheit | Typografische Maßeinheit |
|---|---|---|
| numerische absolut | pt | Point: 1 Punkt entspricht 1/72 Inches |
| pc | 1 Pica entspricht 12 Punkten | |
| in | 1 Inch entspricht 2.54 Zentimetern | |
| mm | Millimeter | |
| cm | Zentimeter | |
| numerische relativ | em | Die Maßeinheit verhält sich relativ zur Höhe des Schriftgrades des übergeordneten Elements |
| ex | Die Maßeinheit verhält sich relativ
zur Höhe des kleingeschriebenen Buchstabens x im Schriftgrad des übergeordneten Elements
| |
| px | Pixel. Relativ von Ausgabegerät zu Ausgabegerät, absolut an ein und demselben Ausgabegerät | |
| % | Prozent: Die Maßeinheit ist relativ zum übergeordneten Element in Prozent | |
| Farbe | #rrggbb | Hexadezimale RGB-Angabe wie bei HTML |
| #rgb | Hexadezimale RGB-Angabe - Kurzschreibweise | |
| Farbnamen | wie bei HTML | |
| rgb(R,G,B) | RGB-Werte dezimal (0-255,0-255,0-255) | |
| rgb(%,%,%) | RGB-Anteile prozentual (0-100%,0-100%,0-100%) |
Für Schrift gibt es zahlreiche CSS-Attribute. Ein Überblick gibt der CSS - Simulator für Schrift.
Bei der Anzeige ignorieren die Browser CSS-Fehler.
Wie können CSS - Fehler gefunden werden? Jeder Browser hat eine Fehler-Console, der diese Fehler anzeigt.
Zur formalen Überprüfung von CSS-Quellcode kann der CSS-Validator verwendet werden.