Ein weiterer Tag, ein weiteres Türchen, eigentlich wollte ich mittlerweile mal etwas aufgeholt haben aber irgendwie kommt immer was dazwischen. Aber na gut, kommen wir also zu #14: text-indent. Mit dieser Eigenschaft können wir die erste Zeile eines beliebigen Textblocks manipulieren.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

Unterstützt ab Internet Explorer 3.0, das sagt glaub ich alles. Man kann die Eigenschaft also bedenkenlos einsetzen, sie funktioniert ausnahmslos in jedem Browser.

Erfahrene Webdeveloper nutzen diese Technik relativ häufig um beispielsweise Text zu verstecken oder um einen Absatz eingerückt beginnen zu lassen. Für Anfänger jedoch erschließt sich der richtige Gebrauch von text-indent meist etwas zu spät. Deswegen sei hier nochmal darauf hingewiesen, dass man damit nur einzeilige Texte bzw. die erste Zeile eines Textes beeinflussen kann.

Als Werte sind positive wie negative Längenangaben und prozentuale Angaben erlaubt.

Beispiele

Beispiel Nummer eins gebraucht text-indent zur Einrückung von Absatzanfängen, als Basis dient uns folgender Code:

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
et justo duo dolores et ea rebum.</p>

CSS

1
2
3

p {
	text-indent:2em;
}

Ergebnis

Man beachte, wie die erste Zeile des Absatzes um 2em eingerückt wird, die anderen Zeilen aber nicht.

Deswegen sollte man text-indent auch niemals in Menüs/Navigationen verwenden, sollte nämlich doch mal ein Menüpunkt umbrechen, ist nur die obere Zeile eingerückt, nicht aber der Rest des Textes. In solchen Fällen ist padding zu bevorzugen.

Nächstes Beispiel: Wie in Türchen #3 angedeutet, wird text-indent gern zum verstecken von Text verwendet, speziell wenn es um Image-Replacement geht. Wollen wir doch noch mal nachsehen, wie genau das funktioniert. Wir nehmen wieder den Absatz von oben und fügen noch ein span-Tag ein, dass wir mit einem Bild (in diesem Fall der Schriftzug meines Blogs) ersetzen wollen..

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. <span class="logo">Norman's Blog</span> 
At vero eos et accusam et justo duo dolores et ea rebum.</p>

CSS

1
2
3
4
5
6
7
8

.logo {
	background:transparent url(normansblog_logo.png) no-repeat 0 0;
	display:inline-block; /*damit height und width greift*/
	height:29px; /*Höhe des Bildes*/
	text-indent:-9999px;
	vertical-align:bottom;
	width:150px; /*Breite des Bildes*/
}

Ergebnis

Soviel dazu, text-indent ist also eine nützliche Sache, die man im Hinterkopf behalten sollte.

Auch an diesem wundervollen Abend gilt es einmal mehr ein Türchen im Adventskalender zu öffenbaren, diesmal verbirgt sich dahiner.. cursor! Mit dieser tollen Eigenschaft ist es uns möglich, das Bild des Mauszeigers zu ändern, wenn dieser über bestimmte Elemente unserer Webseite fährt bzw. ruht.

Browserunterstützung

Browser
ab Version	1.0	1.2	7.0	1.0	4.0

cursor hat sehr viele mögliche Werte, angefangen vom normalen Pfeil, über eine Hand, bis hin zu einer Sanduhr kann man so ziemlich alles damit machen. Die Unterstützung an der Browserfront ist sehr gut, einige extravagante Icons sind allerdings erst in höheren Versionen nutzbar bzw. abhängig vom jeweiligen Betriebssystem.

Von der Syntax her ist cursor ganz einfach aufgebaut und kann auf jedes Elemente angewendet werden. Nach der Eigenschaft folgt einfach eines der vielen Schlüsselwörter. Man kann auch eigene Cursor verwenden, hierzu benötigt man jedoch eine .cur-Datei (eine besondere Form des .ico Formats). Diese bindet man dann über url(pfad-zur-cursor-datei) ein.

