Wer sich heute mit der Erstellung und Programmierung von Webseiten befassen möchte, kommt um bestimmte neue Entwicklungen kaum herum, wenn die Seite ansprechend und professionell erstellt werden soll. Eine solche Entwicklung wird mit den drei Buchstaben CSS angezeigt.

Was ist CSS?
Manche haben schon von CSS gehört, ohne wirklich zu wissen, was dies eigentlich ist. CSS ist eine Abkürzung für „Cascading Style Sheets“. Worum handelt es sich bei CSS und was kann es für einen leisten? CSS ist ein Stil, eine Sprache, ein Layout, der von HTML-Dokumenten definiert wird. Zum Beispiel deckt CSS Schriften, Farben, Ränder, Linien, Höhe, Breite, Hintergrund-Bilder, Positionen und viele andere Dinge. CSS kann sehr viel und ist umfangreich einsetzbar. CSS wird zum Formatieren strukturierter Inhalte verwendet. HTML kann verwendet werden, um das Layout zu Websites hinzufügen. CSS bietet mehr Möglichkeiten und ist genauer und anspruchsvoller. Wichtig ist: CSS wird von allen Browsern unterstützt, was heutzutage eine unverzichtbare Voraussetzung für eine erfolgreiche Webseite ist.

Welche Vorteile bringt mir CSS?
CSS war eine Revolution in der Welt des Webdesigns. Die konkreten Vorteile unter anderem sind:

  • Kontrolle über das Layout vieler Webseiten aus einem einzigen Stylesheet;
  • eine genauere Kontrolle des Layouts;
  • verschiedene Layouts für unterschiedliche Medien-Typen (Bildschirm, Druck, etc.);
  • zahlreiche fortschrittliche und ausgereifte Techniken;

Viele der Eigenschaften, die in Cascading Style Sheets (CSS) eingesetzt werden, sind ähnlich denen von HTML. Wer es gewohnt war, bisher mit HTML für das Layout einer Webseite zu sorgen, wird wahrscheinlich viele der verwendeten Codes wiedererkennen. Es gibt drei Möglichkeiten, wie man CSS in einem HTML-Dokument anwenden kann. Wie bei so vielen Dingen im Leben, hat jede Methode ihre ganz eigenen Vor- und Nachteile. Die meisten professionellen Nutzer empfehlen denjenigen, die in die CSS-Welt einsteigen wollen, die dritte Methode, den sogenannten externen Fokus.

Methode 1: In-line (Attribut Stil)
Eine Möglichkeit ist, CSS in einer HTML-Anwendung mit dem HTML-Attribut Style zu verwenden,  z.B.  <a style="text-decoration: none; color: #ef9033;" href="xyz.html">.

