Norman's Blog » Anfänger

CSS Einsteiger Tutorial #3

Norman — Sun, 29 Mar 2009 16:50:39 +0000

CSS Einsteiger Tutorial #3

Herzlich willkommen zum dritten Teil des CSS Einsteiger Tutorials. Es wird empfohlen folgende Teile des Tutorials vorher gelesen zu haben:

In Teil 3 werden wir versuchen ein zweispaltiges Layout – bestehend aus Header, Sidebar, Content und Footer – zu erstellen.

Wieder mit dabei?

na aber sicher!

Ok, bevor es richtig losgeht, sollte wir noch eine wichtige Unterscheidung von HTML-Elementen kennen und verstehen lernen.

Block- & Inline-Elemente

Block-Elemente

Block-Elemente sind HTML-Elemente, die vom Browser so interpretiert werden, als würde vor und nach ihnen ein Zeilenumbruch stehen. Sie starten also, außer nicht anders durch CSS-Befehle festgelegt, eine neue Zeile. Standardmäßig bekommen Block-Elemente die gleiche Breite wie ihre Elternelemente, sie versuchen also ihr Elternelement in der Breite (nicht aber in der Höhe, die wiederum vom Inhalt bestimmt wird) auszufüllen.

Beispiele für Block-Elemente sind:

div – Divisions (Sektor)
p – Paragraph (Absatz)
blockquote – Blockquote (Zitat)
ul,ol – Unordered/Ordered List (ungeordnete/geordnete Liste)
li – List Item (Listenelement)
h1-6 – Headings (Überschriften)
table – Table (Tabelle)

Inline-Elemente

Inline-Elemente hingegen produzieren keine Zeilenumbrüche, sie werden einfach der Reihe nach dargestellt. Ihre Breite und Höhe wird von ihrem Inhalt bestimmt, unabhängig vom Elternelement (auch hier gilt wieder: nur solange nicht anders durch CSS-Befehle festgelegt).

Beispiele für Inline-Elemente sind:

span – Span
a – Anchor (Link)
em – Emphasize (Italic)
strong – Strong (Fett)
code – Code

Bemerkungen

Ein Layout, und dazu zählt auch unseres, besteht aus Block-Elementen, die mit anderen Block- und Inline-Elementen gefüllt werden. (Sidebar bekommt eine Liste, Content wird mit Absätzen befüllt, die wiederum Links und Spans enthalten können usw.)

Jedes Element kann in seinem Verhalten verändert werden. Der CSS-Befehl, der dafür zuständig ist, heißt display. display hat mehrere Zustände; hier die 4 wichtigsten:

none das Element wird nicht angezeigt (Element + Inhalt verstecken)
inline das Element wird als Inline-Element behandelt
block das Element wird als Block-Element behandelt
list-item das Element wird als Listenelement angezeigt (mit Anstrich)

Jedes Block-Element kann somit als Inline-Element und umgedreht behandelt werden, wodurch man sehr flexibel wird was die Benutzung von Elementen angeht.

Durch das Ändern der display-Eigenschaft ändern wir nicht das Element selbst. Ein Block-Element bleibt ein Block-Element, es verhält sich nur anders. Es ist also auch damit nicht möglich ein div innerhalb eines a-Elements zu schreiben o.ä.!

das hab ich natürlich gleich gewusst..

Zweispaltiges Layout

Ein Layout mit zwei Spalten besteht zumeist aus Header (Banner, Top-Navigation, Suche etc.), Sidebar (Navigation, Kalender, Werbung etc.), Content (der eigentliche Seiteninhalt, Bilder etc.) und dem Footer (Back-Links, Sitemap, Copyright etc.). Die meisten WordPress Themes – meins inklusive – benutzen ein zweispaltiges Layout, deshalb soll es uns hier mal als Beispiel dienen:

Zweispaltiges Layout mit Header, Sidebar, Content und Footer.