CSS

1
2
3
4
5
6
7
8
9

abbr {
	cursor:help;
}
.wait {
	cursor:wait;
}
.hide-cursor {
	cursor:none;
}

Beispiele

Im Folgenden werde ich mal einige Werte auflisten, wenn ihr über den Listeneintrag fahrt, werden ihr sehen, wie sich euer Mauszeiger verändert.

• default
• none
• help
• pointer
• progress
• wait
• crosshair
• move
• n-resize

Eine komplette Übersicht mit allen möglichen Werten gibt es unter anderem im MDN. Wie ihr sicherlich schon richtig vermutet, kann man cursor dazu nutzen, um damit allerhand Blödsinn anzustellen. Das ist natürlich nicht der Sinn des Erfinders. Vielmehr würde ich mir wünschen, dass bei anklickbaren Elemente (in Zeiten von jQuery und Co. kann das ja alles sein) ein Pointer-Cursor erscheint, und bei Dialogboxen/Fenstern entsprechend ein Move-Cursor.

Für erklärende Elemente, wie das abbr-Tag beispielsweise, sollte man cursor:help setzen, damit der User weiß: “Ah, hier wird mir etwas erklärt, hier bekomme ich Hilfe.” Kleine Dinge, die die Usability einer Seite aber entscheidend beeinflussen können, aber bitte nutzt es in Maßen!

Wenn wir nun einmal mit Tables angefangen haben, machen wir doch gleich damit weiter. Noch eine Eigenschaft, die es nur für Tables gibt, ist caption-side. Sie ist fest an das caption-Tag gebunden und setzt logischer Weise voraus, dass ihr solches auch benutzt. Die Eigenschaft gibt dabei an, auf welcher Seite der Tabelle der Titel ausgegeben werden soll.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	8.0

caption-side hat zwei Werte, die von Bedeutung sind: top und bottom, wobei erstes den Defaultwert darstellt. Firefox unterstützt zudem auch noch left und right. Die Wahrscheinlichkeit aber, mit der ein Fall eintritt, indem einer dieser beiden Werte nötig wären, geht quasi gegen Null.

Beispiel

Wie letztens gehts mit einer normalen Tabelle los, diese hier wird auch eine caption (Überschrift, Bezeichnung) haben, denn darum gehts uns ja.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<caption>Besucherzahlen</caption>
	<thead>
		<tr>
			<th>Monat</th>
			<th>Besucher</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11/2010</td>
			<td>2.744</td>
		</tr>
		<tr>
			<td>10/2010</td>
			<td>2.503</td>
		</tr>
		<tr>
			<td>09/2010</td>
			<td>2.771</td>
		</tr>
	</tbody>
</table>

Da caption-side:top der Standard ist, erwartet uns folgende Ausgabe:

Jetzt nutzen wir caption-side:bottom und wenden es am caption-Tag an.

CSS

1
2
3

caption {
	caption-side:bottom;
}

Damit sieht unsere Tabelle dann so aus:

Das Gleiche könnt ihr jetzt ja mal für left und right im Firefox probieren.

Manchmal werden sie einfach noch gebraucht, auch wenn man sie eigentlich überhaupt nicht leiden kann.. die Rede ist nicht von Frauen sondern natürlich von Tables. Im Zusammenhang mit Tables gibt es einiges zu wissen und kennen zu lernen. Neben den ganzen Elementen und Hierarchien, die man damit aufbauen kann, gibt es auch eine ganze Reihe von CSS Eigenschaften, die speziell Tables beeinflussen. Eine davon, nämlich empty-cells, stelle ich euch heute vor.

Browserunterstützung

Browser
ab Version	1.0	1.2	4.0	1.0	8.0

Eigentlich schon erstaunlich wie wenig der IE vor Version 8 überhaupt beherrscht hat, empty-cells hat jedenfalls nicht dazu gehört. Aber da es sich hier eh nur um eine kosmetische Eigenschaft geht, ist das noch vertretbar. Was macht empty-cells? Wie der Name schon andeutet, handelt es sich hier um Zellen einer Tabelle, die durch CSS ausgeblendet werden können, wenn sie leer sind.

