CSS lernen für Anfänger

CSS ist für das Aussehen einer Webseite verantwortlich, mit CSS (Cascading Style Sheets) wird z.B. die Schriftfarbe oder das Hintergrundbild festgelegt. HTML dagegen strukturiert den Inhalt.

CSS in HTML einbinden

Es gibt 3 verschiedene Möglichkeiten CSS in HTML einzubinden. Die erste Möglichkeit ist, es direkt im jeweiligen Tag zu schreiben.

<h1 style=“color:blue;“>Eine blaue Überschrift</h1>

Die zweite Möglichkeit besteht darin es im <head> – Tag eines Dokuments zu schreiben.

<head>
<style>
h1 { color: blue; }
</style>
</head>

Und die dritte und beste Möglichkeit ist das CSS in ein externes Dokument zu schreiben, dieses wird dann mit der Endung .css abgespeichert. Dann wird es im <head> des HTML – Dokuments für das es angewendet werden soll eingebunden mit:

<link rel=“stylesheet“ type=“text/css“ href=“deinedatei.css“>

Schrift formatieren mit CSS

So wie man es auch aus Word oder anderen Textverarbeitungsprogrammen kennt, kann man auch mit CSS die Eigenschaften von Schriften ändern.

Schriftfarbe – color: z.B. red oder ein Hexadezimalwert #000000

Schriftart – font-family: z.B. Helvetica, Arial, sans-serif

Schriftgröße – font-size: z.B. 20px

Schriftgewicht – font-weight: z.B. bold

Schriftstyle – font-style: z.B. italic

Der Code für eine grüne Überschrift könnte so aussehen, wichtig ist das Semikolon am Ende jeder Eigenschaft nicht zu vergessen.

h1 {
color: green;
font-family: Arial;
font-size: 15px;
font-weight: bold;
}

Hintergrundfarbe oder Hintergrundbild festlegen

Eine Hintergrundfarbe legt man ganz einfach mit background-color: #FFFFFF; fest und ein Hintergrundbild wird mit background-image: url(deinbild.jpg); eingebunden.

body {
background-color: beige;
}

Abstand und Rahmen in CSS

Um einen Abstand zwischen den Elementen zu erzeugen benutzt man margin, das ist der Außenabstand und padding bedeutet Innenabstand. Ein padding benutzt man z.B. wenn der Text in einer Infobox nicht am Rand kleben soll. Man kann auch nur den Abstand nach oben oder nach rechts setzen, dazu benutzt man padding-top (oben), padding-right (rechts), padding-bottom (unten) und padding-left (links). Das funktioniert genauso mit margin.

div {
padding: 10px;
margin-left: 10px;
}

Mit border kann man einen Rahmen um einen Kasten erzeugen. Die Eigenschaften die man bestimmen kann sind: Farbe, Dicke des Rahmens und Aussehen (durchgehend, gestrichelt).

div {
border: 5px solid black;
}

Es gibt solid (durchgehend), dashed (gestrichelt), dotted (gepunktet) und noch einige weitere Styles findet man hier auf wiki.selfhtml.

Listen und Links stylen

Listen stylen funktioniert wie bei den anderen Elementen auch. Man kann einmal die komplette Liste stylen und das einzelne Listenelement <li>. Das ist bei geordneten <ol> und ungeordneten <ul> Listen gleich.

ol {
background-color: red;
font-size: 20px;
}

ol li {
color: white;
}

Beim Stylen von Links sollte man die verschieden Zustände beachten. Man kann für alles verschiedene Eigenschaften festlegen, das z.B. sich die Farbe ändert beim Überfahren oder ein besuchter Link anders aussieht als ein noch nicht besuchter. Es gibt die Zustände a:link (normaler Link), a:hover (beim Überfahren), a:active (aktiver Link), a:visited (besuchter Link).

a:link {
background-color: black;
}

a:hover {
background-color: green;
}

Damit erzeugt man einen Link der schwarz ist und beim Überfahren mit der Maus seine Farbe zu grün verändert.

Klassen und IDs in CSS verwenden

Bisher wurden immer alle Elemente eines bestimmten Tags verändert, z.B. alle <p> Tags, wenn man aber nur einen bestimmten <p> Tag verändern will benutzt man eine ID <p id=“idname“>Text</p>.
Eine ID benutzt man nur einmal pro Dokument, will man mehrere Tags verändern, aber nicht alle, dann nimmt man eine Klasse <p class=“classname“>Text</p>. Im CSS-Dokument werden IDs mit #idname und Klassen mit .classname angesprochen.

Mehr CSS lernen …

Mehr über CSS gibt es in dem Buch: HTML5 und CSS3: Das umfassende Handbuch* vom Rheinwerk Verlag oder im Internet unter SELFHTML und W3School.com

* Affiliatelink / Werbung