Cascading Stylesheets - eine Einführung
Cascading Stylesheets (kurz: CSS) sind Anweisungen zum Design ("Style") von Websites. Zusammen mit dem HTML-Code
ergeben sie das Aussehen einer Website. Stylesheets sind wie die „Kleider“ einer Website – ohne sie sieht man nur
die nackten unformatierten Inhalte. Wie bei Kleidung kann eine Website mit verschiedenen Stylesheets völlig
unterschiedlich aussehen – auch wenn das HTML und die Inhalte gleich bleiben.
Cascading Stylesheets geben Webdesignern die Möglichkeit, ein ansprechendes Design – sogar mit Animationen – zu
erreichen und dabei gleichzeitig die Trennung von Struktur und Gestaltung aufrecht zu erhalten. Das ist eine wichtige
Voraussetzung, um Websites zu erstellen, die für Menschen mit Behinderungen zugänglich sind und von Suchmaschinen
optimal wahrgenommen werden.
Neben einfachen gestalterischen Optionen wie der Einstellung von Schriftart, -größe und Schriftfarbe, erlauben Cascading
Stylesheets beispielsweise die Veränderung der Zeilenhöhe, eines Einzugs sowie weiterer typografischer Parameter. Auch
Größe und Platzierung von Elementen lassen sich nahezu beliebig bestimmen. Mithilfe von CSS3-Eigenschaften können Elemente
verändert (z.B. verzerrt oder gedreht) und sogar Animationen erzeugt werden.
Wie sieht das in der Praxis aus?
Eine sehr einfache Webseite, die mit CSS gestaltet wird, könnte z. B. so aussehen:
<!DOCTYPE HTML>
<html>
<head>
<title>Minimale CSS-Seite</title>
<style>
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family: Verdana, Geneva, sans-serif;
color: #666;
line-height: 1.6;
}
.main {
width: 60%;
margin: 5% auto;
padding: 5%;
background-color: #efefef;
}
.hint {
text-transform: uppercase;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main">
<h1>Hallo Welt</h1>
<p>Dieses Dokument wird <span class="hint">per CSS</span> formatiert.</p>
<p>Hier kommt ein weiterer Absatz mit etwas Text zum Testen ...</p>
</div>
</body>
</html>
Stylesheets werden normalerweise im Kopfbereich der Website (zwischen den Tags <head> und </head>) untergebracht
(einzelne CSS-Anweisungen können auch direkt im HTML-Tag notiert werden und es ist auch möglich, eine externe Datei als
Stylesheet zu importieren).
Hier im Beispiel gibt es vier CSS-Anweisungen: Die ersten beiden beziehen sich direkt auf HTML-Elemente (h1 und p)
und legen für sie Eigenschaften fest. Eine CSS-Anweisung ("Deklaration") besteht dabei aus drei Teilen: dem Selektor,
der anzeigt, welches Element gestylt werden soll (hier z. B. h1) und der Deklaration (der Teil in den geschweiften Klammern),
die wiederum aus zwei Teilen besteht: der Eigenschaft, die verändert werden soll (hier z. B. font-family, also die Schriftart)
und dem gewünschten Wert (welche Schrift verwendet werden soll).
Da HTML-Elemente wie p mehrfach in einem HTML-Dokument vorkommen können, gibt es das Attribut class, mit dem Sie für ein HTML-Element
eine Klasse selbst festlegen können, die Sie dann per CSS formatieren können. Im Beispiel ist das class="hint" für das Element span.
Damit auch Bereiche einer Website formatiert werden können, die mehrere HTML-Elemente enthalten, wurden für CSS zwei eigene HTML-Elemente
geschaffen, die nur dazu gedacht sind, als Selektoren für CSS-Styleanweisungen zu dienen: div und span. Im Gegensatz zu h1, das eine
Bedeutung hat (nämlich die oberste Überschrift eines Dokuments zu markieren), sind diese Elemente semantisch neutral. Im Beispiel
dient ein div dazu, die Klasse "main" um die Elemente h1 und p zu legen und eine gemeinsame Formatierung festzulegen (nämlich eine
Hintergrundfarbe grau, eine Breite von 60 % der Seite und Abstände margin nach außen und padding nach innen).
Wie geht es weiter?
Nun haben Sie einen ersten Eindruck von CSS bekommen. Sie können den Code des Beispiels in eine Textdatei kopieren, als beispiel.html
speichern und in einem Webbrowser öffnen. Experimentieren Sie dann einmal mit den Werten des Beispiels und sehen sich an, wie sie die
Seite im Browser verändert.
Wenn Sie dann mehr wissen wollen hilft Ihnen eine der zahlreichen CSS-Einführungen im Netz weiter, empfehlenswert sind z. B.
http://www.webmasterpro.de/coding/article/css-einfuehrung.html oder http://wiki.selfhtml.org/wiki/CSS.
Für Einsteiger gut geeignet ist das Buch "Little Boxes" von Peter Müller oder als umfassendes Nachschlagewerk "CSS - das umfassende Handbuch"
von Kai Laborenz.
Aktuelle IT Jobs
» Ausbilder (m/w/d) im Bereich IT - Installation / Konfiguration» Mitarbeiter*in IT-Support & Systemadministration (IOF-2023-102) (m/w/d)» Teamlead IT-Administration (m/w/d)» IT-Projektmanager Omnichannel Checkout (w/m/d)» Senior (Cloud) Security Architect (m/w/d)» alle Jobs anzeigen