Der dafür zuständige Wert lautet hide, um leere Zellen wieder anzuzeigen, muss der Wert auf show gestellt werden. show ist außerdem der Standardwert für empty-cells.

Beispiel

Schauen wir uns die Sache an einer Beispieltabelle an:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<table>
	<thead>
		<tr>
			<th>Browser</th>
			<th>CSS3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Firefox</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>Chrome</td>
			<td>ja</td>
		</tr>
		<tr>
			<td>IE</td>
			<td></td>
		</tr>
	</tbody>
</table>
<p>(..jede Menge Tags, ich weiß..)</p>

Ergebnis

Raus kommt eine normale Tabelle, eventuelle Borders und Hintergründe werden auch für leere Zellen gerendert, jetzt das Ganze mit empty-cells:hide.

1
2
3

table {
	empty-cells:hide;
}

Ergebnis

Und weg ist die leere td! Naja nicht ganz weg, aber halt versteckt. Sie bleibt immer noch im Markup vorhanden und behält ihre Ausmaße. Man muss auch keine Angst haben, dass floatende Elemente in die Lücken rutschen oder sowas in der Art.

Komischer Weise hat sich so ein bisschen das Gerücht verbreitet, dass negative Werte für margin irgendwie falsch oder nicht standardkonform oder Cross-Browser-inkompatibel sein sollen. Das ist natürlich vollkommener Blödsinn, vor allem wenn man bedenkt, wie nützlich es sein kann, negative Werte zu benutzen. Ein Beispiel will ich euch gern zeigen.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

margin wird natürlich von allen Browsern seit jeher unterstützt, dazu zählt auch die Angabe von negativen Werten. Damit lässt sich allerhand machen und kann einen in so manch einer kniffligen Situation aus der Patsche helfen. Prinzipiell könnte man es vielleicht am ehesten mit position:relative vergleichen. Die Position bzw. die Ausmaße einen Blocks ändern sich.. aber wie immer lässt es sich am besten an einem Beispiel erklären.

Beispiel

Nehmen wir ein einfaches Widget mit einer Überschrift, innerhalb des Widgets gibt es eine Überschrift und Inhalt in irgendeiner Form. Natürlich soll der Inhalt einen gewissen Abstand zum Rand des Widgets haben, dafür nutzen wir logischerweise Padding. Die Überschrift allerdings, soll durch einen Hintergrund farblich hervorgehoben sein.. aber durch das Padding des Widgets entsteht jetzt links und rechts eine Lücke, was also tun?

Schauen wir uns das Ganze mal näher an:

HTML

1
2
3
4

<div class="widget">
	<h4>Überschrift</h4>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

1
2
3
4
5
6
7
8
9

.widget {
	border:1px solid #aaa;
	padding:0 10px 10px;
	width:200px;
}
h4 {
	background-color:#adf;
	padding:0 10px;
}

Ergebnis

Da haben wirs.. grottig diese blöde Lücke links und rechts – aber es gibt eine Lösung für dieses Problem: negatives Margin to the rescue!

Überschrift bekommt negatives Margin

1
2
3
4
5

h4 {
	background-color:#adf;
	padding:0 10px;
	margin:0 -10px;
}

Ergebnis

Ach schön.

Am neunten Tag möchte ich euch display:inline-block näher bringen. display an sich dürfte ja allen bekannt sein.. es gibt (neben diversen anderen) display:none, display:block, display:inline und eben noch etwas dazwischen – inline-block. Wozu man das braucht und wobei es hilfreich sein kann, verrät euch der heutige Eintrag.

Browserunterstützung

Browser
ab Version	3.0	1.0	3.5	1.0	5.5

inline-block hat eine Weile gebraucht bis es sich flächendeckend bei allen Browsern durchgesetzt hat. Aktuelle Versionen unterstützen es problemlos, nur IE6 und 7 haben eine Einschränkung: Der Wert wird nur auf inline-Elemente korrekt angewendet.

