CSS Einsteiger Tutorial #1

von

CSS Einsteiger Tutorial #1

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

Die hier könnten dich auch interessieren…

nach oben