Während (X)HTML eine Auszeichnungssprache ist und zur Strukturierung von Inhalten dient und im optimalen Fall nicht zur Gestaltung genutzt wird, dienen Cascading Style Sheets, im folgenden nur noch CSS abgekürzt, zur Gestaltung von Inhalten, vorzugsweise in HTML-Dokumenten.
Der derzeitige Standard ist CSS 2.1, auch wenn CSS3 immer weiter voranschreitet und in modernen Browsern auch Anwendung finden kann. Trotzdem ist CSS3 noch im Entwicklungsstadium und darum werden wir uns an der Stelle nur mit den Grundlagen von CSS 2.1 beschäftigen.
Für HTML5 und CSS3 wird es zu einem späteren Zeitpunkt eine eigene Artikelserie geben.
Sinn und Zweck von CSS
Wie Eingangs schon erwähnt, dient CSS zur Gestaltung von Dokumenten. Es können Schriftarten, Hintergrundfarben, Grafiken, Textfarben und vieles mehr manipuliert und gestaltet werden. Weiterhin werden mit CSS HTML-Container und damit Inhalte an die gewünschte Stelle positioniert.
Was früher aufwändig mit Tabellen realisiert wurde, geht heute auf einfache Weise mit CSS. Auch wenn das Tabellenlayout und die Gestaltung mit HTML-Tags fast ausgestorben ist, finden sich immer noch Einsteiger, die diese Form von Gestaltung nutzen.
Erschreckender Weise wird dieses teilweise sogar noch von Professoren und Dozenten an Hochschulen gelehrt, die ihren Schwerpunkt in der Programmierung haben und im Bereich Websiteerstellung mit HTML noch in den Anfängen des Internets hängengeblieben sind.
CSS in ein HTML Dokument einbinden
Um CSS einem Dokument zur Verfügung zu stellen, muss das Dokument Kenntnis von den Stylesheets haben. Dies lässt sich über verschiedene Methoden realisieren.
Intern in einem HTML-Tag per Style-Attribut:
|
1 |
<div style="font-style: verdana; padding: 5px;">Text in Verdana</div> |
Intern in einem HTML-Dokument per Style-Element:
|
1 2 3 4 5 6 |
<head> <title>HTML-Dokument mit CSS</title> <style type="text/css"> body { background-color: #000000;} </style> </head> |
Extern als eigene Stylesheet-Datei
|
1 |
<link rel="stylesheet" type="text/css" href="style.css" /> |
Zwar gibt es verschiedene Möglichkeiten CSS im Dokument einzubinden, es empfiehlt sich jedoch im Grundsatz immer das Einbinden als externe Datei zu verwenden. Der Vorteil ist, dass die Datei für verschiedene Dokumente zur Verfügung steht und damit Code nicht mehrmals geschrieben werden muss.
Aber auch bei größeren Websites ist es von Vorteil, wenn man eine zentrale Datei hat, um gezielt Änderungen an der Gestaltung vornehmen zu können ohne jedes Mal in den einzelnen Dateien nach entsprechenden Stylesheets zu suchen.
Das Schema von CSS-Regeln
Die Syntax von CSS folgt folgendem Muster:
|
1 2 3 4 |
selektor { attribut: wert; attribut: wert; } |
Mit dem Selektor wird festgelegt, welches Element in einem HTML-Dokument ausgewählt wird. Da das p-tag aus HTML schon bekannt, ist hier ein Beispiel anhand dieses Tags bzw. Selektors.
Beispiel:
|
1 2 3 |
P { Color: #357AE8; } |
Hier wird dem p-tag und damit den entsprechenden Inhalten mit dem Attribut Color und dem Hexadezimalen Wert #357AE8 die Schriftfarbe Blau zugeordnet.
Wichtige Selektoren in der Übersicht
Der Universalselektor
Mit dem Universalselektor, bestehend aus dem Asterix bzw. Sternchen * wird jedes Element im Dokument angesprochen.
Beispiel:
|
1 2 3 |
* { Color: #357AE8; } |
Hier wird dem kompletten Dokument die Schriftfarbe Blau zugeordnet.
Der Klassen-Selektor
Klassen dienen dazu verschiedene Elemente die gleiche Bezeichnung zuzuordnen. Es können also theoretisch unendlich viele p-tags mit der Klasse test versehen werden. Klassen-Selektoren werden im Dokument mit dem class-Attribut versehen.
Beispiel:
|
1 2 3 |
<h1 class="test">Das ist eine Überschrift ersten Grades</h1> <h1>Ich bin eine Überschrift ohne class-Attribut</h1> <h1 class="test">Ich bin noch eine Überschrift</h1> |
Um nun die beiden Überschriften mit dem Klassen-Selektor test anzusprechen verwenden wir folgende Syntax.
|
1 2 3 |
.test { color: #357AE8; } |
Der Punkt vor der Selektorbezeichnung test weist diese als Klasse aus und färbt nun die Schriftfarbe der ersten und dritten Überschrift ersten Grades Blau, während die mittlere Überschrift weiterhin in schwarzer Schriftfarbe erscheint.
Der ID-Selektor
Mit einer ID wird ein Element genau einmal mit einer Bezeichnung versehen. Das Element erhält also eine eindeutige Bezeichnung. ID-Selektoren werden, wie der Name schon darauf hinweist, mit dem id-Attribut versehen.
Beispiel:
|
1 |
<h1 id="einzigartig">Das ist eine Überschrift mit eindeutiger Zuordnung</h1> |
Um nun die beiden Textabsätze mit dem ID-Selektor test anzusprechen vewenden wir statt eines Punktes, wie beim Klassen-Selektor, einen Hash.
|
1 2 3 |
#einzigartig { color: #BB0000; } |
Der Hash bzw. die Raute ist für die Ausweisung als ID. Der Text der Überschrift wird nun mit einem dunklen Rot ausgestattet. Sollte die ID einzigartig doppelt oder dreifach in dem Dokument erscheinen, würde der HTML-Validator (den Du hoffentlich installiert hast) einen Fehler ausgeben.
Der Typ-Selektor
Mit dem Typ-Selektor werden für die verschiedenen HTML-Tags die Stylesheets festgelegt.
Beispiel:
|
1 2 3 |
<h1>Das ist eine einfache Überschrift ersten Grades</h1> <h1>Das ist eine weitere Überschrift ersten Grades</h1> <h1>Das ist eine dritte Überschrift ersten Grades</h1> |
|
1 2 3 |
H1 { color: #FF0000; } |
Nun werden alle drei Überschriften in einem hellen Rot erstrahlen.
Pseudoklassen
Um Hyperlinks zu gestalten gibt es eigene Klassen, die sogenannten Pseudoklassen. Bei diesen Klassen gilt es zu beachten, dass beim Gestalten die folgende Reihenfolge einzuhalten ist. Ansonsten verhält sich die Syntax wie aus den obigen Beispielen schon bekannt.
|
1 2 3 4 5 |
a:link = für Hyperlinks a:visited = Hyperlinks die besucht wurden a:focus = Hyperlinks die im Fokus sind a:hover = Hovereffekt von Hyperlinks a:active = für aktuell angeklickte Hyperlink |
CSS-Attribute in der Übersicht
Schrift formatieren
| Attribut | Beschreibung | Werte und Angaben |
|---|---|---|
| font-family | Schriftart | Arial | Verdana | Times New Roman | sans-serif | und weitere Schriftarten |
| font-size | Schriftgröße | Zahlenwert in px | em | pt | % |
| color | Schriftfarbe | Farbangaben in RGB | Hexadezimal | Farbnamen |
| font-variant | Kapitälchen | normal | small-caps |
| font-weight | Schriftgewicht | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| font-style | Schriftstil | normal | italic | oblique | inherit |
Textgestaltung
| Attribut | Beschreibung | Werte und Angaben |
|---|---|---|
| text-align | Textausrichtung | left, right, center, justify (Blocksatz) |
| line-height | Zeilenabstand (Durchschuß) | Zahlenwert in px | em | pt | % |
| text-decoration | Textgestaltung | underline, overline, line-through, blink |
| word-spacing | Wortabstand | Zahlenwert in px | em | pt | % |
| letter-spacing | Zeichenabstand | Zahlenwert in px | em | pt | % |
| text-indent | Texteinrückung | Zahlenwert in px | em | pt | % |
| text-transform | Textart | capitalize | uppercase | lowercase | inherit | none |
Attribute für Außenabständige
| Attribut | Beschreibung | Werte und Angaben |
|---|---|---|
| margin-top | Außenabstand zum oberen Element | px | em | pt | % | auto |
| margin-right | Außenabstand zum rechten Element | px | em | pt | % | auto |
| margin-bottom | Außenabstand zum unteren Element | px | em | pt | % | auto |
| margin-left | Außenabstand zum linken Element | px | em | pt | % | auto |
Attribute für Innenabstände
| Attribut | Beschreibung | Werte und Angaben |
|---|---|---|
| padding-top | Innabstand zum oberen Rand | px | em | pt | % | auto |
| padding-right | Innabstand zum rechten Rand | px | em | pt | % | auto |
| padding-bottom | Innabstand zum unteren Rand | px | em | pt | % | auto |
| padding-left | Innabstand zum linken Rand | px | em | pt | % | auto |
Listen
| Attribut | Beschreibung | Werte und Angaben |
|---|---|---|
| list-style | allgemeine Listendarstellung | Werte für list-style – | position | image | type |
| list-style-position | Liste ein- / ausrücken | inside | outside |
| list-style-image | Grafik | none | URL |
| list-style-type | Aufzählungszeichen | decimal | lower-roman | upper-roman | none | circle | square | disc |
Rahmen und Linien
| Attribut | Beschreibung | Werte und Angaben |
|---|---|---|
| border-top-width | Stärke der oberen Linie | thin | medium | thick | Zahlenwert in px | em | pt | mm | cm |
| border-right-width: | Stärke der rechten Linie | thin | medium | thick | Zahlenwert in px | em | pt | mm | cm |
| border-bottom-width | Stärke der unteren Linie | thin | medium | thick | Zahlenwert in px | em | pt | mm | cm |
| border-left-width | Stärke der linken Linie | thin | medium | thick | Zahlenwert in px | em | pt | mm | cm |
| border-style | Aussehen des Rahmens | none | dotted | dashed | solid | double | groove | ridge | inset | outset |
| width | Rahmenbreite | Zahlenwert in px | em | pt | mm | cm | auto | % |
| height | Rahmenhöhe | Zahlenwert in px | em | pt | mm | cm | auto | % |
| border-color | Rahmenfarbe | Farbangaben in RGB | Hexadezimal | Farbnamen | |
Hintergrund und Hintergrundbilder
| Attribut | Beschreibung | Werte und Angaben |
|---|---|---|
| background-color | Hintergrundfarbe | Farbangaben in RGB | Hexadezimal | Farbnamen | none | Transparent |
| background-repeat | Hintergrundbild wiederholen | repeat-x | repeat-y | no-repeat | repeat |
| background-attachment | Hintergrundbild verhalten | scroll | fixed | inherit |
| background-image | Hintergrundbild | URL | none |
Damit sind wir am Ende der CSS Grundlagen und Kurzreferenz angekommen. Mit den hier vorgestellten Mitteln lässt sich schon einiges an Gestaltung erreichen und sollte als Grundhandwerkszeug angesehen werden.
Wie bei allen Dingen die erlernt werden wollen, gilt es die einzelnen Attribute zu testen und damit zu spielen. Selbstverständlich bieten CSS noch weitaus mehr Möglichkeiten und sind ein mächtes Werkzeug zur Gestaltung einer Website.
Wer sich noch tiefer mit CSS beschäftigen möchte, dem sei die folgende Lektüre empfohlen:
Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website – aktuell zu CSS3 (Galileo Design)*