Alle markierten Blöcke auf dem Bild sind divs und somit Block-Elemente. Der HTML-Code für diese grobe Struktur würde wie folgt aussehen:

<html>
	<head>
	
	</head>
	<body>
		<div id="page">
			<div id="header">
				Header
			</div>
			<div id="sidebar">
				Sidebar
			</div>
			<div id="content">
				Content
			</div>
			<div id="footer">
				Footer
			</div>
		</div>
	</body>
</html>

Die IDs sind dazu da, um die Elemente später per CSS anzusprechen. Das div id="page" ist praktisch, wenn wir unsere Seite zentrieren wollen. Oftmals wird so ein div auch wrapper genannt, weil es die Seite nochmal umschließt (eng: to wrap).

Wollen wir nun unseren Blöcken ein gewisses Aussehen verleihen und schreiben also folgende CSS (die Werte für height und background-color stehen nur da, damit wir nachher was sehen, normalerweise wird die Höhe vom Inhalt des jeweiligen Divs bestimmt):

#page {
	margin:0 auto; /* zentriert die Seite */
	width:800px; /* Seite wird 800 Pixel breit */
}
 
#header {
	background-color:#00ffff;
	height:50px;
}
 
#sidebar {
	background-color:#ff8800;
	width:200px;
	height:100px;
}
 
#content {
	background-color:#ff00ff;
	width:600px;
	height:400px;
}
 
#footer {
	background-color:#00ff00;
	height:50px;
}

Schauen wir uns nun das Ganze im Browser an:

Zweispaltiges Layout? Noch nicht ganz..

hm.. da stimmt irgendwas noch nicht. sidebar und content sollten doch eigentlich nebeneinander passen?!

Völlig richtig! Allerdings reicht dafür obenstehendes CSS nicht aus. Es gibt allerdings eine ganz einfache Methode, um unser Ziel zu erreichen – float

Float

float hat 3 wichtige Zustände:

left Element “fließt” nach links
right Element “fließt” nach rechts
none Element “fließt” nicht

öhm.. “fließt” ??

Um es verständlicher zu machen, erkläre ich es am besten an einem Beispiel. Folgendes Szenario: Eine große 500px breite Box (schwarzer Rahmen) soll mit 4 Boxen (Box1-4) befüllt werden, die alle die Eigenschaft float:left besitzen und jeweils eine unterschiedliche Höhe und Breite haben.

Gehen wir die Sache Schritt für Schritt durch..

1. Box1 platziert sich wie erwartet links oben.

Bild 1

2. Box2 “fließt” jetzt links neben Box1, da noch genug Platz vorhanden ist.

Bild 2

3. Box3 tut es Box2 gleich.

Bild 3

4. Die “erste Reihe” ist nun voll Box4 muss sich weiter unten einreihen, wir sehen jedoch das Problem. Box4 lässt nach links Platz weil es ja auch soweit wie möglich nach oben will und muss.

Bild 4

5. Um das zu verhindern und Box4 auf einer “neuen Zeile” beginnen zu lassen, fügen wir vor Box4 noch eine weiter Box hinzu.

Bild 5

CSS-Code für Box5:

1
2
3

.box5 {
	clear:both;
}

Damit ist Box5 ein sogenannter Clear-Div. Solche Divs bewirken, dass nachfolgende Elemente das Floating von vorhergehenden Elementen ignorieren und somit wieder “bei Null angfangen”, d.h. sich wieder ganz links anordnen und nicht solche Fehler produzieren wie in Bild 4.

Neben both hat clear noch die Werte left und right, sodass es möglich ist nur eine bestimmte float-Richtung aufzuheben. Außerdem ist clear nicht auf Divs beschränkt sondern kann auf jedes Element angewendet werden.

Ok, ich denke ich hab’s verstanden.. zurück zu unserem Beispiel, was muss ich da nun wo ändern?

