Webdesign mit Cascading Style Sheets (CSS)

Posted in Allgemeines, CSS, Grundlagen, HTML, Webdesign on 11/17/2009 11:05 by Hoegerl_Karl

Cascading Style Sheets (CSS) wurden entwickelt, um Inhalte vom Design einer Webseite zu trennen und die Design-Möglichkeiten auf Webseiten zu erweitern. Zusätzlich bietet CSS ähnlich wie in Bildbearbeitungsprogramme Layer zur Positionierung von Inhalten an.

Basierend auf diesem Posting werde ich in Abständen kurze CSS Code Schnipsel, auch Snippets genannt, veröffentlichen. Heute wird die Einbindung von CSS in HTML Webseiten beschrieben.

CSS lässt sich in drei Varianten in Webseiten einfügen.

  1. CSS Beschreibung innerhalb eines HTML Befehls
  2. Style Sheets im Kopf einer HTML Seite einfügen
  3. In einer CSS Datei, die durch die Webseite aufgerufen wird

CSS Beschreibung innerhalb eines HTML Befehls

Eine häufig von Webeditoren verwendete Möglichkeit Cascading Style Sheets zu nutzen, ist die Einbindung innerhalb eines HTML Tags. Als Tag wird ein Befehl der Seitenbeschreibungssprache HTML bezeichnet.

Beispiel eines HTML Tags zur Definition einer Überschrift.

<h1>Überschrift</h1>

Die Überschrift wird linksbündig dargestellt. Mit CSS lässt sich die Überschrift horizontal mittig darstellen.

<h1 style="text-align:center;">Zentrierte Überschrift</h1>

Durch den Zusatz style=”CSS-Beschreibung“ wird der CSS Befehl zu dem HTML Tag hinzugefügt. Der CSS Befehl “text-align:center;” wird mit einem Semikolon abgeschlossen. Optional können weitere CSS Befehle angefügt werden.

Style Sheets im Kopf einer HTML Seite einfügen

Wenn die Formatierung in der Webseite immer wieder benötigt wird, dann ist es praktischer die Style Sheet Definition im Kopfbereich der Webseite einzufügen.

Beispiel:

<html>
<head>
<!-- Beginn des Cascading Style Sheets -->
<style type="text/css"><!--
<!-- Überschrift der Größe 1 in Rot und Zentriert -->
h1 {color:#ff0000; text-align:center;}
//--></style>
<!-- Ende des Cascading Style Sheets -->
<title>CSS im Header</title>
</head>
<body>
<h1>Die rote, zentrierte Überschrift</h1>
</body>
</html>

Eine CSS Datei, die durch die Webseite aufgerufen wird

Die am meisten verbreitete Variante zum Einbinden von CSS ist die Erstellung einer CSS Datei. Diese Datei wird in den Webseiten als Referenz angegeben. Dies hat den Vorteil, das mit einer Änderung der zentralen CSS Datei alle Webseiten geändert werden!

Beispiel:

CSS Datei: stylesheet.css
______________________________________________________________

h1 {
 text-align: center;
 color: silver;
}

HTML Datei: index.htm
______________________________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
<!-- Externe Stylesheet Datei einbinden -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
 <title>Webseite mit externer HTML Datei</title>
 </head>
 <body>
<h1>Die silberne, zentrierte Überschrift</h1>
 </body>
</html>

Die Nutzung von CSS fällt leicht, wenn Sie die HTML Befehle kennen. Cascading Style Sheets bieten viele Design Möglichkeiten. Im neuen Bereich für Snippets werde ich Beispiele zur CSS Gestaltung posten.