Was ist nun der große Vorteil von Inline-Block-Elementen? Anders als Block-Elemente, welche standardmäßig auf die volle Breite des Elternelements aufgezogen, verhalten sich Inline-Block-Elemente wie Replaced Elements (das img-Tag wäre ein Beispiel dafür). D. h. dass sie in den Textfluss eingebunden bleiben aber dennoch dir Vorteile eines Block-Elements genießen. Dazu zählen unter anderem volle Unterstützung für Margin. Auf normale Inline-Elemente kann man beispielsweise kein Margin anwenden, das hat schlicht keinen Einfluss.

Beispiel

Oftmals wird inline-block eingesetzt, wenn man ein Grid – auf Deutsch “Gitter-Struktur” – aufbauen will, deren Zellen aufgrund ihres Inhalts eine unbekannte Höhe haben können. Nehmen wir an, wie hätten eine Liste mit sechs Elementen, diese wollen wir zu einem 3×2-Grid zusammenfügen.

HTML

1
2
3
4
5
6
7
8

<ul>
	<li>1</li>
	<li>2<br/>+</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

Zunächst wollen wir das auf althergebrachte Art und Weise machen, mit float:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	overflow:hidden;
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	float:left;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Und da sehen wir auch schon das Problem dieser Lösung: Sobald ein Listenelement höher ist als die anderen, bringt es komplett die Reihenfolge durcheinander. Außerdem muss die Liste gecleared werden, da die Listenelemente floaten. Genau da hilft uns inline-block weiter, aber auch damit muss man zwei Dinge beachten.

1. Dadurch, dass die Elemente nun Inline-Charakter haben, werden Zeilenumbrüche, Einrückungen und Leerzeichen im Code als zu einem Leerzeichen zusammengefasst. Um dem entgegen zu wirken, brauch man nur die li-Tags hintereinander zu schreiben.
2. Ein weiterer Nachteil des Inline-Charakters ist die Tatsache, dass jetzt das Vertical-Alignment greift. Wir müssen also vertical-align:top setzen, damit die Listenelemente nach oben hin bündig zueinander sind.

HTML

1
2
3

<ul>
	<li>1</li><li>2<br/>+</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	/*overflow:hidden;*/
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	/*float:left;*/
	display:inline-block;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
	vertical-align:top;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Somit hätten wir ein schönes Grid, das so umbricht, wie man es von einem Grid erwartet. To be continued..

Tag acht des CSS-Adventskalenders, wie die Zeit vergeht. Heute im Angebot: white-space und wie und warum man es benutzt. Wie immer gibts ein aussagekräftiges Beispiel, wenn ihr allerdings noch ein besseres bzw. überzeugenderes parat habt, dann immer her damit! Und ja ich weiß, ich bin viel zu spät dran damit aber besser spät als.. na ihr wisst schon.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	6.0

white-space hat im Laufe der Zeit einige neue mögliche Werte bekommen, uns geht es aber primär um den Wert nowrap, den jeder relevante Browser schon seit längerem unterstützt. nowrap ermöglicht es uns Zeilenumbrüche zu verhindern. D. h. egal was kommt, Text mit diesem Wert wird auf keinen Fall umgebrochen.

Beispiel

Am einfachsten kann man das durch ein Beispiel zeigen. Manchmal möchte man ein Element in eine Richtung floaten lassen und vergibt eine eher schmale Breite. Innerhalb des Elements steht meinetwegen eine Überschrift und ein Datum, da der Browser nicht weiß, dass es ein Datum ist, bricht er den Text aufgrund der Breite innerhalb des Datums um. Das sieht nicht schön aus, besser wäre es doch, wenn der Text nach der Überschrift umbrechen würde und das Datum zusammen bleibt.

HTML

1
2
3
4

<div class="widget">
	<h3>Überschrift <span class="datum">8. Dezember 2010</span></h3>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

1
2
3
4
5
6