Mit dem neuen Wissen lassen wir nun die Sidebar und den Content floaten. Die Sidebar nach links und den Content nach rechts. So können wir sicher sein, dass nichts schief läuft. Zusätzlich sollten wir dem Footer noch ein clear:both verpassen, das ist zwar nicht unbedingt notwendig aber sollten wir doch aus irgendwelchen gründen noch Elemente nach dem Footer einfügen und diese floaten lassen besteht die Gefahr, dass es uns das Layout zerschießt.

Der neue CSS-Code lautet demnach (nur #sidebar, #content und #footer ändern sich, Rest bleibt gleich):

#sidebar {
	float:left;
	background-color:#ff8800;
	width:200px;
	height:100px;
}
 
#content {
	float:right;
	background-color:#ff00ff;
	width:600px;
	height:400px;
}
 
#footer {
	clear:both;
	background-color:#00ff00;
	height:50px;
}

Und siehe da, alles so wie es sein soll

Sieht es bei dir auch so aus? Dann Glückwunsch zum einem zweispaltigen Layout!

Sehr geil.

Nun kannst du anfangen die Blöcke mit Inhalt zu befüllen! Folgende Teile stehen zum Weiterlesen bereit:

War dieses Tutorial hilfreich? Was möchtest du als nächstes wissen? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar

CSS Einsteiger Tutorial #2

Norman — Sat, 31 Jan 2009 02:19:08 +0000

CSS Einsteiger Tutorial #2

Herzlich willkommen zum zweiten Teil des CSS Einsteiger Tutorials. Es wird empfohlen folgende Teile des Tutorials vorher gelesen zu haben:

Teil #1 (XHTML+CSS, Syntax)

In diesem Teil werden wir noch mehr Möglichkeiten zum Ansprechen von HTML Elementen kennen lernen. Das kleine Layout muss bis Teil3 warten, da Teil 2 etwas größer als geplant geworden ist.

Bist du wieder mit dabei?

logisch *Kippe ausmach* *anschnall*

Gut, dann können wir ja anfangen..

Syntax (Weiterführung)

Kommentare

In CSS ist es möglich und auch sinnvoll Kommentare zu setzen. Ähnlich wie in C/C++ werden sie folgendermaßen gekennzeichnet:

/* Kommentar */

Solche Kommentare können auch über mehrere Zeilen verlaufen:

/* Kommentar,
der über mehrere
Zeilen verläuft */

Es ist gut Überschriften innerhalb der CSS Datei per Kommentar zu setzen, um so eine gewisse Struktur aufzubauen. Weiter gehts!

Selektoren

In Teil 1 haben wir die Grundstruktur von CSS Regeln kennen gelernt, hier nochmal der Aufbau:

Selektor {
	Property-A: Value-A;
	Property-B: Value-B;
	...
}

In unserem letzten Beispiel war der Selektor ein p-Tag bzw. ein p-Tag mit der Klasse absatz. Es gibt jedoch noch eine ganze Menge anderer Selektoren und Art und Weisen, wie man diese klug einsetzen kann.

Folgende Tabelle gibt einen Überblick über alle möglichen Selektoren (Quelle: Wikipedia)

Muster	Bedeutung
*	Selektiert jedes Element (“universal selector”)
E	Selektiert jedes Element vom Typ E (jedes `E`-Tag)
.c	Selektiert jedes Element der Klasse c (analog [class~='c'])
#myid	Selektiert das Element mit der ID “myid”
E[foo]	Selektiert jedes Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert)
E[foo=bar]	Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist
E[foo^=bar]	Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar beginnt
E[foo$=bar]	Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar endet
E[foo*=bar]	Selektiert jedes Element E, bei dem das „foo“-Attribut den Wert bar enthält
E.c	Selektiert jedes Element E der Klasse c
E F	Selektiert jedes Element F, das ein Nachfahre von Element E ist
E > F	Selektiert jedes Element F, das ein Kind von E ist
E ~ F	Selektiert jedes Element F, das einen Vorgänger E auf gleicher Ebene hat
E + F	Selektiert jedes Element F, das einen direkten Vorgänger E auf gleicher Ebene hat