Methode 2: Interne (Tag-Stil)
Eine andere Möglichkeit ist es, die CSS-Codes mit dem HTML-Tag zu kombinieren. Auf diese Weise kann man einfach den CSS-Code innerhalb der <head> </ head>-Tags jeder HTML Datei, die man im Stil mit CSS erstellt hat, verwenden, z.B.
<head>
<style type="text/css">
<!--
a { text-decoration: none; color: #ef9033;}
-->
</style>
</head>

Mit dieser Methode benötigt jede HTML-Datei, die einen CSS-Code enthält, eine Stil-Angabe der Seite. Dies bedeutet, damit man die gewünschten Änderungen auf einer Seite durchführen kann, müssen vollständige Angaben gemacht werden. Diese Methode ist insbesondere dann empfehlenswert, wenn der Stil nur eine Seite benötigt oder wenn man verschiedene Seiten mit unterschiedlichen Stile hat.

Moderne Webseiten mit CSS (Teil 1)
shadow

Methode 3: Externe (Link zu einem Stylesheet)
Mit der empfohlenen dritten Methode geht es darum, auf ein sogenanntes externes Stylesheet zu verweisen. Eine externe CSS-Datei kann mit jedem Text-oder HTML-Editor wie „Notepad“ oder „Dreamweaver“ erstellt werden. Eine CSS-Datei enthält keine HTML, sondern nur CSS.

Ein externes Stylesheet ist grundsätzlich lediglich eine Textdatei mit der Endung: „xxx.css“. Wie jede andere Datei kann man das Stylesheet auf einem Webserver oder der Festplatte ablegen. Zum Beispiel: Das jeweilige Stylesheet hat den Namen „style.css“ und befindet sich in einem Ordner namens „layout“. Der Trick dabei ist, einen Link von dem HTML-Dokument (index.html) auf das Stylesheet (style.css) zu erzeugen. Zu beachten ist hierbei, wie man den Pfad zum Stylesheet angibt. Dieses wird mit dem Attribut href ergänzt. Die Codezeile muss in den Header-Abschnitt des HTML-Codes, also zwischen den <head> und </ head>-Tags, eingefügt werden, z.B. <link rel="stylesheet" href="/layout/style.css" type="text/css">

Wie man auch immer die HTML-Datei um den Inhalt arrangiert: Die gesamte Präsentation (Schriftarten, Farben, Hintergrund, Rahmen, Text-Formatierung, Link-Effekte und so weiter) wird innerhalb eines CSS erreicht.

Wie startet man mit CSS?
Mit CSS zu arbeiten, erfordert grundlegende Erfahrungen mit HTML. Wenn man noch nicht mit HTML vertraut ist, sollte man sich zuerst mit HTML eingehend beschäftigen, bevor man zu CSS übergeht. HTML bildet die Grundlage für CSS, sowohl faktisch, inhaltlich als auch begrifflich. Somit sind solide Grundkenntnisse im Umgang mit HTML in jedem Fall elementar, wenn man mit CSS arbeiten möchte. Es ist nicht empfehlenswert – insbesondere für Anfänger und Einsteiger – mit einer Software wie Microsoft Expression Web (Nachfolger von Frontpage), Dreamweaver oder gar Word einzusteigen und die Arbeit mit CSS zu beginnen. Die erweiterte Software, wie die oben erwähnten drei, hilft dem Anwender nicht, die Arbeit mit CSS zu lernen. Stattdessen begrenzt es eher und verlangsamt die Lernmöglichkeiten und Erfolge von Anfang an.

Alles, was man für die Arbeit mit CSS grundsätzlich benötigt, ist ein kostenloser und einfacher Text-Editor.  Zum Beispiel bietet jedes Betriebssystem von Microsoft Windows ein sehr einfaches und unscheinbares Programm mit dem Namen „Notepad“. Dieses simple Programm ist in der Regel im Bereich „Zubehör“ im Startmenü unter der Rubrik „Programme“ zu finden. Eine Alternative dazu kann ein ähnlicher Text-Editor sein, wie zum Beispiel das Programm „Pico“ für Linux oder „Simple Text“ für den Mac.

Ein einfacher Texteditor ist ideal für das Erlernen von HTML und CSS, weil dieser nicht die Codes, die eingegeben werden, beeinflussen oder ändern kann. Auf diese Weise können sowohl erste Erfolge als auch anfängliche Fehler ganz auf den Anwender selbst und nicht auf die Software zurückgeführt werden. Grundsätzlich kann mit jedem Browser das Grundlagen von CSS erlernen und CSS verwenden. Empfehlenswert ist sicherlich, stets den eigenen Browser zu aktualisieren und die neueste Version zu verwenden. Im Grunde reicht dies bereits aus, um CSS zu erlernen: Ein Browser und ein einfacher Text-Editor.

Nach nur einigen Lektionen und Einführungs-Themen in CSS wird jeder Anwender in die Lage versetzt, eigene Stylesheets mit CSS zu erstellen und der eigenen Website ein neues, grossartiges sowie zeitgemässes Aussehen zu verleihen.

Im zweiten Teil gehen wir in die Tiefe und schauen uns CSS-Frameworks an.

Moderne Webseiten mit CSS (Teil 1)

Sandro Bertschinger

Er fand Computer relative lange nicht so spannend. Ein Amiga 500 als "Game-Machine" war der Höhepunkt. Als das Internet aufkam und man entsprechend "coole" Webseiten machen konnte, kam das Thema Computer schon eher in den Mittelpunkt. Per Zufall kreuzte dann 2001 eine Internetfirma seinen Weg.

0