CSS
Homepage selber erstellen
Sie haben jetzt ihr HTML Gerüst erstellt. Für alle die hier einsteigen, noch einmal das HTML Gerüst.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Homepage selber erstellen</h1>
</div>
<div id="nav">
<ul>
<li><a href="page1.html" title="Page one">Page1</a></li>
<li><a href="page2.html" title="Page two">Page2</a></li>
<li><a href="page3.html" title="Page three">Page3</a></li>
</ul>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>
<div id="footer">
<a href="kontakt.html" title="zum Kontakt">Kontakt</a>
<a href="impressum.html" title="zum Impressum">Impressum</a>
</div>
</div>
</body>
</html>
Was sie hier lernen ist erst einmal der Aufbau von CSS. Sie können diesen Teil auch überspringen und sich gleich das CSS Gerüst ansehen unter CSS > CSS Gerüst.
Nun erst mal ein bisschen Theorie.
CSS ist die Abkürzung für Cascading Style Sheets. Das bedeutet so viel wie fallen. Sie können sich auch einfach merken das es etwas mit Vererbung im Großen und Ganzen zu tun hat. Tiefere Hintergründe finden sie im Web unter Wikipedia. Das CSS gibt dem HTML seine Struktur. Sie können über CSS bestimmte HTML Tags ansprechen und verändern. Dadurch können sie Design und Content trennen. Der Aufbau ist eigentlich ganz einfach.
Wir haben 4 verschiedene Zuweisungen. Einmal die Identität, Klasse, HTML Tag und Attribute.
#container
.class
body
[title]
Dabei sollten sie sich merken das eine Identität(#) nur einmal in einem HTML Dokument vorkommen darf. Eine Klasse(.) kann mehrmals verwendet werden.
Wie das alles jetzt zusammenspielt will ich ihnen an einem Beispiel zeigen.
#identity {width: 100px; height: 100px; background-color: #C00;}
.class {width: 100px; height: 100px; background-color: #C00; float: left; display: inline;}
Hier wird bei allen drei Kästen die selbe Klasse verwendet.
a:link, a:visited, a:active {text-decoration: none; color: #C00;}
Hyperlink
wenn sie die :hover Pseudoklasse extra ausweisen, können sie eine andere Farbe bestimmen die beim darüber fahren der Maus erscheint. Fahren sie über den oberen Link und sie sehen wie sich die Farbe ändert.
Hier der Code dazu.
a:hover {color: #999;}
Vererbung
.class a {color: #FFF;}
Der gleiche Hyperlink ist jetzt weiß, obwohl wir ihn vorher schon definiert haben mit Rot.
Das funktioniert, weil dieser Hyperlink jetzt in der Klasse .class sitzt. Bei der Zuweisung über CSS haben wir gesagt, gebe allen Anker-Tags a die in der Klasse .class sitzen die Farbe Weiß (#FFF). Wenn sie das verstanden haben, sind sie gerüstet für ihr eigenes CSS. Üben sie zum Verständnis an ein paar Beispielen. Erstellen sie sich ein HTML Gerüst und eine CSS Datei. Binden sie dann die CSS Datei in die HTML Datei ein im head.
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
Schauen sie sich dann den HTML Quellcode an und überlegen sie sich, wie sie an das zu verändernde Element herankommen. Wenn sie später das CSS Gerüst erstellen, werden einige Dinge auch klarer verständlich für sie.
Doch zuvor noch ein paar Positionen. Positionen werden oft eingesetzt aber nicht verstanden. Deswegen will ich versuchen, dass sie es verstehen und richtig einsetzen können.
/*Relative Position bleibt im Fluss und alle Elemente herum merken nichts davon.*/
#relative {width: 100px; height: 100px; position: relative; background-color:#C00;}
/*Absolute Position wird aus dem Fluss genommen und alle folgenden Elemente rutschen nach.*/
#absolute {width: 100px; height: 100px; position: absolute; margin: -10px 0 0 300px; background: url(../images/transparent-sub.png);}
Merken sie sich eins ein absolutes Element kann in einem relativen positioniert werden.
Ebenso hier noch der Unterschied zwischen Block / Inline Elementen
<div style="display: inline; color:#FFF; background-color:#C00;">
Ich bin ein Inline Element</div> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br />
<div style="display: block; color:#FFF; background-color:#C00;">
Ich bin ein Block Element</div>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br />
Wie sie sehen gehen Block Elemente über die komplette Seite, Inline Elemente nehmen nur den Bereich ein so lang wie sie sind. Zum Beispiel eine H Überschrift ist ein Block Element. Strong wäre ein Inline Element.
Als nächstes werden sie die CSS Datei zu dem HTML Gerüst erstellen, gehen sie dafür auf CSS > CSS Gerüst.
Anhang zu diesem Thema:
- CSS-Datei
- CSS-Gerüst
- Farbcodes
Wer schreibt bei Homepage selber erstellen
Mein Name ist Stefan Steinbach und ich bin selbständiger Webdesigner und Fotograf. Mit Homepage-selber-erstellen.eu will ich ihnen helfen, dass sie ihre eigene Homepage erstellen können.
Weitere Projekte
Fotografieren lernen
