Syntax

Auf dieser Seite:

Beim CSS beginnt alles bei der Wahl des Selektors, dem wird das Gewünschte Attribut verpasst und diesem ein Wert zugeordnet. Die drei Selektoren in CSS sind der Element-Selektor, der Klassen-Selektor und der ID_Selektor. Mächtig sind auch die Pseudoelement- und Pseudoklassen- Selektoren. Weiter wird hier gezeigt, wohin ein CSS-Style geschrieben wird, und ein Überblick über die wichtigsten CSS-Styles wird gegeben.

Selektor{Attribut:Wert}

Das Schema von CSS sieht so aus:

Selektion machen (Elemente bestimmen oder einschränken)
Eine geschwungene Klammer { öffnet die CSS-Anweisung
darin steht eine Eigenschaft (Attribut) gefolgt durch einen Doppelpunkt : mit ihrem Wert (ohne Leerschläge) und deren Sorte (z.B. px für Pixel).
Falls dem Browser mehrere Werte zur Auswahl gestellt werden sollen (wie bei der font-family), werden diese durch Kommas , getrennt und hierarchisch angeordnet.
Mehrere Attribute für das selbe Element werden durch Strichpunkt ; voneinder getrennt (bei einem einzelnen Wert oder nur einer Eigenschaft braucht es natürlich kein Komma oder kein Strichpunkt)
Eine geschwungene Klammer } schliesst die Anweisung

Element-Selektor

Der Element-Selector steht am Anfang, er wählt die HTML-Tags aus, die formatiert werden. Beispielsweise alle Absätze und alle Titel der Stufe 3 und alle nummerierten Listen.

element { attribut: Wert }

Mehrere Elemente, für die die selbe Anweisung gelten soll (die gleich formatiert werden), sind durch ein Komma getrennt aufgeführt.

CSS: p, h3, ul { font-family: Arial, Helvetica, Geneva; color:DimGray }

Statt diese 3 HTML-Tags zu formatieren hätte man auch bloss den body-Tag formatieren können; damit wären alle darin entaltenen Tags betroffen gewesen (der Style hätte sich z.B. auch auf den <h2>Tag vererbt, auf die Tabellen, einfach auf alles was im Body steht).

Universal Element Selektor

* {...}

Der Universal Selektor (ein Stern) bezieht sich auf alle HTML-Elemente!!!

Descendant Selektor

Die Elemente können auch 'kontextuell' verwendet werden. Ich kann zB. einen Titel (h5) gelb formatieren, eine Hervorhebung (em) braun und eine Hervorhebung innerhalb eines h5 Titels (h5 em) grün; also je nach Verschachtelung der Elemente.

elternelement kindelement { attribut: Wert }

In einem Kontext stehende, verschachtelte Elemente werden nicht durch ein Komma getrennt - sondern durch einen Leerschlag zusammengefügt.

CSS:
h5 { color:Goldenrod } em { color:Brown } h5 em { color:Green } /* verschachtelte Elemente */

HTML: <em>em aussen, <h5>h5 innen,</h5> das geht nicht.</em>
Was passiert? Die innere Anweisung für h5 überschreibt die äussere Anweisung für em, und wir haben keine Anweisung für 'em h5', sonder für 'h5 em', auch sollte kein Block-Element in einem Inline-Element liegen. Obiger Markup sähe so aus (Abbildung):

Falsch verschachtelt

Die Aneinanderreihung der Elementselektoren von links nach rechts im CSS-Code wiederspiegelt die Verschachtelung des HTML-Codes von aussen nach innen:
Auf die Reihenfolge ist zu achten (descendant = absteigend), es wird zuerst der Vorfahre, dann der Nachfahre genannt:
HTML: <h5>h5 aussen,<em> em innen,</em> das geht.</h5>

h5 aussen, em innen, das geht.