.widget {
	background-color:#eee;
	border:1px solid #aaa;
	padding:10px;
	width:180px;
}

Ergebnis

Wie ihr seht, bricht der Text erst nach der “8″ um, somit wird das Datum auseinander gerissen. Um das zu vermeiden, geben wir jetzt der Klasse “datum” white-space:nowrap.

CSS

1
2
3

.datum {
	white-space:nowrap;
}

Ergebnis

Und siehe da, das Datum bleibt als Ganzes erhalten und die Überschrift muss nun an anderer Stelle umbrechen. Mission accomplished.

Ich weiß, ich weiß.. ich hatte versprochen etwas pünktlicher zu werden und jetzt ist es später als je zuvor. Tut mir leid aber am Geburtstag meiner Mutter gibt es einfach andere Prioritäten als einen Artikel im Blog zu schreiben.

Trotzdem will ich mir jetzt die Zeit nehmen und euch etwas über outline erzählen.

Browserunterstützung

Browser
ab Version	1.5	1.2	7.0	1.0	8.0

Wow, erst ab IE8 wird das unterstützt.. ich musste auch erst zwei mal hinsehen und auf einer zweiten Seite checken aber okay. outline gibt es prinzipiell aus einem Grund. Dieser eine Grund besteht darin, Elemente, die mit der Tastatur (meistens durch Drücken der Tabulator-Taste) sogenannten “Fokus” bekommen, hervorzuheben. Dies geschiet in der Regel durch eine gepunktete Linie, die um das Elemente gezogen wird. Im Prinzip handelt es sich dabei um eine Art Spezialfall von border Da nur klickbare Elemente Fokus bekommen, können wir durchaus outline dazu benutzen einen doppelten Border-Effekt für nicht-klickbare Elemente zu erstellen.

Leider ist outline um einiges restriktiver als es border ist. Es erlaubt nämlich nicht, nur bestimmte Seiten rendern zu lassen, sondern rendert immer alle vier Seiten. D. h. im Klartext: es gibt kein outline-top/-right/-bottom/-left sondern eben nur outline.

Das Wertetripel ist allerdings das Gleiche wie wir es von border her kennen:

1. outline-width, die Linienstärke – angegeben in irgendeiner Maßeinheit
2. outline-style, ein Style-Schlüsselwort wie bspw. dottet, solid, dashed oder groove
3. outline-color, Farbe der Linie; wenn nicht angegeben, nimmt es (zumindest in Firefox) den Wert der Schriftfarbe an

Beispiele

Wie oben schon erwähnt werden wir jetzt mal eine doppelte Border mit Hilfe von outline erstellen:

CSS

1
2
3
4
5
6
7

.widget {
	background-color:#eee;
	border:5px solid #aaa;
	padding:10px;
	outline:5px solid #888;
	width:200px;
}

Ergebnis

Aber Achtung: Outline zählt nicht zum Box-Model, das Margin fängt stets nach der Border an, Outline wird dabei ignoriert. Es hat damit auch keinen Einfluss auf den Gesamtfluss aller anderen Elemente.

Ein weiteres Beispiel wäre einer Box oder einem Widget einen kleinen 3D-Effekt zu verpassen. Dazu hellt man die oberste Pixelreihe auf und dunkelt die anderen ab, um so die Box hervorzuheben.

CSS

1
2
3
4
5
6
7
8

.box {
	background-color:#adf;
	border-top:1px solid #cff;
	border-bottom:1px solid #28a;
	padding:10px;
	outline:5px solid #7ac;
	width:200px;
}

Ergebnis

Ich geb’s ja zu.. man muss schon etwas genauer hinsehen. Aber solche Details sind es schließlich, die ein klasse Design von einem guten Design unterscheiden können. Und mit outline geht das ganz einfach ohne zusätzlichem Markup.

Ach und bevor ich wieder Mecker einstecken muss: Die durch Outline produzierte Border wird derzeit im Firefox nicht von border-radius abgerundet, bei anderen Browsern bin ich mir grad nicht sicher. Und ja, man kann eine doppelte Border auch mit box-shadow herstellen aber das ist noch Cross-Browser-inkompatibler ( ) als man mit outline schon ist.

