CSS Überblick und Aufbau - Cascade Style Sheets

In diesem Webdesign-Blogartikel möchte ich einen Überblick über Cascade Style Sheets(kurz CSS) geben. CSS wurde entwickelt, um Design und HTML Code zu trennen und den HTML-Code zu verbessern/entlasten. Man kann mit CSS die Ladezeiten einer Webseiten verkürzen und das Design einer Homepage schneller anpassen, ohne jede Seite einzeln zu ändern. Ein geschicktes einsetzen von Cascade Style Sheets hat also viele Vorteile und spart Zeit und Geld.

Überblick Vor- und Nachteile von CSS:

+ Verbesserte Layoutmöglichkeiten
+ Kürzer Zeiten beim ändern des Designs
+ Verkürzung der Ladezeiten
+ Hompage funktioniert in allen Browsern(bei älteren ohne CSS)
+ Einsparung an HTML-Code, dadurch wird der Quellcode übersichtlicher und schneller
- Leider werden die CSS-Anweisung meist unterschiedlich durch die Browser interpretiert, deshalb sollte man nicht alle CSS Befehle nutzen

Aufbau einer CSS-Datei:

Eine CSS Datei wird erstmal immer mit .css als Dateiendung gespeichert(Beispiel: test.css). Dort kann man nun alle CSS Anweisungen in folgenden Schema unterbringen:

body {

font: bold 9pt/12pt arial;

}

In diesem Beispiel sagen wir der Webseite/dem Browser, dass alle Texte im Body-Tag das angebene Format haben. Also werden alle Texte die nicht noch eine anderen CSS-Anweisung erhalten mit dieser Schrift ausgegeben. Neben den festen CSS-Befehlen wie body, img, table, p, small u.s.w. kann man natürlich auch eine Klassen und Id´s anlegen. Zum Beispiel:

.menu {

color: #FFFFFF;
font: bold 10pt/14pt arial;

}

Dieses Beispiel zeigt eine Klasse, die das Menu einer Webseite anders erscheinen lässt als den restlichen Text der Webseite.

Unterschied zwischen ID und Class:

Oben habe ich schon gezeigt, wie eine CSS-Klasse aussehen kann. Die CSS-Klassen kann man mehrmals in einer Seite verwenden und ID´s nur einmal. Die Unterschied liegt hauptsächlich in der Speichernutzung des Browser. Bekannt sollte es allen Programmieren aus der Variablendeklaration sein.

Beispiel für eine ID:

#inhalt {

color: #FFFFFF;
background: #000000;
font: bold 9pt/14pt arial;

}

Der Unterschied liegt also am Anfang der CSS-Anweisung. Statt dem Punkt vor der Bezeichnung nimmt man eine Raute.

Aufruf der CSS-Klassen und Id´s im HTML Code:

Beispiel Klasse:

<div class=”menu”>blabla</div>

Beispiel ID:

<div id=”inhalt”>blabla</div>

Kleine Trick für den IE6:

Da der Internet Explorer 6 meist alles anders macht als Firefox, Opera oder dem Safari gibt es einen kleinen Trick, damit die Webseite dennoch gleich aussieht. Man setzt die Anweisungen für den IE6 einfach in ein HTML-Kommentar. Die anderen Browser ignorieren diese Anweisung ganz einfach.

Zusammenfassung:

CSS-Anweisungen werden unterschieden in feste HTML-Tags(body, html, img…), Klassen und Id´s. Man setzt die Anweisungen immer in geschweifte Klammern und schließt die einzelnen Anweisungen mit einem Semikolon ab.

Eine umfassende Übersicht und Einführung zu CSS gibt es im Blog von Herrn Jendryschik.

Bookmarken bei Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.