Mathe und Info

Seite

Styles

oder auch Formatierung mit CSS-Style Anweisungen

Sinn und Zweck

In den bisherigen Absätzen dieses Kurses haben wir uns nur mit den Grundlagen von HTML und den zwei besonderen Tags Anchor und Image beschäftigt.
Allerdings reichen die vordefinierten Formate h1 bis h6 und p in der Regel nicht aus, um allen Ansprüchen gerecht zu werden. Die Vielseitigkeit von Texten lässt sich nicht in ein paar vordefinierte Tags packen.
Als Folge hat sich ein neuer Standard herausgebildet. Sogenannte

Cascading Stylesheets (CSS)

mit Hilfe dieser Anweisungen kann man einzelne Elemente formatieren. Dabei gibt es sehr sehr viele Einstellmöglichkeiten für die verschiedenen Styles.

Cascading Stylesheets (CSS-) Syntax

Achtung: Die Syntax von CSS weicht erheblich von der bisher gewohnten Schreibweise ab. Es lässt sich daher nicht vermeiden, dass man beim Erlernen von HTML zwangsweise gleichzeitig CSS lernen muss.
Aber man soll die Katze im Sack lassen, so schwierig ist es nicht. Die Syntax ist für alle Formatierungsanweisungen gleich:

Formatierung : Wert1;

Wichtig: Die Zuweisung erfolgt hier nicht per Gleichheitszeichen sondern mit einem Doppelpunkt(!). Eine Zuweisung wird beendet durch ein Semikolon. Alle Formatierungsanweisungen gehören in ein Style-Attribut.

Beispiel

Am besten lässt sich dies an einem einfachen Beispiel verdeutlichen:

(1) <body style=“font-size:200%; color:red“ >...</body>

und noch ein weiteres:

(2) <body style=“color:blue“ align:“center“ >...</body>

Wie man an Beispiel (2) erkennen kann, ist es erlaubt verschiedene Formatierungsattribute, also klassische HTML Attribute und CSS-Styles gemeinsam zu verwenden. Dies ist aber nicht immer sinnvoll.

Infoblätter und Arbeitsblätter Paragraph

CSS Eigenschaften auf SelfHTML
Info: Auf dieser Website kann man sich detalliert informieren, welche Format-Anweisungen es bei CSS gibt und wie sie aussehen. Wichtig ist immer darauf zu achten, welche Browser die Formate überhaupt unterstützen.

Grundlagen Styles
Info: Hier findet man auch die grundlegenden Information zusammengefasst und mit ein paar Übungsaufgaben zu Formatierung mit CSS-Styles.