BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Cascading Style Sheets


Man kann die Formatierung des Textes direkt im HTML-Tag als Attribute vornehmen. Dies erscheint dem Anfänger einfach, erweist sich aber als Bumerang, wenn man das Aussehen einer Site einem Re-Design unterziehen will. Schon auf 10 - 15 Seiten sammeln sich schnell mehrere 100 Attribute an, die alle händisch umgestellt werden sollten. Das artet dann zur Sisyphos-Arbeit aus, die bei Verwendung eines CSS nie angefallen wäre. Deshalb empfehle ich die anfänglich umständlicher aussehende Variante mittels des externen Style Sheets, die zudem auch mehr Formatierungsoptionen bietet.

Im Prinzip haben Style Sheets die gleiche Funktion wie eine Formatvorlage in einer Textverarbeitungssoftware wie Word. Sie verleihen einer gekennzeichneten Passage oder einem Element ein zuvor festgelegtes Format. Man erspart sich damit eine Menge Arbeit, da eine Formatierung aus vielen Befehlen und damit Arbeitschritten bestehen kann, die nun mit einen einzigen Handgriff angebracht werden können. Dabei geht der Befehlssatz von CSS weit über die Leistungsfähigkeit üblicher HTML-Tags hinaus.

Welche Formatierungen kann ein Style Sheet übernehmen?

  • Schrift, Schriftgröße und -farbe
  • Textauszeichnungen (Kursiv / Fett / Unterstrichen und andere)
  • Textausrichtung (Links / Rechts / Mittelachse / Blocksatz)
  • Formatierung der Hyperlinks (Farben / Unterstreichung / Hover)
  • Rahmen
  • Hintergrundfarbe oder Hintergrundbild (auch für Textteile)
  • Randabstände
  • Positionierungen (relative und absolut für beliebige Objekte)
  • und viele mehr ...

Vorgangsweise

  1. Man fügt im <head>-Bereich der HTML-Datei einen Link auf das externe Style Sheet ein. Dazu verwendet man den Tag: <link rel="stylesheet" type="text/css" href="style/beliebigername.css">.
  2. Man erstellt in einem Text- bzw. Quelltext-Editor der eigenen Wahl eine Datei mit der Endung *.css, die alle Formatierungsoptionen enthält.
  3. Man speichert diese Datei in einem eigenen Verzeichnis, zB "style".

Eine CSS-Anweisung wird immer nach demselben Schema aufgebaut:

HTML-Tag ohne Spitzklammern Leerschritt öffnende geschweifte Klammer Leerschritt Attribut Doppelpunkt Leerschritt Wert Strichpunkt Leerschritt schließende geschweifte Klammer

Das schaut beispielsweise so aus:

p { font-size: 12pt; }

Natürlich kann man für einen HTML-Tag auch mehrere Style-Attribute definieren. Wenn wir die Ausrichtung von Text, die in der vorigen Lektion mittels HTML-Attributen festgelegt wurde, mit Hilfe von CSS formatieren wollen, so würden die Varianten lauten:

p { text-align: center; }

p { text-align: right; }

p { text-align: justified; }

Die wichtigsten CSS-Befehle

