CSS zur Gestaltung

Cascading Style Sheets: Formatangaben, die sich global auf ein Dokument oder immer weiter verfeinert auf Elementgruppen oder einzelne Elemente beziehen.

Nachdem der Inhalt und der Aufbau der Webseite festgelegt sind, wird die Seite gestaltet.

Je allgemeiner diese Gestaltung erfolgt, desto leichter kann sie nachträglich geändert oder in andere Webseiten übernommen werden.
Zum Beispiel sollte nicht bei jedem img-Tag das Rahmenformat eingestellt werden, sondern der Stil am Anfang des Dokument gleich für alle Bilder festgelegt werden.

Beispiele für Stile:

• Textfarbe <p style="color:blue;">...</p>

• Hintergrundfarbe <p style="background-color:#88aa00;">...</p>

• Schriftgröße <p style="font-size:10px;">...</p>

• Breite <img src="bild.jpg" style="width:200px;" />

• Breite und Höhe <img src="bild.jpg" style="width:50%; height:75%;" />

• Style-Definition für p-Element
  <style type="css/text">
      p {font-style:italic;}
  </style>

• Style-Definition für span-Element innerhalb eines p-Elements
  <style type="css/text">
      p span {color:red;}
  </style>

Wo werden css-Formate notiert?

Für alle Webseiten voreingestellt
    im Browser unter Einstellungen (z.B. die Standard-Schriftart)

Für mehrere Webseiten
    in einer externen Datei, die in die entsprechenden HTML-Dateien eingebunden wird:
    <link rel="stylesheet" href="style.css" type="text/css" >

Für eine einzelne Webseite
    im Kopf der HTML-Datei:
    <style type="css/text">...</style>

Für ein bestimmtes HTML-Element
    inline, z. B.
    <img src="bild.jpg" style="..." />

Wenn sich einzelne Format-Beschreibungen widersprechen, gilt - in der obigen Reihenfolge - die letzte speziellste.

Allerdings kann mit !important eine nachfolgende Formatierung ausgehebelt werden. Das kann wichtig sein, wenn externe css-Dateien eingebunden werden, deren Inhalt man nicht genauer kennt. Beispiel:
<style> p {font-style:normal; !important} </style>

Wie werden css-Formate notiert?

    Global für bestimmte HTML-Elemente, z. B. p {…} für p-Elemente

    Global für verschachtelte Elemente, z. B. p span {..} für span-Elemente, die in einem p-Element vorkommen

    Global für bestimmte Klassen, z. B. .wichtig {…} für Elemente, die das Attribut class="wichtig" enthalten

    Für ein bestimmtes Element, z. B. #emailadresse {…} für das Element, das das Attribut id="emailadresse" besitzt.

Aufgabe 1

Siehe nach, welche Möglichkeiten es für die Schriftgestaltung gibt. Formatiere deine Webseite

Aufgabe 2

Siehe nach, wie eine Tabelle auf "volle Breite" eingestellt wird – und die linke Spalte auf eine Breite von 150 Bildschirmpunkten.