Das Verschachteln funktioniert auch mit zwei gleichen Elementen!
CSS: span span { color:#cc66cc } /* betrifft nur ein Span in einem Span */
HTML: <span>Aussen, <span>innen</span> aussen.</span>, sieht so aus:

Aussen, innen, aussen.

Durch Verschachteln erziele ich eine ungeheur genaue Einschränkung bzw. Zuordnung eines Styles zu einem ganz genau definierten Tag.

Das Verschachteln funktioniert auch mit allen anderen Selektoren (die weiter unten beschrieben werden)!
CSS: #content .navigation ul li a:hover {…}
Obiger Code betrifft den gehoverten Link der sich im Listenelement einer ungeordneten Liste befindet, welches im als 'navigation' klassifizierten Element liegt, das wiederum im Element mit der id 'content' ruht.

Kinder, Nachbar und Geschwister Element Selektor

Kind > Element Selektor

Dies kann noch eingeschränkt werden auf direkte Nachfahren, das heist, das Nachfahren Element muss nicht nur im Vorfahren Element liegen, sondern es ist ein Kind-Element eines bestimmten Eltern-Elements, nur der direkte Vorfahre zählt (z.B. alle drei Einträge einer Liste: ul>li).

Nachbar + Element Selektor

Und noch eine zusätzliche Einschränkung auf den direkten Nachbarn ist möglich (z.B. nur der erste der drei Einträge einer Liste: ul+li).

Geschwister ~ Element Selektor

Aber auch eine zusätzliche Ausweitung auf alle Geschwister ist möglich, zuerst wird ein Element angegeben, dann das zu selektierende Geschwister Element (z.B. ein Absatz welcher das selbe Eltern Element wie ein h3 Titel hat: h3~p).

Attribut Selektor

element[Attribut = "Wert"]

Attributselektoren werden nicht von allen Browsern interpretiert. Viele HTML-Attribute sind veraltet und sollen nicht mehr benutzt werden.

Zur feineren Bestimmung auf welche Elemente ein gewünschter Style angewendet wird, kann auf bestimmte Attribute oder deren Wert (die im open-Tag des Elements vorkommen) geprüft werden. Der Selector besteht aus dem Element und das gesuchte Attribut mit dem gesuchten Wert wird in eckigen Klammern angehängt.
Universal-Attribute (solche die in allen HTML-Tags vorkommen dürfen) sind class, id, style und title.

element[attribut='Wert'] { attribut: Wert }

Bestimmte Attribute kommen nur in bestimmten Tags vor:
Im img-Tag das Attribut src='...' und alt='...', im a-Tag das Attribut href='...', im form-Tag das Attribut action='...', im input-Tag das Attribut type='', etc.

CSS 2:

img[title] { border-bottom: 5px solid blue; }
Wenn der Tag ein bestimmtes Attribut aufweist (Wert ist egal).
Zum Beispiel möchte ich nur die Bilder welche ein Attribut 'title' haben mit einem Rahmen unterstreichen.
img[alt = "Hans"] { ... }
Wenn der Tag das besagte Attribut mit genau dem angegebenen Wert aufweist.
Z.B. Alle Bilder, die mit dem alt='Hans' beschriftet sind.
img[title ~= "Hans"] { ... }
Wenn der Tag das besagte Attribut mit mehreren Worten im Wert, darunter mein Wort aufweist.
Z.B. Alle Bilder welche Hans zeigen: title='Hans im Wald' und title='Hans im Glück'
p[lang |= "de"] { ... }
Wenn der Tag das Attribut mit einem Anfangswert- von einem Bindestrich gefolgt aufweist.
Z.B. Alle Absätze in Deutsch: lang='de-ch' aber nicht die Absätze in English.

CSS 3:

a[href ^="http:"] {...}
Wenn der Anfangswert übereinstimmt
Z.B. Alle Links deren href-Attribut Wert mit 'http:' beginnen, anders als solche Links, welche auf der eigenen Domaine bleiben.
a[href *="biefer"] {...}
Wenn der Begriff ein Teil des Wertes ist.
Z.B. Alle Links in deren href-Attribut Wert 'biefer' irgendwo beinhaltet, anders als solche Links, welche nicht auf meine Domaine zielen.
img[src $=".jpg"] {...}
Wenn das Wertende übereinstimmt
Z.B. Alle Bilder deren src-Attribut Wert mit '.jpg' enden, anders als solche Bilder, welche auf .gif enden.

. Klassen-Selektor

class="..."

Klassen fassen unterschiedliche Elemente zusammen, die einen eigenen kontextuellen oder formalen Zusammenhang haben.

Klassen separieren so ausgesonderte Elemente als zugehörig zu einer speziellen Art, z.B. Absätze als Teaser oder Randbemerkung. Statt den Tag zu bezeichnen der formatiert werden soll, wird im CSS ein Punkt gesetzt welcher Klasse bedeutet, gefolgt von einer Klassen-Bezeichnung nach Wahl (darf aber keine Leerzeichen oder Sonderzeichen enthalten). Und man sollte auch keine Elementnamen als Klassennamen verwenden. Wobei bei der Namenvergebung eigentlich nicht gesagt werden soll was der Style macht (.rotdurchgestrichen), sondern viel besser wofür er zweckgebunden eingesetzt wird (.veraltet), denn veraltet bleibt eine Norm aber vielleicht möchte man die plötzlich lieber braun und kursiv darstellen.

.klassenbezeichnung { attribut: Wert }

Zuerst klassifiziere ich die gewünschten HTML-Elemente. Fast jedes Tag im Body kann die Klassenbezeichnung aufnehmen.
HTML:
<p class="notiz">...</p> <div class="notiz">...</div> <span class="notiz">...</span>

Ein HTML-Element kann auch mehrere Klassenbezeichner aufnehmen (durch Leerschläge getrennt!).
HTML: <p class="notiz vonbettina">...</p>
Die Reihenfolge der Klassen-Namen im HTML-Code spielt keine Rolle. Bei Überschneidungen wird überschrieben (eine Regel macht klein und grün, die nächste olivgrün), die Regeln, die im Stylesheet weiter unten stehen haben also das letzte Wort.

CSS:
.notiz { color:#006400; font-size:small; border: 1px solid #006400; padding:8px; } Diese Klasse macht die Notitzpassagen grün, klein und umrandet.
.vonbettina { color:#999933; } Diese Klasse macht die Textpassagen olivgrün.

Obige Klassen als Beispiele:

Das ist ein Absatz der Klasse 'notiz'.

Das ist ein Absatz der Klasse 'vonbettina'.

Das ist ein Absatz mit den beiden Klassen 'notiz vonbettina'.

Falls eine Klasse im vornherein auf ein HTML-Element beschränkt Anwendung finden soll, z.B. auf den <p>...</p>tag, kann bei der Definition der Klasse vor dem Punkt das HTML-Element bezeichnet werden. Das Element muss gleichwohl klassifiziert werden.
CSS: p.lead { etc...}

Mehreren Klassen kann gleichzeitig die selbe Eigenschaft zugeordnet werden (ohne Trennung durch Kommas oder Leerschläge!), aber jede einzelne mit einem Punkt davor.
CSS: .vonbettina.vonheinz { font-family: "Andele Mono", "Courier New", Courier, monospace;}
Diese Klasse macht die Schrift schreibmaschinenartig. (Für kalligrafische Schrift wäre die generische Schriftenbezeichnung cursive.)

Klassen nicht missbrauchen

Klassen sollen keine HTML Tags ersetzen durch Immitate, das würde der Logischen Auszeichnung wiedersprechen. Man hätte dann nur noch Div-Container und Span, welche verschiedenen Klassen zugeteilt wären, etwa dem Haupttitel, Untertitel, Textabsatz oder gar Link. Tatsächlich geht der Trend genau in die Gegenrichtung, man möchte in HTML 5 noch semantischer werden.

: Pseudoelemente und PseudoKlassen

Pseudoklassen definieren einen Zustand eines bestehenden Elements (z.B. a:hover), Pseudoelemente definieren ein neues Element (z.B. p:first-letter).

Seit CSS-2 gibt es diese mit einem Doppelpunkt beginnenden Pseudoelemente und Pseudoklassen, welche zwingend nur einen bestimmten Teil eines Elements verändern (und deren Bezeichnungen vorgegeben aber selbstredend sind).
Ab CSS 3 werden Pseudoelemente mit zwei vorangestellten Doppelpunkten benannt, womit sie von Pseudoklassen unterschieden werden (z.B. ::selection), der einfache Doppelpunkt wird uns aber wohl erhalten bleiben.

:pseudoklasse { attribut: Wert }

::pseudoelement { attribut: Wert }

Die Wirkung der Pseudoelemente und -klassen kann gleichfalls auf bestimmte HTML-Elemente eingeschränkt werden!

element:pseudoklasse { attribut: Wert }

Pseudoelemente zur Textauszeichnung:
Z.B. habe ich so in Absätzen, welche als 'pseudotitel' klassifiziert sind die Erstbuchstaben large und jede erste Zeile fett gemacht:

:first-letter :first-line :first-child :last-child

CSS:

p.pseudotitel:first-letter { font-size:large; font-weight:900;}
Der erste Buchstaben der als 'pseudotitel' klassifizierten Absätze wird gross und fett.
p.pseudotitel:first-line { font-weight:900;}
Die erste Zeile der als 'pseudotitel' klassifizierten Absätze wird fett.
div.pseudo :first-child { color:grey; }
Würde dem ersten Element in jedem Container eine graue Schrift verpassen. Das erste Kind des Containers kann ein Titel oder ein Absatz sein, etc.
div.pseudo :last-child { background-color:#def; }
Würde dem letzten Element in jedem Container einen hellblauen Hintergrund verpassen.

Siehe auch unter Navigationen

HTML:
<p class="pseudotitel"> (Beispiel: diese Absätze)
<div class='pseudo'> <p>Ich bin das erste Kind</p> <p>Ich bin das zweite Kind</p> <p>Ich bin das letzte Kind</p></div> (Beispiel folgend)

Ich bin das erste Kind

Ich bin das zweite Kind

Ich bin das letzte Kind

Pseudoelemente für Sprachauszeichnung:

:lang()

CSS:
:lang(de) {...}; /* Elemente mit als deutsch ausgezeichnetem Inhalt */
:lang(en) {...}; /* Elemente, deren Sprachinhalt als englisch ausgezeichnet wurde */
HTML:
<span lang="de-CH">Deutscher Text</span>>

:focus, :hover und :active
gelten je nach Browser auch für andere Elemente als nur für Links.

Pseudoklassen für Links:

a:hover tr:hover

CSS:
Für den Link: a:link (link), a:visited (schon benutzt), a:focus (draufgeklickt) a:hover (mausover), a:active (ausgewählt)
Für das Linkziel nachdem es angesprungen wurde: #zielabsatz:target {background-color:#F0FFD0}
HTML:
<a href="#zielabsatz">Gehe zum Ziel-Absatz</a> <p id='zielabsatz'>Dieser Ziel-Absatz ...</p>
Beispiel:

Springe zum Ziel-Absatz

Dieser Ziel-Absatz wird nach dem Sprung farbig hinterlegt. Danach bleibt er grün.

Pseudoklassen für Formulare:
Ein Text-Input-Element in das ein Resultat ausgegeben wird kann vor Eingabe durch die User geschützt werden. Um diesen Eingabeschutz zu kennzeichnen, könnte das Feld etwas abgeblendet werden.
Pseudoklassen für Formulare sind :enabled (für Eingabe empfänglich), :diabled (inputausgeschaltet), :checked (Radiobutton oder Checkbox ausgewählt), und (ein unchecked gibt es nicht).

:enabled :disabled :checked

CSS:
input[type='text']:disabled {opacity: 0.5;}
HTML:
<input type='text' disabled='disabled' name='result' value="DISABLED" />
Beispiel:

Pseudoelemente zum Inhalt generierten:
Zusammen mit dem Attribut 'content' können die Pseudoelemente :before und :after sogar Inhalte einfügen!
Die String-Werte des Attributs 'content' stehen in Anführungszeichen, Schlüsselworte wie attr() sind nicht angeführt. In den folgenden 3 Beispielen ist das Eingefügte blau:

:before :after content

Beispiel :before fügt ein Bild ein
CSS: h3.pseudoinhalt_info:before { content:url(images/info.png); vertical-align:middle; } /* Inhalt vor das Element einfügen */
HTML: <h3 class="pseudoinhalt_info">nformation</h3>

nformation

Beispiel :before fügt Bullet und Leerschlag ein, bei :hover fügt :after das Gatter und den ID-Bezeichner ein:
CSS: h3#pseudoinhalt:before { content:"\2022"" "; color:blue; }
CSS: h3#pseudoinhalt:hover:after { content:" #"attr(id); font-style:italic; color:blue;} /* Inhalt nach dem Element einfügen */
HTML: <h3 id="pseudoinhalt">Bullet und hover</h3>

Bullet und hover

Beispiel :after fügt in Klammern den Wert des Attributs 'title' ein:
CSS: h3[title]:after { content:" ("attr(title)")"; color:blue; }
HTML: <h3 title="Achtung: Pseudoinhalt">Title</h3>

Title

Weiter könnte man durch 'content' noch einen counter() einfügen (ohne Beispiel).

Pseudoklasse zur alternierenden Auszeichnung:
nth-child kann z.B. genutzt werden um in Listen oder in Tabellen jede zweite Zeile andersfarbig zu hinterlegen.
Neu in CSS 3 ! (die Selektoren sind vom W3C als erstes empfohlen worden und werden darum von allen gängigen Browsern umgesetzt).

Siehe auch unter Tabellen Oder unter Listen

element:nth-child(3n)

CSS:

tbody tr:nth-child(even) {background-color:#ddd;};
jede zweite (gerade) Tabellenzeile auszeichnen
li:nth-child(odd) {...};
jede zweite (ungerade) Listenelement auszeichnen
li:nth-child(3n) {...};
jedes dritte Listenelement auszeichnen
li:nth-child(1) {...};
nur das erste Listenelement auszeichnen (wie :first-child)
Auch der Startpunkt kann angegeben werden:
tbody tr:nth-child(3n+2) {...}
jede 3. Zeile, beginnend ab der 2. Zeile wird grau hinterlegt
Und das Element kann auch angegeben werden:
p:nth-of-type(n) {...}
jedes n-te Element, in unserem Beispiel Absätze
p:first-of-type {...}
das 1. Element, in unserem Beispiel der erste Absatz im Container, auch wenn davor noch etwas anderes steht
p:last-of-type {...}
der letzte Absatz, auch wenn danach noch etwas anderes steht

HTML:
Nichts Sonderliches mehr nötig. - Ich brauche weniger Klassen in die Tags zu schreiben!

Pseudoklasse zur Auswahl leerer Elemente:
Leere Tabellenzellen hervorheben oder auch leere Paragraphen. Leere Elemente haben keine Kinder, beherbergen also keine Elemente oder Texte oder auch nur einen Leerschlag.

:empty

Als 'leer' gilt ein solcher Absatz: <p></p>,
nicht aber ein solcher Absatz: <p> </p>.

Pseudoklasse zur Auswahl von nicht ausgeschlossenen Elementen:
:not scheint mir ein recht vielversprechender Selektor, er bedeutet 'alles ausser' und müsste in Kombination mit anderen Selektoren recht Potentz entwickeln.

:not :root

# ID-Selektor

id="..."

Jedes Element kann mit einer ID versehen werden, so wie es benannt werden kann, allerdings kann eine bestimmte ID nur einmal je Seite vergeben werden (im Gegensatz zu einer bestimmten Klasse). Identifizierte Elemente können per CSS angesprochen werden (und auch per Javascript). Zum Herauslösen etwa eines div-Containers (Erstellen eines schwebenden Rahmens durch positionierende Styleangaben siehe Container).

#idbezeichnung { attribut: Wert }

Die Definition im Stylesheet sieht so aus:
CSS: #idabsatz { color:navy; }
Die Identifizierung eines Tag geht so:
HTML: <p id="idabsatz">Jedes ...</div>

Aber wohin wird das CSS getan? Es gibt 3 Möglichkeiten der Einbindung von Styles: Extern, Intern im Head oder Inline im Tag.

Einbindung externer Datei

<link ... />

Eine Stylesheetdatei.css wird in einem Ordner deponiert und im Head der betroffenen Dokumente wird nur noch dort hin verwiesen. Von mehreren Seiten kann also darauf zugegeriffen werden und eine einzige Änderung im externen Stilesheet wirkt sich wunderbar auf sämtliche damit verknüpften Seiten einheitlich aus!

Der Verweis auf die StyleSheetdateien geschiet im Head mittels eines <link>Tags:
<link rel="stylesheet" href="css/titel.css">
Das Link-Tag muss im Doctype 'Strict' einen </link> Endtag haben! Im selben Ordner wie das aktuelle Dokument, befindet sich also ein Ordner css, in diesem eine Datei titel.css, jene Datei geöffnet sieht so aus:

h2 { color:#8b0000; font-family:Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
Dieses macht also die Titel der Ordnung 2 dunkelrot und schlägt wieder ein paar Schriftarten vor.
Es genügt in der externen Datei den nackten Style zu definieren; es braucht keine Script einleitende Tags wie <style>...</style>, Kommentare können jedoch zwischen /*...*/ gesetzt werden.

Es können mehrere Stylesheets je Seite nacheinander verlinkt werden, enthalten verschiedene Sheets für ein Element sich wiedersprechende Anweisungen, dann gilt jene des zuletzt geladenen Sheets.

@import url(...);

Es gibt noch eine zweite Methode der Verknüpfung mit einem externen Stylesheet, das Importieren:
An Stelle des <Link>tag im Head kommt ein Style-Tag, also <style>...</style>, in diesem aber nicht der Style-Syntax folgt, sondern die @import url:
<style type="text/css"> @import url(css/titel.css); </style>
Werden mehrere Stylesheets importiert, dann kommt auch das letzte zum Tragen, alle vorangehenden Stylesheets (auch die internen im Head) werden ignoriert (falls sie vor dem Import notiert wurden)!

Intern im Head

<style>...</style>

Die Formatvorlage wird im Head untergebracht, und gilt nur für diese Seite.
Der Style wird dort innerhalb des <style>...</style>-Tags gschrieben.
Das Attribut type="text/css" bezeichnet die Art des Stylesheets, das Attribut media="all" dessen Verwendung (es gibt unterschiedliche Ausgabe-Medien).
Weil nicht alle Browser Stylesheets lesen konnten, und damit dieses dann nicht als Text interpretiert wurde, wurden die Style in HTML-Kommentarklammern gesetzt; dies ist heute nicht mehr nötig.
Das erste Stylesheet (was den Absatz-Text grau machen würde) steht also so im Head dieses Dokuments:

<head>
  <style type="text/css" media="all">
    p, h3, ul { font-family:Arial, Helvetica, Geneva, Swiss, SunSans-Regular; color:DimGray }
  </style>
</head>

Auch hier kommt das Stylesheet zur Anwendung, welches als letztes vom Browser gelesen wird, unabhängig davon, ob durch <link> eine Externe Datei eingebunden oder durch <style> eine Anweisung im Head gemacht wurde. Allerdings ist es üblich, die verlinkten und importierten Stylesheets (als Grundsätzliche Styles) vor den internen Stylesheets im Head (als Seitenspeziefische Styles) anzugeben.

Inline im Tag

style="..."

Ein Inline Style wird direkt in den Tag geschrieben, welcher formatiert werden soll, das wirkt sich nur auf diesen Tag und die in ihn verschachtelten Tags aus. Dies kann ein vorhandener <p>Tag sein:
<p style="color:black; font-weight:bold">...</p>

Hier mutiert der style zu einem Attribut des ihn beherbergenden Tags und die Definition zum Wert - die geschwungenen Klammern { } wurden quasi zu =" ".

Es ist auch möglich, eigens ausgezeichnete Passagen inline zu formatieren; die Stelle, die gestylt werden soll, wird mit dem <span>...</span>-Tag markiert und dieser Tag wird dann formatiert. Dies kann so wohl nur für einen einzelnen Buchstaben wie als auch über mehrere Abschnitte gelten. Für obiges, einzelnes, schwarzes, fettes B steht im Text:
<span style="color:black; font-weight:bold">B</span>.

Inline-Styles sind aber schwierig aufzufinden und daher nur sehr aufwändig umzuklassieren oder zu löschen. Inline-Formatierungen berauben die Stilesheets ihrer eigentlichen Stärke und verstossen gegen das Gebot der Trennung von Inhalt und Format! Darum sollen Inline Stiele nicht häuffig verwendet werden, man verliert dabei fast alle Vorteile von CSS gegenüber dem alten HTML <font ... >Tag.

<span> oder <div> Elemente

<span> (Spanner) ist ein Inline-Element, es erzeugt keinen neuen Absatz und wird benutz um innerhalb von Zeilen einzelne Worte speziel auszuzeichnen, wo es keine anderen Tags hat, die gestylt werden könnten. Der Span-Tag kann keine Blockbildende Elemente enthalten.

<div> (Different) ist ein Block-Element, erzeugt also einen Absatz (ohne eine Leerzeile). Ich sollte, um einen speziellen Absatz zu definieren, einem <p> (normaler Absatz) einen Klassenstil verschreiben.
Das <div>-Element wird in Kombination mit dem id-Selektor verwendet um einen Container zu erzeugen, welcher unterschiedliche Bereiche voneinander abgrenzt (z.B. die Navigation oder den Inhalt). Div sind auch dann die Wahl, wenn etwas animiert (z.B. verschoben) werden soll.

class oder id Selektoren

Die selbe class (Klasse) kann ich in einer Seite verschiedensten Elementen und so oft ich will zuordnen. Und ich darf einem Element auch mehrere Klassen zuordnen.

Eine id identifiziert eindeutig ein Element als dasjenige welches... Es kann keine zwei identische Elemente in einer Seite haben.
Ein identifiziertes Element kann zusätzlich klassifiziert werden.

Hierarchische Wirkung

Über jedes Element ergiesst sich letztlich ein Strom von geerbten Style-Angaben. Von dieser Kaskade-Wirkung kommt die Bezeichnung CascadingStyleSheets (CSS).

Für die Stylesheets gilt: je weiter weg, desto untergeordneter; bzw. je gezielter, desto übergeordneter, also sind Inline-Styles stärker als die internen Styles im Head oder die externen. Was vom Browser zuletzt gelesen wurde, überschreibt das vorangesagte. Alle 3 Stylesheet-Einbindungsmethoden unterliegen den formatierenden HTML-Tags (zB. dem <font>...</font>Tag oder <b>...</b> Tag).

!important

Ausnahme: folgt auf eine Styledefinition das !important, dann wird sie nicht durch nachfolgende Definitionen überschrieben!
CSS: body { background-color: black !important; } /* diese Seite verbraucht viel Tinte vom Drucker */

Ausgabe-Medien

HTML ist nicht nur für den Monitor

Nebst dem Monitor, existieren weitere Ausgabe-Medien für HTML Dokumente, welche dem entsprechend unterschiedlich formatiert werden können. Es mag reizvoll sein, am dunkelbraunen Bildschirm eine helle, rosarote Schrift zu sehen, für den Ausruck wäre aber schwarzer Text auf weissem Grund kundenfreundlicher (spart Tinte).
Folgende Medien können berücksichtigt werden: media="screen", media="print" und einige andere mehr wie "speech" (früher "aural") für Sprachausgabe, "braille" und "embossed" für Braille-Papierstanzer und Braille-Noppen-Zeile, "handheld" für PDAs, "projection", "tv", "tty" usw. (welche aber nicht immer erkannt werden).

Das Ausgabegerät sucht sich sein StyleSheet selber aus!

HTML code: mit <link>-Tag verwendet das Attribut media="..."

<link rel="stylesheet" media="screen" href="website.css"> <link rel="stylesheet" media="print, embossed" href="druck.css">

CSS code: mit import

<style type="text/css"> @import url("druck.css") print, embossed; @import url("pocketcomputer.css") handheld; @import url("normal.css") screen; </style>

Unterschiedliche Style innerhalb eines Head-StyleSheets

<style type="text/css"> @media print{ /* ... Formatdefinitionen zum Drucken ... */ selektor { eigenschaft:wert;} } @media screen, handheld{ /* ... Formatdefinitionen zur Bildschirmausgabe ... */ selektor { eigenschaft:wert;} } </style>

Innerhalb eines exterenen StyleSheets, geht das genau so (natürlich dann ohne das <style>-Tag.

CSS Browserweiche

Um z.B. dem InternExplorer seperate Syles zuzuweisen, kann folgender Code verwendet werden:


<!--[if IE]>  
  <style>  
    element { attribut: wert; }  
  </style>  
<![endif]-->

Kommentare

In CSS-Scripts kann durch /* Kommentar */ der Inhalt der Interpretation entzogen werden.

Check den Code.

Boxmodel >> << Einführung

Ich bin hier: > CSS Lehrling >> Syntax