Bis morgen dann.

Und, hattet ihr was leckeres in euren selbstverständlich geputzten Schuhen? Wenn nicht, gibts hier wieder etwas, was eure Laune eventuell anheben kann. Hinter Türchen Nummer sechs haben wir heute overflow:hidden, das viele im Zusammenhang mit Verstecken von Inhalt bzw. Scrollbalken kennen werden. Es gibt aber noch einen anderen Anwendungsfall…

Browserunterstützung

Browser
ab Version	1.0	1.1	4.0	1.0	4.0

Die Eigenschaft overflow wird von allen Browsern beherrscht, im IE6 gibts allerdings ein kleines Problem, wenn der Wert visible gesetzt ist. Demnach vergrößert er das Element, damit der Inhalt hinein passt. Dadurch verhalten sich height/width wie min-height/min-width. Uns interessiert aber nur ganz speziell der Fall von overflow:hidden und da gibts keine Probleme.

Normalerweise setzt man diese Eigenschaft ja dazu ein, um überstehenden Text auszublenden oder um zu verhindern, dass Scrollbalken erscheinen. Ein schöner Nebeneffekt ist aber, dass Elemente mit overflow:hidden ihren gefloateten Inhalt “clearen”.

Beispiele

Am besten wir schauen uns das mal an einem Beispiel an. Folgender Aufbau: Ein Container hat eine nach links floatende Box als Inhalt. Dadurch fällt der Container in sich zusammen und alle nachrückenden Inhalte rücken nach oben.

HTML

1
2
3
4

<div class="container">
	<div class="box">Box</div>
	Container
</div>

CSS

1
2
3
4
5
6

.box {
	float:left;
	height:100px;
	margin-right:10px;
	width:100px;
}

Ergebnis

Seht ihr was ich meine? Das sieht doof aus und oftmals will man das gar nicht.

Um das zu vermeiden, kann man jetzt dem nachrückenden Inhalt z. B. ein clear:both geben. Das löst zwar das Problem mit dem Text neben der Box, aber nicht die Höhe unseres Containers. Jetzt kommt aber overflow:hidden ins Spiel, das wir dem Container verpassen müssen:

CSS

1
2
3

.container {
	overflow:hidden;
}

Ergebnis

Siehe da, alles bestens, die floatende Box wird wieder komplett vom Container umschlossen. Dabei brauchen wir nicht einmal zusätzliches Markup wie beispielsweise ein Clear-Div.

Short and simple, schönen Tag noch und bis morgen.

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

1. Teil #1 (XHTML+CSS, Syntax)
2. Teil #2 (Syntax, Selektoren, Box-Model)

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:

1. none das Element wird nicht angezeigt (Element + Inhalt verstecken)
2. inline das Element wird als Inline-Element behandelt
3. block das Element wird als Block-Element behandelt
4. 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
	<head>
	<!-- meta Elemente, Verlinkung auf CSS Datei -->
	</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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#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:

1. left Element “fließt” nach links
2. right Element “fließt” nach rechts
3. 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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#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:

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

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

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

1. 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)

IE6 unterstützt keine Attribut-Selektoren.
Versuche einfach andere Selektoren zu benutzen (Klassen- oder ID-Selektoren) oder dein HTML 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 HTML 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:

1
2
3
4
5
6
7

.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:

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:

1
2
3
4

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:

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:

1
2
3
4

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 HTML 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:

1
2
3
4

<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:

1
2
3
4
5
6

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:

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

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

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:

1. (sehr) gute (X)HTML-Kenntnisse (alle gängigen Tags, W3C-konform)
2. Nerven aus Stahl (Stichwort IE6-Optimierung)
3. Fähigkeit zu Lesen – auch die englische Sprache – und zu Denken
4. 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:

1. Browser Default
2. externes Stylesheet
3. internes Stylesheet
4. 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.

1
2
3
4
5
6
7
8
9
10

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:

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

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