IE6 unterstützt keine Attribut-Selektoren.
Versuche einfach andere Selektoren zu benutzen (Klassen- oder ID-Selektoren) oder dein XHTML entsprechend dahingehend zu ändern.

boar.. das sind jetzt aber ganz schön viele, muss ich die alle auswendig wissen?!

Nein. Es kann zwar nicht schaden sie alle zu wissen, in der Regel reicht es aber gehört zu haben, dass es sowas gibt und dann an entsprechender Stelle nachzuschlagen. Du wirst schnell merken, welche in der Praxis wichtig und welche weniger wichtig sind.

In unserem Beispielabsatz aus Teil 1 haben wir den Selektor p.absatz benutzt, der sagt, dass alle p-Tags der Klasse absatz von den darauffolgenden Properties betroffen sind. Was ist aber, wenn wir auch andere Elemente wie div oder blockquote so aussehen lassen wollen?

Dieses Problem lösen wir einfach, indem wir das p in unserem Selektor weglassen. Dann bleibt nur .absatz übrig. Genau dieser Ausdruck sagt, “nimm alle Elemente der Klasse absatz und style sie wie folgt..”. Es werden also alle Elemente, egal ob p, div oder blockquote gestylt, solange sie die entsprechende Klasse besitzen.

Dasselbe gilt natürlich auch für IDs, welche übrigens mit einem Nummernkreuz/Raute # statt einem Punkt angesprochen werden.

Was ist denn überhaupt der Unterschied zwischen class und id?

Das ist ganz einfach: Elemente mit einer Klasse können beliebig oft innerhalb des XHTML Dokuments auftauchen.. zum Beispiel könnte ein Text aus mehreren Absätzen bestehen, alle p-Tags könnten dann die Klasse absatz haben. Wenn wir jedoch IDs vergeben, so dürfen diese nur einmalig innerhalb des Dokuments sein. Zum Beispiel wird es auf einer Seite nur genau einen Header geben, deswegen können wir diesem eine ID geben.

Merke:
id = einmalig
class = beliebig oft

OK, merk ich mir.. sonst noch was?

Ja, es kann vorkommen, dass wir einem Element zwei Klassen geben wollen oder müssen. Sowas ist der Fall, wenn wir zum Beispiel mehrere Absätze haben, diese aber unterschiedlich gestylt werden sollen:

1
2
3

<p class="important">Ich bin ein wichtiger Text und deshalb fett geschrieben</p>
<p class="warning ">Ich bin eine Warnung, deshalb rot geschrieben.</p>
<p class="warning important">Ich bin eine wichtige Warnung und deshalb rot und fett geschrieben.</p>

der dazugehörige CSS Code:

.important {
	font-weight: bold;
}
 
.warning {
	color: #FF0000;
}

Wir sehen, dass der letzte Absatz zwei Klassen bekommen hat, indem wir einfach zwei Bezeichnungen innerhalb des class-Attributes angegeben haben. Damit bekommt er auch die Eigenschaften beider Klassen verliehen.

Wollen wir jetzt aber – aus welchem Grund auch immer – den dritten Absatz noch weitere besondere Eigenschaften geben, müssen wir unseren CSS Code noch erweitern und folgendes hinzufügen:

1
2
3

.important.warning {
	/* jetzt folgen die besonderen Eigenschaften */
}

Du siehst, durch einfaches Aneinandersetzen zweier Klassennamen sprechen wir ausschließlich Elemente an, die beide Klassen besitzen. Die Reihenfolge spielt hierbei keine Rolle (.warning.important wäre also auch möglich).

Pseudo-Klassen und -Elemente

