0 Comments

Cascading Style Sheets (CSS) zur Website-Gestaltung

Cascading Style Sheets Grundlagen und Kurzreferenz

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.

Merke:
HTML dient zur Strukturierung von Dokumenten und CSS zur Gestaltung von Dokumenten. Strukturierung und Gestaltung sollte voneinander strikt getrennt werden um spätere Änderungen einfacher und schneller zu realisieren.

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:

<div style="font-style: verdana; padding: 5px;">Text in Verdana</div>

Intern in einem HTML-Dokument per Style-Element: 

<head>
<title>HTML-Dokument mit CSS</title>
<style type="text/css">
body { background-color: #000000;}
</style>
</head>

Extern als eigene Stylesheet-Datei 

<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:

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: 

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: 

* {
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: 

<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.

.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:

<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.

#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:

<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>
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.

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)*

About The Author

Andreas Meyhöfer

Wirtschaftsinformatiker (B.Sc.), Fachinformatiker (AE), Verlagskaufmann, Blogger, BTX-Kind und Käsekuchenliebhaber. Immer auf der Suche nach der nächsten Herausforderung. Du findest mich auch bei Google+ oder abonniere unseren RSS-Feed.

Comments are closed.