1) Einstieg CSS  Seitenelement formatieren

Anhand der Formatierungsanweisungen für die Überschrift der Kategorie 1 erkläre ich nun, wie eine CSS-Formatierung für Text, der innerhalb <h1>-Tags steht, aufgebaut ist.

Ein Style ist eine Formatvorlage zur Formatierung eines Seitenelements. Ein Stylesheet ist eine Sammlung von Vorlagen zur Formatierung von Seitenelementen. Sie können mit CSS-Anweisungen Formate für Texte und außerdem Größen, Farben, Abstände, Rahmengestaltung und Position von (Seiten-)Elementen bestimmen.

Browserformatierung

mit CSS-Formatierung

<h1>Text Text Text</h1>

h1 {
font-family:Arial,sans-serif;
font-size:16px;
font-weight:normal;
color: #0090E0;
}

<h1>Überschrift</h1>

h1 {
font-family:Arial,sans-serif;
font-size:18px;
font-weight:bold;
color:#9999FF;
letter-spacing:1px;
}

<h1>Überschrift</h1>

h1 {
font-family:Arial,sans-serif;
font-size:14px;
font-weight:bold;
color:#B5CE29;
letter-spacing:2px;
font-variant:small-caps;
}

<h1>Überschrift</h1>

.orange {
font-family:Times,serif;
font-size:16px;
font-weight:bold;
color: #FF7F00;
letter-spacing:3px;
}

<h1 class="orange">Überschrift</h1>

Vorschau für Neugierige   andere Format-Zuweisungen

Neben den Zuweisungen für ein HTML-Element können Sie die Zuweisung von Formatierungen über ein Attribut oder eine ID organisieren und Formatierungen für bestimmte Pseudoklassen festlegen. Die Möglichkeiten:

1. direkte Ansprache eines Elementnamens (HTML-Tag)
2. Ansprache einer Klasse
3. Ansprache einer ID
4. Ansprache einer Pseudoklasse (z.B. a:hover)

Inline-Formatierung

Daneben kann man eine CSS-Formatierung direkt an Ort und Stelle einbinden. Man nennt diese Art der Formatierung 'Inline-Formatierung'. Mit solchen Formatierungen sollte man allerdings sparsam umgehen und im Enzelfall prüfen, ob man nicht besser eine CSS-Klasse festlegt.

Text Text <span style="color:#AF00FF">violetter Text</span> Text Text

Ergebnis:

Text Text violetter Text Text Text



Bindeglieder zwischen Formatangaben und Elementen im Body

Wenn Sie die Regeln zur Formatierung zentral festlegen, gelten diese Regeln für bestimmte Inhalte / Bereiche ihres Dokuments. Wie Sie Regeln und Inhalte verknüpfen habe ich auf einer separaten Seite zusammengefasst:

Weiter zur Seite: 2a) Formatierungen verknüpfen

• der Text wird fett dargestellt
• der Text wird sehr groß dargestellt
• der Text wird mit einem Zeilenumbruch dargestellt
• der Text wird in der Farbe dargestellt, die im Body-Tag als Attribut
  für die Textfarbe festgelegt wurde

<style type="text/css">
<!--
h1{
      font-size: 18px;
      font-family: Verdana,Arial,sans-serif;
      color: #846ADD;
      font-weight: bold;
      text-align: center;
      }
-->
</style>

• Texthöhe: 18 Pixel
• Font: Verdana (1.Option)
• Farbe: #846ADD
• Gewichtung: fett
• Textausrichtung: zentriert

Vorlage in einem neuen Browserfenster öffnen

Die 'Vererbungslehre' ist ein sehr komplexes Thema, in der Grundstruktur aufgebaut wie eine Abstufung (Treppe). In der Bildchensprache der Entwickler auch als 'Kaskade' bezeichnet (dazu müsste natürlich Wasser über diese Stufen plätschern). Nun wissen Sie zumindest, wo der Begriff CSS (Cascading Style Sheet) herkommt.

Mehr dazu lesen Sie auf Seite 6 Kaskadiereung

<style type="text/css">
<!--
body{
      font-family: Verdana,Arial,sans-serif;
      }
-->
</style>

<style type="text/css">
<!--

body{
      font-family: Verdana,Arial,sans-serif;
      }

h1{
      font-size: 18px;
      color: #846ADD;
      font-weight: bold;
      text-align: center;
      }
-->
</style>