Folgende Tabelle zeigt alle Pseudo-Klassen auf:

Muster	Bedeutung
:link	Beschreibt, wie unbesuchte Links aussehen
:visited	Beschreibt, wie bereits besuchte Links aussehen
:hover	Beschreibt, wie Links aussehen, wenn man mit der Maus drüber fährt
:active	Beschreibt, wie Links aussehen, wenn man sie gedrückt hält
:first-child	Selektiert das erste Kindelement des davorstehenden Elements

IE6 unterstützt Pseudo-Klassen nur für a-Tags. Im IE7 treten keinerlei Probleme auf und Pseudo-Klassen sind für alle Tags nutzbar.

Pseudo-Klassen stehen immer direkt hinter dem Selektor:

a:link { color: #0000FF; }
a:visited { color: #00FF00; }
a:hover { color: #FF0000; }
a:active { color: #FF0000; }

Dies bedeutet, dass unbesuchte Links Blau, besuchte Rot und Links, über denen die Maus “schwebt” bzw. gerade aktiv sind, Grün dargestellt werden. Die Reihenfolge dieser vier Pseudo-Klassen ist übrigens empfehlenswert (LVHA-Regel).

Und nun die Pseudo-Elemente:

Muster	Bedeutung
:first-line	Selektiert die erste Zeile (meistens bei Absätzen genutzt)
:first-letter	Selektiert den ersten Buchstaben (Absätze oder `span`s)
:before	Fügt vor dem Element etwas hinzu
:after	Fügt nach dem Element etwas hinzu

Pseudo-Elemente werden recht selten genutzt, können aber hier und da die Arbeit erleichtern. Nehmen wir an, wir möchten den ersten Buchstabe eines Kapitels (Initiale) besonders hervorheben. Anstatt den ersten Buchstabe in ein extra span-Tag zu schreiben, lassen wir das doch CSS für uns machen:

p.lead:firstletter {
	color: #FF0000;
	font-size: 20px;
}

Damit wird der erste Buchstabe in 20px Schriftgröße und in der Farbe Rot dargestellt.

Okay damit hätten wir die Selektoren abgeschlossen, es kann nun aber vorkommen, dass beim Zusammenführen von mehreren Style Sheets Selektoren doppelt auftreten, aber unterschiedliche Properties haben:

1. CSS Datei

1	p.lead { color: #000000; }

2. CSS Datei

1	p.lead { color: #444444; }

Wird der Text nun schwarz (oben) oder grau (unten) dargestellt? Je nachdem welche Datei als letztes eingebunden wurde. In diesem Fall soll das mal die zweite Datei sein, der Text würde also grau werden. Wollen wir aber, dass der Text dennoch schwarz sein soll, müssen wir ein !important zwischen Value und Semikolon schreiben:

modifizierte 1. CSS Datei

1	p.lead { color: #000000 !important; }

Könnte mal nützlich sein!

Hierarchische Verschachtelung

Wir wissen ja, dass unsere XHTML Datei eine Struktur hat. Das html-Tag hat die Kind-Elemente head und body. body hat wiederum viele andere Kind-Elemente wie divs, ps oder Überschriften (h1-h6). Sogar Elemente wie p können noch Kind-Elemente haben (z.B. span) – eine Hierarchie entsteht.

Nehmen wir an, wir haben einen div mit der ID “content” und dort sind zwei p-Tags enthalten. Einer davon ist die Einleitung (class="lead") und soll deshalb fett dargestellt werden, der andere ist ein normaler Absatz:

<div id="content">
	<p class="lead">Ich bin die Einleitung und deshalb fett. *freu*</p>
	<p>Ich bin nur ein stinknormaler Absatz. *sad*</p>
</div>

Wollen wir jetzt diesen Einleitungsabsatz innerhalb des Inhalts-Divs ansprechen, gilt:

1
2
3

#content p.lead {
	font-weight: bold;
}

Zwischen Eltern- und Kindelement steht also nur ein Leerzeichen.

Und eine letzte Anmerkung zu dem Thema: Gruppieren von Selektoren. Es ist möglich und äußerst praktisch Elemente, die gleich aussehen sollen zu einer Gruppe zusammen zu fassen. Dazu werden die Elemente bzw. die einzelnen Selektoren mit einem Komma verkettet. Als Beispiel nehmen wir den Einleitungsabsatz von eben und die Warnung von weiter oben, beide sollen fett dargestellt werden:

1
2
3

#content p.lead, .important {
	font-weight: bold;
}

Ziemlich simple Angelegenheit, oder?

Joa.. glaub schon, was kommt als nächstes?

Leider schafft es das Layout nicht mehr in diesen Teil des Tutorials aber dafür folgt schon mal ein kleiner Ausblick, indem wir einen Blick auf das Box-Model werfen.

Box-Model

Alle Elemente werden unter CSS als Box aufgefasst. Also als etwas, dass befüllt werden kann (mit Text z.B.). Eine Box kann eine Breite und Höhe haben, die sich in der Regel nach der Größe des Inhalts und der Größe des Elternelements richtet. Dazu kann noch kommen: Padding, Border und Margin.

Um das zu verdeutlichen, hier mal eine Grafik:

Das offizielle W3C Boxmodel mit Padding, Border und Margin.

Diese Eigenschaften kann also jedes Element bekommen, einige haben schon standardmäßig welche. Überschriften haben z.B. ein Margin, damit sie etwas Abstand zu umliegenden Elementen haben und somit besser hervorstechen.

margin und padding können vier Values haben, jeder dieser Values steht für eine Seite (top right bottom left (im Uhrzeigersinn, mit top gehts immer los)). Die anderen vier Properties können immer nur ein Value besitzen.

Ein Beispiel: Wir haben ein span-Tag, welches 10 Pixel Padding an allen Seiten bekommen soll.

1	<span class="padding">Ich bin ein span mit Padding.</span>

CSS:

span.padding {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

Ich habe hier die einzelnen Properties für jede Seite benutzt und 10px als Value übergeben. Es geht aber noch kürzer:

1
2
3

span.padding {
	padding: 10px 10px 10px 10px;
}

Diese Form ist äquivalent zu der darüber. Aber es geht sogar noch kürzer!

1
2
3

span.padding {
	padding: 10px;
}

WTF..?!

Durch das Weglassen der drei anderen Values, nimmt der Browser einfach an, man möchte auf allen Seiten dasselbe Padding haben. Recht hat er und wir haben einen schlanken Code.

Nur.. was machen wir, wenn wir nur oben und unten Padding haben möchten und links und rechts lieber keinen, weil das vielleicht doof aussieht? Dann nehmen wir zwei Values, das erste regelt die Werte für oben und unten, das andere für die rechts und links:

1
2
3

span.padding {
	padding: 10px 0px;
}

Und wann brauchen wir 3 Values?

Drei Values brauchen wir, wenn wir auf zwei Seiten, die sich gegenüber liegen, einen gleichen Wert haben wollen und auf den andern beiden Seiten unterschiedliche Werte brauchen:

1
2
3

span.padding {
	padding: 10px 0px 5px;
}

Bedeutet:
padding-top: 10px
padding-right: 0px
padding-bottom: 5px
padding-left ist leer, bekommt aber einfach den Wert von padding-right (also auch 0 Pixel)

Puh.. ist mehr geworden als gedacht, deswegen gibts das Layoutbeispiel erst im nächsten Teil, bis dahin viel Spaß mit den Selektoren! Folgende Teile stehen zum Weiterlesen bereit:

Teil #1 (XHTML+CSS, Syntax)
Teil #2 (Syntax, Selektoren, Box-Model)
Teil #3 (Zweispaltiges Layout, Float)

War dieses Tutorial hilfreich? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar

CSS Einsteiger Tutorial #1

Norman — Fri, 23 Jan 2009 23:06:14 +0000

CSS Einsteiger Tutorial #1

Herzlich willkommen zum ersten Teil meines großen CSS Einsteiger Tutorials.

Ziel des Tutorials soll sein:

Ich will absoluten Neulingen, die noch nie etwas von CSS gehört haben, die Grundlagen und den sauberen Gebrauch von CSS näher bringen. Jeder Teil wird dabei etwas anspruchsvoller sein und es wird tiefer in die Materie vorgedrungen. Die Teile bauen dabei sukzessiv aufeinander auf. Profis werden sich allerdings kaum etwas Neues aus diesem Tutorial nehmen können.

Voraussetzungen:

(sehr) gute (X)HTML-Kenntnisse (alle gängigen Tags, W3C-konform)
Nerven aus Stahl (Stichwort IE6-Optimierung)
Fähigkeit zu Lesen – auch die englische Sprache – und zu Denken
Hang zum Perfektionismus

Du erfüllst alle Punkte? Dann können wir ja anfangen.. (wenn nicht, ist auch nicht so schlimm, man wächst schließlich mit jeder Herausforderung )

CSS.. kann man das essen?

Nein, essen kann man es nicht. CSS steht für Cascading Style Sheets und ist ein vom W3C erschaffener und herausgebrachter Standard zur Darstellung von (X)HTML Tags.

Okay.. und wie kann ich das nun benutzen?

Das lustige ist, dass jede Seite bereits gestylt dargestellt wird, da der Browser vorgibt, wie welches Tag gerendert wird. Leider hat jeder Browser andere Default Styles und die Seite sieht dadurch von Browser zu Browser unterschiedlich aus. Außerdem will man ja etwas Besonderes kreieren oder umsetzen und das soll in jedem Browser gleich aussehen.

CSS kann auf vier unterschiedliche Art und Weisen auf eine HTML Datei angewendet werden:

Browser Default
externes Stylesheet
internes Stylesheet
inline Style

Die oberste Variante hat die geringste, die unterste die höhste Priorität. Sollte es vorkommen, dass ein HTML-Element von zwei oder mehr solcher Varianten beeinflusst wird, so “gewinnt” stehts die mit der höchsten Priorität.

Varianten im Detail

Da Browser Default nicht verändert werden kann, brauchen wir das auch nicht zu berücksichtigen.

externes Stylesheet:

Bei dieser Variante wird eine normale Text-Datei (mit Texteditor wie Notepad, Wordpad oder Notepad++ öffnen) mit der Endung .css erstellt und in der .html Datei referenziert. Dabei wird folgender Code innerhalb des head-Tags geschrieben.

<link rel="stylesheet" href="url_zum_stylesheet/stylesheet.css" type="text/css" media="screen" />

Damit weiß der Browser nun, dass er sich unter “url_zum_stylesheet” die Datei stylesheet.css suchen muss und dass diese Datei ihm sagt, was er zu tun hat.

internes Stylesheet:

Intere Stylesheets werden innerhalb des head-Tags geschrieben. Man benutzt das style-Tag und schriebt dort den CSS Code hinein. Hierbei muss keine .css Datei angelegt werden.

<style type="text/css">
	...
</style>

inline Style:

Inline Styles werden direkt als Attribut eines HTML-Tags geschrieben.

<p style="...">
	Ich bin ein gestylter Absatz.
</p>

Alles klar und welche nehm ich jetzt, was ist am besten?

Diese Frage ist einfach zu beantworten. Es ist immer zu empfehlen ein externes Stylesheet zu benutzen. Es hält die HTML Datei klein und beschleunigt somit das Herunterladen der Seite. Außerdem ist es übersichtlicher und sauberer.

Die Variante des internen Stylesheets bietet sich bei kleinen, sehr kompakten Projekten an, ein Newsletter ist wohl das beste Beispiel.

Inline Style ist nur in Notfällen zu benutzen! Am besten gleich wieder vergessen, dass es das gibt. (Ich weiß, die Versuchung ist groß )

Syntax

Okay dann nehme ich halt die externe Variante.. .css Datei ist erstellt und Eintrag im Header gemacht, was nun?

Gratulation, jetzt kannst du anfangen deinen ersten richtigen CSS Code zu schreiben ! Anhand eines Beispiels soll gezeigt werden, wie man einen Paragraphen stylt. Der HTML Code lautet wie folgt:

<p class="absatz">
	Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz.
</p>

Beachte: der Absatz hat durch das Attribut class eine CSS-Klasse bekommen. Das ist ähnlich einem Namen, jeder Absatz mit dieser Klasse wird nun so dargestellt, wie wir es in der CSS Datei festlegen. Einfach folgenden Code in deine CSS Datei kopieren.

p.absatz {
	background-color: #CCCCCC;
	border: 2px solid #000000;
	font-family: Georgia;
	font-size: 16px;
	color: #000000;
	padding: 20px;
	margin: 10px 0;
	text-align: justify;
}

Wenn wir jetzt die HTML-Seite in unserem Browser öffnen, sollte der Absatz nun so aussehen:

Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz. Ich bin ein gestylter Absatz.

Tut er aber nicht

Sollte sich nichts geändert haben, überprüfe den Pfad zur CSS Datei im Header deiner HTML Datei (der Pfad kann auch relativ gesetzt werden).

Jetzt zur Erläuterung der einzelnen Zeilen des CSS Codes:

p.absatz ist ein Sperator, der sorgt dafür, dass alle p-Tags mit der Klasse absatz vom nachfolgenden Code betroffen sind. Der eigentliche Code steht in geschweiften Klammern.

background-color: #CCCCCC; gibt dem Hintergrund des Paragraphen eine Farbe; Farbwerte gibt man in der Regel hexadezimalcodiert an (#000000 = schwarz, #FFFFFF = weiß)

border: 2px solid #000000; gibt dem Paragraphen einen Rahmen, der 2 Pixel dick ist aus aus einer durchgezogenen Linie in der Farbe Schwarz besteht

font-family: Georgia; legt die Schriftfamilie fest, hier Georgia

font-size: 16px; legt die Schriftgröße fest, hier 16 Pixel

color: #000000; legt die Schriftfarbe fest, hier Schwarz

padding: 20px; zwischen Inhalt und Rahmen wird zusätzlicher Platz reserviert, sogenanntes “Padding”

margin: 10px 0; gibt dem Inhalt einen Außenabstand nach oben und nach unten (10 Pixel), links und rechts bleibt der Abstand aber auf 0 Pixel

text-align: justify; kontrolliert den Textfluss innerhalb des Absatzes, justify bedeutet Blocksatz

Nach jedem “Befehl”, den sogenannten Properties, folgt ein Semikolon. Die schließende Klammer nicht vergessen!

Aha soweit so gut, was gibt es denn noch so?

Eine Liste mit allen Properties findet man unter www.w3schools.com, dort sind auch zu allen Properties Beispiele und wichtige Hinweise allerdings nur in Englisch.

Okay für heute soll es das gewesen sein. Probiert euch am besten an dem Absatz noch etwas.. wie wäre es mit einer anderen Schriftart oder einer anderen Hintergrundfarbe? Spielt einfach etwas mit den Werten und ihr werdet merken, wie schnell und einfach CSS zu erlernen ist.

In Teil 2 gehts mit noch mehr Syntax weiter und anhand eines kleinen Layouts werden wir das Positionieren von divs lernen. Folgende Teile stehen zum Weiterlesen bereit:

War dieses Tutorial hilfreich? Hast du Fehler gefunden oder etwas vermisst? Dann hinterlasse einfach einen Kommentar