Im sechsten Teil unseres Artikelworkshops “HTML und CSS erlernen”, erklären wir Ihnen die wichtigsten CSS-Befehle, welche Sie für die nächsten Artikel benötigen. Unser Workshop ist genau das richtige für Einsteiger, welche ihre eigene Website von Grund an selbst erstellen möchten, oder auch für Fortgeschrittene, welche unseren Workshop als Nachschlagewerk nutzen möchten.
Heute lernen wir den Umgang mit CSS-Dateien. Als erstes erstellen wir uns eine solche Datei. Dazu benutzen wir ein Textdokument, dem wir die Endung .css geben.
Möchten wir nun, dass unsere HTML-Datei auf die CSS-Datei zugreift, müssen wir das im Headbereich unserer Website angeben. Dies funktioniert wie folgt:
<head>
<link rel=“stylesheet“ href=“CSS/dateiname.css type=“text/css“ media=“screen“>
</head>
Mit dem Media-Befehl können wir festlegen, für welches Ausgabenmedium der Stylesheet bestimmt sein soll:
media=“screen“: Bildschirmdarstellung
media=“print“: Druckausgabe
media=“aural“ (CSS2) bzw. media=“speech“ (CSS3): Sprachausgabe
media=“all“: gilt für alle Medien
In der CSS-Datei können wir verschiedenen Elementen Werte zuweisen und so ihre Farbe sowie Positionierung beeinflussen. In dieser Datei gibt es verschiedene Maßeinheiten die die Positionierung beeinflussen können:
em Breite des Buchstaben M der verwendetet Schrift (Geviert)
ex Höhe des Buchstaben x in der verwendeten Schrift (Halbgeviert)
px Pixel
% Prozent
in Zoll (inch)
cm Zentimeter
mm Millimeter
pt Punkt (=1/72 Zoll)
pc Pica (=1/6 Zoll)
Innerhalb der externen CSS-Datei werden die Formatierungsvorgaben notiert:
p {
font-family: „Lucida Grande“, Verdana, Helvetica, Arial, sans-serif; font-size: 12px;
}
Der Browser wird die aufgelisteten Schriftarten durchsuchen, bis er eine von ihnen gefunden hat. Diese wird er dann verwenden. Die Farben in der CSS werden meist hexadezimal angegeben, dafür gibt es im Internet genügend Listen und Tools, so dass kein Bedarf besteht diese auswendig zu lernen. Die Hintergrundfarbe eines angesprochenen Bereiches ändern wir mit:
p
}
background-color:(code)
}
Mit „p“ sprechen wir den Bereich an und mit „background-color“ ändern wir die Farbe des Bereiches. Um die Schrift in diesem Bereich zu ändern haben wir eine Reihe von Befehlen wie z.B.:
font-family: Schriftarten, die verwendet werden sollen (mehrnamige in Anführungszeichen)
font-size: Schriftgröße (es muss eine Maßeinheit angegeben werden)
color: Schriftfarbe (entweder in Hexadezimalzahl (#000) oder benannt (black)
font-weight: Dicke der Schrift (entweder benannt: bold oder nummerisch: 600)
font-style: italic (kursiv), oblique (schräg), normal
font-variant: small-caps, normal
word-spacing: numerischer Wert (keine %) für Wortabstand
letter-spacing: Zeichenabstand (w. o.)
line-height: Zeilenabstand (numerischer Wert, auch % erlaubt)
text-align: Textausrichtung (left, center, right, justify)
text-indent: Erstzeileneinzug (numerischer Wert)
Für die Formatierung der Hyperlinks brauchen wir die folgenden Befehle:
p { text-decoration: unterline; color: #0f0; }
Text Dekorationen:
underline: erzeugt einen unterstrichen
overerline: erzeugt eine Linie darüber
line-through: Text wird durchgestrichen
none: keine Dekoration wird verwendet
Alle Teile des Workshops jetzt kostenlos abrufen:
- Grundstruktur einer HTML-Datei
- Tabellen und Listen
- Textformatierung
- Links, Videos & Bilder
- Formulare
- Die erste CSS-Datei
