CSS Basics

Allgemeine Infos zu CSS

CSS - Cascading Style Sheet
CSS ist Ascii
CSS ist ein offenes Format und kann mit jedem beliebigen Texteditor geschrieben werden
CSS wird standardisiert vom World Wide Web Consortium W3C.
Aktuell gültige Version ist: Sprachstandard 2.1
In der Entwicklung ist CSS3

CSS läßt sich Einbinden als

Externe CSS-Datei (globales Stylesheet)
gilt für die gesamte Webseite und die Formatierungen werden zentral verwaltet
Es gibt 2 Arten der Einbindung mit HTML oder CSS
Style-Block im Kopf der HTML-Datei
gilt für die einzelne HTML-Datei
ein Style-Attribut eines HTML-Elemente
gilt für das einzelne HTML-Element

1. Externe CSS Datei
Man lagert die Style Sheets in einem externen Dokument an zentraler Stelle aus und verbindet diese Datei mit allen HTML Dateien. So hat man ein einheitliches Design für die gesamte Website (Corporate Design). Das CSS wird im Klartextformat in UTF-8 mit der Endung .css gespeichert. Die CSS Anweisungen werden direkt in die CSS Datei eingefügt. so sieht's aus In den HTML Seiten muss eine Verknüpfung zu dieser Datei angelegt werden. Hier gibt 2 Arten die externe CSS Datei einzubinden.
HTML <link rel="stylesheet" href="website.css" type="text/css">	a.) Mittels HTML in einem `<link >` Element.
CSS <style type="text/css"> @import "formate.css"; @import url("special/ie-hacks.css"); </style>	b.) Mittels CSS. Innerhalb des Gültigkeitsbereichs eines `<style>` Elements wird eine @import Anweisung eingefügt. Mit `url()` oder ohne, beides ist möglich.
So eine @import Anweisung kann man auch benutzen, wenn man mehrere Stylesheetdateien angelegt hat und innerhalb einer Stylesheetdatei eine andere Stylesheetdatei einbinden will. Auch Schriftarten werden so eingebunden. so sieht's aus
2. Dokumentweit im Gültigkeitsbereich eines style Elements
Hat man nur wenige Style Anweisungen so lohnt es sich nicht eine extra Datei dafür anzulegen. Stattdessen schreibt man die Style Anweisungen direkt in die HTML-Datei. Auch wenn man eine externe Stylesheet Datei eingebunden hat, kann es nützlich sein, zusätzlich ein paar dokumentweite Style Anweisungen hinzuzufügen, die nur für dieses Dokument Gültigkeit haben.
<style type="text/css"> body {color: #FFAFFF} </style>	Dokumentweite Einbindung der Styles werden standardmäßig im Kopfbereich der Seite definiert. Wenn diese dokumentweite Deklaration nach einer externen Einbindung eingefügt wird, hat die dokumentweite Vorrang.
3. Innerhalb von Elementen
Die dritte Möglichkeit wird eher selten gebraucht. Man kann sie auch zusätzlich zu den beiden anderen Möglichkeiten einsetzen. Sie wird gebraucht wenn man nur ein einziges Element mit einer CSS Anweisung versehen möchte.
<h1 style="color:red; font-size:26px;">HTML5</h1>	Innerhalb von HTML Elementen hat man die Möglichkeit, für das einzelne Element eine Style Anweisung zu notieren. Diese hat Vorrang vor der externen und vor der dokumentweiten Anweisung. Das Attribut `style` bekommt die CSS Eigenschaften und Werte zugewiesen.

Aufbau und Regeln einer CSS Datei

Eine Regel oder ein Regelset legt fest wie bestimmte Elemente einer HTML-Seite dargestellt werden sollen. Eine Regel besteht aus einem Selektor gefolgt von einem Deklarationsblock. Darin befinden sich ein oder mehrere Eigenschaften mit Wertzuweisung. Diese werden mit Semikolon getrennt aufgeführt.
Selektor { Eigenschaft: Wert; Eigenschaft: Wert; }

CSS Regel

CSS-Eigenschaften überschreiben HTML-Eigenschaften
CSS-Eigenschaften werden vererbt, daher der Name cascading
Nutzen mehrere Selektoren den gleichen Deklarationsblock, werden die Selektoren kommasepariert.
Einheiten werden direkt (ohne Leerzeichen) an die Zahl gehangen und sind Pflicht
Besitzt eine CSS-Eigenschaft mehrere Werte (im Sinne von und), werden die einzelnen Werte durch ein Leerzeichen separiert. Beispiel: div {border: 1px solid grey;}
Besitzt eine CSS-Eigenschaft mehrere Wert (im Sinne von oder), werden die Werte kommasepariert. Beispiel: Schriftarten, mehrere Schriftarten werden angegeben, die erste Schriftart die vorhanden ist, wird angezeigt. body {font-family: Verdana, Arial, Geneva, sans-serif;}
Besteht ein Wert aus mehreren Worten, werden die in Anführungszeichen gesetzt. Erlaubt sind doppelte und einfache Hochkommata. body {font-family: "Courir New", Courir, monospace;}

Anwendung von Stylesheets auf Dokumente

siehe dazu Selfhtml

Auch ein Html Dokument ohne CSS Anweisung wird mit dem Browser Style-Sheet dargestellt. Es ist außerdem möglich ein Benutzerstylesheet für den Browser festzulegen. Wenn ein Browser eine HTML Seite darstellt. Sucht er für jedes Element nach einer Stylesheet Definition, wenn es nur eine gibt. Stellt er es entsprechend dar. Gibt es mehrere unterschiedlicher Herkunft werden sie folgendermaßen mit absteigender Gewichtung sortiert.

Benutzer-Stylesheet mit !important
Autoren-Stylesheet mit !important
Autoren-Stylesheet
Benutzer-Stylesheet
Browser-Stylesheet

Reset oder normalize.css

Um ein einheitliches CSS in allen Browsern zu erlangen, kann man alle Styleanweisungen zurücksetzen. Anschließend erstellt man eigene CSS Anweisungen für die wichtigsten Elemente. Siehe reset alles zurücksetzen. oder man bindet die normalize.css von Nicolas Gallagher ein.

Eine regelmäßig aktualisierte reset.css findet man unter: http://meyerweb.com/eric/tools/css

Spezifität & Rangfolge

Man kann mehrere CSS Vorlagen benutzen. Generell gilt die vom Browser zuletzt aufgerufene Style Anweisung überschreibt frühere Formatvorgaben. Das ist das Prinzip der Kaskadierung. Von dieser Rangfolge unabhängig überschreiben genauere Angaben ungenauere Angaben. Was das im einzelnen zu bedeuten hat, kann man an dem Punktesystem der Spezifität ermitteln.

Eine Ansicht mit Beispielen der Spezifität findet man unter Spezifität bei Selfhtml.

Die important Regel

!important

Die mit !important ausgezeichneten Deklarationen überschreiben andere mit gleicher Gewichtung, außerdem setzt important die Reihenfolge außer Kraft. .Die Zeichenkette !important wird nach einem Leerzeichen hinter dem Wert notiert. Sie muss für jede Eigenschaft extra gesetzt werden.

Benutzen Sie die !important Regel jedoch nicht, weil es einfach ist, sondern suchen Sie erst nach dem Grund, warum eine Regel nicht so funktioniert, wie Sie es erwarten.

p { font-size:1em !important; }

so sieht`s aus

Ausgabemedien

Man kann für unterschiedliche Ausgabegeräte einzelne Style Sheet Dateien definieren. Mehr dazu unter Media Queries Das macht in erster Linie Sinn für Druck und Bildschirmausgaben. Dazu folgendes Beispiel:

<link type="text/css" rel="stylesheet" href="printStyle.css" media="print"> <link type="text/css" rel="stylesheet" href="screenStyle.css" media="screen">

Prefix Free

CSS Eigenschaften, die noch nicht offizieller Standard sind, müssen vorerst noch mit Hersteller Präfixen versehen werden (vendor prefix) Nach einer Weile wird die Unterstützung für die gepräfixten Bereiche eingestellt und der offizielle Standard wird verwendet. Um auf alle Browserversionen Rücksicht zu nehmen müssen die Eigenschaftn mehrmals aufgeführt werden. Im folgenden ein Beispiel.

background: -webkit-linear-gradient(90deg, #fec, white, #fec); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(90deg, #fec, white, #fec);/* For Opera 11.1 to 12.0 */ background: linear-gradient(0deg, #fec, white, #fec); /* Standard syntax */

Es gibt eine Lösung mit Javascript, so dass man lediglich die offizelle Schreibweise notieren muss, den Rest erledigt das Script von Lea Verou. Laden Sie die Datei herunter und binden Sie diese im Head Bereich ein.

Prefix Free only 2kb Javascript Datei http://leaverou.github.io/prefixfree/