font-family: Verdana, Trebuchet, 'Gill Sans', sans-serif;
oder:
font-family: Albertus, Garamond, 'Century Schoolbook', Times, serif;
Schriftarten; werden in der angegebenen Reihenfolge verwendet, sofern sie auf dem PC des Surfers installiert sind; Fontnamen aus mehreren Wörtern werden in einfachen Anführungszeichen eingeschlossen; ein Default-Font (serif oder sans-serif) sollte immer angegeben werden, falls keiner passt.
font-style: italic; kursiv
font-weight: bold; fett
font-size: 16pt; Größe, sinnvollerweise in Punkt angegeben
color: color-rgb|color-hex|color-name; Farbe, mehr zu Farbnamensgebung in einer späteren Lektion
text-align: left|right|center|justify; Textausrichtung
text-decoration: none|underline|overline|line-through; Textattribute
text-indent: 12pt|80mm|3%; Einrückung für die 1. Zeile eines Absatzes. Ein negativer Wert rückt die Folgezeilen ein.
margin-top: auto|length; length relativ in px (Pixel) oder %, absolut in pt (Punkt), in (Inch) oder mm
margin-bottom: auto|length;
margin-left: auto|length;
margin-right: auto|length;
border-width: thin|medium|thick|length; Umrandungsbreite, bei "length" wählt man eine Zahl in Pixel, zB: 5px, oder % oder in oder mm
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset; Umrandungsstil
border-color: color-rgb|color-hex|color-name; Farbe, mehr zu Farbnamensgebung in einer späteren Lektion
background-color: color-rgb|color-hex|color-name; Farbe, mehr zu Farbnamensgebung in einer späteren Lektion
background-image: url()|none; Hintergrundbild, entwe-der mit "Adresse", zB: url(images/bild.gif) oder eben keines mit none
background-repeat: repeat|repeat-x|repeat-y|no-repeat; repeat-x = nur horizontal
repeat-y = nur vertical
background-attachment: scroll|fixed; Hintergrundbild scrollt mit oder steht fix, nur der Text scrollt
background-position: top left|top center|top right|center left|center center|center right|bottom left|bottom center|bottom right|x-% y-%|x-pos y-pos; x-pos & y-pos in px

Format-Unterklassen

Nachdem man für jeden Tag eine bestimmte Formatierung definiert hat, die im ganzen Dokument verwendet werden soll, taucht mit Sicherheit der Wunsch auf, einem oder mehreren Vorkommen dieses HTML-Tags eine andere Formatierung zuzuweisen. Dies erledigt man mit Klassen. Nehmen wir an, wir hätten einen Standardabsatz wie folgt definiert:

p { color: black; font-family: 'Gill Sans', Arial, sans-serif; font-size: 10pt; text-align: left; }

Nun wünschen wir auch einen zentrierten Absatz zu haben. Dies geschieht in der CSS-Datei durch die Definition einer Unterklasse:

p.center { color: black; font-family: 'Gill Sans', Arial, sans-serif; font-size: 10pt; text-align: center; }

Wir hängen an die Klassenbezeichnung "p" die Erweiterung ".center" (mit vorangehendem Punkt!) und ändern "text-align: left;" in "text-align: center;" um.

Nun müssen wir in der HTML-Datei die Absätze besonders markieren, die zentriert sein sollen. Nehmen wir wieder einen typischen Normalabsatz:

<p>Ich bin ein Normalabsatz und werde linksbündig dargestellt.<p>

Wenn wir den <p>-Tag um ein Attribut erweitern, das auf die CSS-Unterklasse verweist, ändert sich die Darstellung im Browser:

<p class="center">Ich bin ein CSS-Unterklassen-Absatz und werde zentriert dargestellt.<p>

Das Attribut lautet: class="Unterklassenname ohne einleitenden Punkt".

Wenn man will, dass eine Klasse für mehr als einen Tag gelten soll, dann schreibt man in der CSS-Datei nicht Tag.klassenname, sondern nur .klassenname.


Aufgabe 3

Erstelle im Windows-Editor die Datei lernen.css. Speichere diese Datei im Ordner style. Definiere für "body" eine Hintergrundfarbe und eine Schriftart nebst Schriftgröße deiner Wahl. Definiere weiters für "p" Schriftart, Schriftgröße und Schriftfarbe. Anschließend erstellst du die Klassen "center", "right" und "block".

Aufgabe 4

Öffne im Windows-Editor die Datei geruest.htm und füge im Head das externe Stylesheet lernen.ccs ein sowie im Body mindestens 8 Absätze sinnvollen Text eigener Wahl zu mindestens je 3 Zeilen Länge ein. Verwende jedes der 4 Absatzformate (links, rechts, zentriert, Blocksatz) 2 Mal. Vergib als <title> den Begriff Absatzformate. Speichere das Dokument unter uebung02.htm ab.