Individuelle Anwendung von CSS

CSS-Beispiele

HTML-QuelltextAnsichtKommentar
Farbe <span style="color:red;">Rot</span> Farbe Rot Eigenschaft color legt die Farbe fest: Hier mit einem Farb-Namen
Normal, <span style="font‑style:italic">kursiv</span>, <span style="font‑weight:bold;">fett</span>, <span style="text‑decoration:underline;">unterstrichen</span> Normal, kursiv, fett, unterstrichen Die Eigenschaften font-style, font-weight, text-decoration legen den Schrift-Schnitt fest.
<span style="font‑size:8pt;">Winzig</span>, Normal, <span style="font‑size:18pt;">Gro&szlig;</span> Winzig, Normal, Groß Eigenschaft font‑size legt die Schrift-Größe fest: Hier in Punkt = 1/72" (Zoll)
Farben von <span style="background‑color:#DDF;">Hintergrund und <span style="color:#C0C; font-weight:bold;">Vordergrund</span></span> Farben von Hintergrund und Vordergrund Die Eigenschaften background-color und color sind hier teilweise kombiniert.
<div style="letter‑spacing:0.25em;">Breit</div>
<div style="letter‑spacing:-0.05em;">Schmal</div>
Breite Schrift
Schmale Schrift
Mit der Eigenschaft letter-spacing kann man die Laufweite der Schrift ändern. Das relative Maß 'em' ändert sich mit der Schrift-Größe.
<span style="border:2px solid red;">Rahmen</span> Rahmen Eigenschaft border bietet viele Optionen zur Formatierung eines Rahmens
<div style="text‑align:left;">Links</div>
<div style="text‑align:center;">Zentriert</div>
<div style="text‑align:right;">Rechts</div>
<div style="text‑align:justify;">Block</div>
Links (Standard)
Das ist zentriert
Rechtsbündig
Bei Blocksatz werden die Wort-Abstände angepasst.
Eigenschaft align steuert die Ausrichtung: links, zentriert, rechts
Blocksatz (justify) wird nur dann verwendet, wenn der Text mindestens eine ganze Zeile umfasst. Angefangene Zeilen werden linksbündig formatiert.
<div style="border:2px solid #00F; margin-left:30px;">Au&szlig;en-Abstand</div>
Außen-Abstand (Links)
Eigenschaft margin (margin-left, margin-right, margin-top, margin-bottom) steuert den Außen-Abstand
<div style="border:2px solid #00F; padding:10px;">Innen-Abstand</div>
Innen-Abstand
Eigenschaft padding (padding-left, ... ) steuert den Innen-Abstand
<img src="smiley.png" style="float:left;"/> Grafik links ausrichten und rechts mit Text umflie&szlig;en Grafik links ausrichten und rechts mit Text umfließen Eigenschaft float steuert die Ausrichtung

Es gibt verschiedene Möglichkeiten zur Angabe von Farben. Hier wird meist eine Syntax der Form #RGB verwendet: Einem # Zeichen folgen 3 hexadezimale Ziffern für die Farben Rot, Grün und Blau. Jede Ziffer kann einen der Werte 0123456789ABCDEF enthalten.
Details zur Angabe von → Farben mit CSS

• Zur Angabe von Breite, Höhe, Abstand usw. kann man fast alle gängigen Einheiten verwenden. Hier wird die Einheit 'Pixel' (Bildpunkte) bevorzugt.

• Die Schrift-Größe wird meist absolut in 'Punkt' (1/72") oder 'Pixel' (Bildpunkten) angegeben oder relativ in 'em'.
Details zum Thema → Schrift-Familie

CSS mit <span>-Element

Man kann <span>-Elemente - ebenso wie die meisten anderen HTML-Elemente ineinander verschachteln.
Dabei werden ohne weitere Maßnahmen die CSS-Eigenschaften des Eltern-(parent)-Elements auf alle darin enthaltenen Unter-(child)-Elemente vererbt.
Allerdings kann man die Eigenschaften jedes child-Elements mit weiteren CSS-Anweisungen ändern.


HTML-QuelltextAnsichtKommentar
A
<span style="color:red; font-weight:bold;">B</span>
C
ABC CSS-Regeln für ein einzelnes Zeichen
123
<span style="background-color:yellow;">
A
<span style="color:red; font-weight:bold;">B</span>
C
</span>
xyz
123 ABC xyz CSS-Regeln für 1 Wort, darin individuelle Regeln für 1 Zeichen

CSS mit <div>-Element

Die 'Vererbung' von CSS-Regeln gilt auch für <div>-Elemente.

Man kann <div>-Elemente mit der CSS-Eigenschaft float ausrichten und mit position an eine beliebige Position verschieben. Diese beiden Eigenschaften werden häufig zur Gestaltung des Layouts moderner Webseiten verwendet.


HTML-QuelltextAnsichtKommentar
<div style="border:2px solid #00F; margin-left:30px;">
ABC
</div>
ABC
Rahmen und Außen-Abstand links
<div style="border:2px solid #F0F; margin-right:30px;">
Links
<div style="background-color:#CCF; text-align:center;">
Mitte
</div>
<div style="color:#F00; font-weight:bold; text-align:right;">
Rechts
</div>
</div>
Links
Mitte
Rechts
Rahmen und Außen-Abstand rechts, darin 3 weitere <div>-Elemente mit eigenen CSS-Regeln.

CSS für beliebige HTML-Elemente

Die Beispiele zeigen verschiedene Möglichkeiten zur Formatierung eines HTML <h1>-Elements (Überschrift).


HTML-QuelltextAnsichtKommentar
<h1>Ohne CSS</h1>

Ohne CSS

Ohne besondere Angaben verwendet jeder Browser seine vor-eingestellten CSS-Regeln für das jeweilige HTML-Element. (→ CSS-Kaskade)
<h1 style="font-size:11pt; text-align:center;">
Klein &amp; zentriert
</h1>

Klein & zentriert

Die angegebenen CSS-Eigenschaften werden verwendet, alle anderen vor-eingestellten Regeln bleiben unverändert.
<h1 style="font-size:11pt;">
Mit
<span style="color:#F00;">Unter</span>
-Elementen
</h1>

Mit Unter-Elementen

Die Vererbung von CSS-Eigenschaften gilt für alle HTML-Elemente: Hier wird die font-size (Schrift-Größe) vom Eltern-Element (parent) auf das darin enthaltene (child)-Element vererbt.

Anwendung: Individuelle Formatierung

Tipps:

Verwenden sie unbedingt ein gutes CSS-Tutorial wie z.B. SelfHTML, W3Schools oder Mozilla (MDN)

Bevorzugen sie die CSS-Methoden mit großer Reichweite: → Stylesheets, danach <style>-Elemente.
Verwenden sie style-Attribute nur zur individuellen Formatierung einzelner Elemente, die nicht durch weitreichende CSS-Regeln erfasst wurden.
Alternative: Seit Version → HTML-5 kann man Text auch als → SVG Objekt-Grafik direkt (Inline) in den HTML-Quelltext einsetzen.