HTML und CSS

CSS und die Verwendung von Styles haben die Textauszeichnung durch Attribute abgelöst. Anstatt also für Hintergrundfarbe und Textfarbe jeweils einzelne Attribute zu verwenden, nutzt man nun das Sammel-Attribut „style“ und kann da dann über Parameterwerte alle gewünschten Änderungen vornehmen.

Neben der direkten Textauszeichnung im einzelnen HTML-tag können auch Styles für das ganze HTML-Dokument oder sogar für den gesamten Web-Auftritt erstellt werden.

Grundsätzliches zum Vergleich von Attributen und Styles findet man auf der HTML-Einstiegsseite.

Was ist CSS?

CSS steht für Cascading Style Sheets¹⁾ und beschreibt, wie die Webseitenstruktur mit einem ansprechenden Layout und Design versehen werden kann.

CSS-Befehle können an verschiedenen Stellen eingebaut werden - bei kleinen Projekten, die einheitlich auftreten sollen, bietet es sich an, die Befehle im <head> der Seite, zwischen den tags <style type = text/css> </style> aufzunehmen.

CSS-Befehle folgen dabei der Syntax tag{Veränderungsangaben}

In reinen HTML-Dokumenten können zwar viele Elemente auch durch Attribute ihr Aussehen verändern - diese Attribute müssen aber auch bei gleichartigen Elementen jedesmal eingegeben werden. Durch einen CSS-Befehl im Kopf der Seite kann man das auch erreichen.

Außerdem sollte man beherzigen, dass die HTML-tags vor die Strukturierung des Webseiten-Inhalts (mit den vorgegebenen <tag>-Befehlen im <body>) vorgesehen sind, nicht für das Layout einer Seite.

Benötigt man weitere Strukturelemente, z.B. zur Datenerfassung in einem Spezialbereich, so kann man mit Hilfe von XML (Extensible Markup Language) selbst <eigene tags> definieren - zur Darstellung im Browser wird dann eine Version von XHTML eingesetzt.

CSS-Beispiel

Will man z.B. den Hintergrund grün und die Schrift gelb haben, würde man ohne CSS die entsprechenden Attribute im <body>-tag aufnehmen:

  <body bgcolor="#00ff00" text="#ffff00">

Würde man den gleichen Effekt mit zentralen Style-Befehlen erreichen wollen, wäre die Webseite wie folgt aufgebaut (Ausschnitt):

  ... 
  <head>
    ...
    <style type=text/css>
      body
      {
         background-color: #00ff00;
         color: #ffff00;
      }
    </style>
  </head>
  <body>
  ...

Bei nur einem <body>-tag im Dokument hat man vom Schreibaufwand her zwar keinen Vorteil, wenn anstelle der Attribute die entsprechenden Angaben im Kopf der Seite erscheinen - die unterschiedliche Formatierung verschiedener Elemente auf der Seite wird aber einfacher.

Grundsätzlich gilt bei der Gestaltung von Webseiten „weniger ist mehr“ - d.h. wenige, zueinander passende Farben (auf guten Kontrast achten), möglichst nur einen Schrifttyp, übersichtliche Gliederung.

CSS als Ersatz für Attribute

Um im Beispiel zu bleiben: Wenn nur für den <body>-tag Style-Angaben festgelegt werden sollen, kann man das auch direkt im tag erledigen: Aus

  <body bgcolor="#00ff00" text="#ffff00">

wird dann

  <body style = "background-color: #00ff00; color: #ffff00;">

Entsprechend kann dann jeder einzelne tag mit Style-Angaben versehen werden. Für ein einheitliches Layout ist jedoch die zentrale Angabe im <head>-Bereich der Webseite wünschenswert.

Sollen einzelne Bereiche einer Webseite mit Style-Angaben versehen werden (z.B. ganze Abschnitte oder mehrere Worte mit einer abweichenden Hintergrundfarbe hinterlegt werden), kann man diese Bereiche in spezielle tags einschließen:

  <div style="background-color: black">
    Hier wird ein 
    ganzer Bereich 
    eingeschlossen.
  </div>
 
  <span style="background-color: yellow">schließt einzelne Worte ein</span>

Abschnitte auf der Seite positionieren

Der <div>-tag ist auch gut nutzbar, um bestimmte Abschnitte auf einer Seite zu positionieren. Dazu sollte die Breite des Abschnitts festgelegt werden und die absolute Position, gemessen von der linken oberen Ecke. Mit einer abweichenden Hintergrundfarbe könnte dann die Webseite, wie mit Klebezetteln, gepflastert werden.

  <div style="position: absolute; left: 70px; top: 50px; width: 100px">
     Dieser Abschnitt soll 100px breit sein, 
     von der oberen linken Ecke nach rechts
     soll der Abstand 70 px sein,
     von der oberen linken Ecke nach unten
     soll der Abstand 50 px sein.
  </div>

Ausführliche Beispiele dazu findet ihr auch wieder bei selfhtml.org: Positionierung und Anzeige von Elementen

Beispiel margin/padding

Beispieltext mit margin: 50px

Beispieltext mit padding: 50px

Und so sieht der zugehörige HTML-Code aus:

<p style="border: 1px solid red; margin: 50px; padding: 0px">Beispieltext mit margin: 50px</p>
 
<p style="border: 1px solid red; margin: 0px; padding: 50px">Beispieltext mit padding: 50px</p>

margin ist also ein Außenabstand, padding ein Innenabstand.

HTML, CSS

¹⁾

1994 von Håkon Wium Lie entwickelt