In den ersten beiden Lektionen habt ihr die Divbenennung Id kennengelernt, womit ihr einer ID einen eindeutigen Namen gebt. Was macht ihr aber jetzt wenn ihr eine Div mit genau den gleichen Eigenschaften haben möchtet? Einfach alle Div-Attribute im Stylesheet kopieren und unter einem neuen Div Namen einfügen? Warum so kompliziert? Nutzt doch einfach das Element “class” anstatt dem Element ID. Der Unterschied zwischen ID und Class ist, dass ihr Classen mehrmals innerhalb eines Html-Dokumentes aufführen könnt, ohne dass dieses die validität eurer Seite stört. Das beste an der ganzen Geschichte ist, dass ihr euch nicht unbedingt entscheiden müsst zwischen Klassen und Id´s, sondern beide gleichzeitig in einem Element verwenden könnt, dazu aber später. Durch diesen entscheidenen Vorteil könnt ihr euren Id´s zusätzlich die Werte einer Klasse übergeben wie Schriftfarbe und den üblichen Css-Klammotten.

Wenn ihr eine Klasse in eurem Stylesheet erstellen möchtet, dann nehmt einfach statt dem “# ” ein “. ” So sollte dann in etwa euer Stylesheet aussehen:

.bluebig
{
font:18px Arial;
color: blue;
}

Wie ihr seht eigentlich nicht schwer, jetzt zeige ich euch noch wie man das ganze in unser bestehendes Html-Dokument einbindet.

<div id="banner">
<div id="bannert">
            BANNER</div>
</div>
<div id="navi">
<div id="navit">
          Navigation</div>
</div>
<div id="content">
<div id="contentt">
<div class="bluebig">
              text</div>
</div>
</div>

Jetzt wird es in manchen Bereichen so langsam unüberstichtlich, weshalb ich jetzt an dieser stelle die seperater Erstellung eines Divs für den blauen Text vermeiden will und euch nun zeige wie man Klassen mit Ids kombiniert

Jetzt wird es in manchen Bereichen so langsam unüberstichtlich, weshalb ich jetzt an dieser stelle die seperater Erstellung eines Divs für den blauen Text vermeiden will und euch nun zeige wie man Klassen mit Ids kombiniert:

<div id="content">
<div id="contentt" class="bluebig">
          TEST-TEXT</div>
</div>

Das Ergebnis ist das gleiche, nur Ihr habe a)weniger Zeilen benutzt und b)es für euch selbst wesentlich übersichtlicher gemacht.

Glückwunsch ihr habe eure erste Klasse sinnvoll verwendet

Im Rahmen dieses kleinen CSS Workshops werdet ihr Grundlegende Techniken erlernen, um diese Informationen für einen guten Start als angehender Webdesigner zu nutzen. Hier lernt ihr von der Pike auf worauf es bei einer richtigen CSS-Programmierung geht.

Der Grund weshalb dieser Workshop entstanden ist, dass einem als Anfänger im Bereich Webdesign bei vielen Informationsseiten noch einige Fragen offen bleiben, die ich hoffe im Rahmen dieses Workshops beantworten zu können, denn ich habe selbst am Anfang einige Probleme gehabt, wo ich für einen einfachen CSS Workshop wie diesen dankbar gewesen wäre.

Solltet ihr Themenwünsche für den CSS Workshop haben, Themen die noch nicht mit im Wokrshop bearbeitet wurden, dann mailt mir einfach und gebt mir eure Wünsche durch, ich versuche dann diese zeitnah umzusetzen und in den CSS Workshop mit aufzunehmen.

Bestandteile des CSS Workshops

• - Das Grundgerüst
• - Stylesheet
• - Punktesystem des Stylesheets
• - Verlinkungen
• - Hintergründe
• - Kommentare
• - Das Boxmodell
• - ID´s und Klassen
• - Textformatierungen
• - Listenelemente
• - Flash valide einbinden
• - Überschriften
• - Divs zentrieren
• - Größeneinheiten

Ihr findet den CSS Workshop auch in der Navigation rechts, bei Fragen zum Workshop oder ergänzungen freue ich mich über Kommentare in den jeweiligen Bereichen des CSS Workshops.

Der Start jeder Webseite sollte ein gut optimierter Header sein, jetzt fragt sich der eine oder andere vielleicht was ein Header ist. Ein Header ist eine Art Unsichtbare Kopfzeile im Kopf der Webseite. Im Header übergebt ihr dem Browser und den Suchmaschinen wichtige Informationen über eure Webseite. Hier ein Musterbeispiel für den Header aus unserem Code-Bereich:

Jetzt gehen wir einmal den Header Schritt für Schritt durch, zumindest die relevanten Teile.

Hier übergebt ihr den Webseiten den Title eurer Webseite, der Title wird eingeschlossen von einem öffnenden title-Element und einem schließendem /title-Element. Dieser Title wird auch in den Suchergebnissen bei Suchmaschinen wie Google als Überschrift angezeigt.

In diesem Bereich übergebt ihr dem Browser die Sprache die Ihr in eurer Website benutzt und verweist ihn an die entsprechende Zeichenkodierung, dies ist besonders wichtig damit alle Sonderzeichen einer Sprache erkannt werden, wie im Deutschen das ß,ä,ö,ü und viele weitere.

In der Description, was zu deutsch Beschreibung heist, übergebt ihr vorallem Suchmaschinen relevante Informationen über eure eigene Homepage, diese Beschreibung taucht zu meist auch bei den Suchmaschinen als Beschreibender Text unter der Überschrift auf. Ein kleiner Tipp von mir, die Description sollte maximal um die 160 Zeichen lang sein.

Die Keywords (Schlüsselwörter) übergeben an die Suchmaschinen Informationen in welcher Kategorie eure Homepage gehört. Aber Achtung, verwendet nicht mehr als etwa 6 Keywords, ich habe bereits Homepages gesehen die über 300 Keywords aufgewiesen haben und deshalb von den Suchmaschinen aus dem Index(Auflistung aller Webseiten in der jeweiligen Suchmaschine) entfernt wurden, da es sich hierbei um das sogenannte Keyword-stuffing handelt. Zu trennen sind die Keywords jeweils mit einem “;”.

Die restlichen Angaben sind mehr oder weniger freiwillig. Jetzt müsst ihr euren Header nur noch wieder schließen, und zwar mit einem “</head>”

In diesem Bereich bindet ihr euren Stylesheet ein. Kurz zur Erklärung für Einsteiger, ein Stylesheet ist eine externe Datei in der ihr das Aussehen eurer Homepage steuert, im Stylesheet werden Dinge wie Schriftgrößen, Schriftfarben, Textfluss, Größe bestimmter Bereiche und vieles mehr festgelegt. Der Sinn dieser Auslagerung ist einfach, ihr haltet eure Homepage übersichtlich und für Suchmaschinen auslesefreundlicher. Deshalb muss im Head-Bereich der Stylesheet für eure Seite verlinkt werden und zwar mit

Der nächste Schritt ist nun euer Favicon einzubinden, ein Favicon ist ein kleines Symbol was oben links neben der Adresszeile eingeblendet wird, ist zwar nicht zwingend Notwendig aber auf jeden Fall benutzerfreundlicher, da dieses Symbol auch im Lesezeichen oder im jeweiligen Tab eures Browsers abgebildet wird. Das Ganze sieht dann so aus:

Das war der erste Teil eures Grundgerüstes.

Wenn es um Abstände von Texten oder Divs geht, dann handelt es sich hierbei meistens um Bestandteile des Boxmodells. Bestandteile des Boxmodells sind die Befehle “margin”, “padding”, und “border”. Diese Elemente Regeln Abstände innerhalb und ausserhalb eines Divs, ausgenommen hiervon ist border, dieser Befehl verschaft einem Div einen Rahmen, der für jede Seite des Divs seperat eingestellt werden kann. Um euch die Zusammenhänge zwischen Margin und Padding deutlich zu machen hier einmal das Boxmodell:

Margin sind die Abstände die außen ausserhalb des Divs bestehen und padding sind Abstände die innerhalb einer Div bestehen. Border hingegen ist der Rahmen des Divs selbst.

Jeder dieser Befehle hat noch zusätzliche Attribute wie left, right, top, und bottom. Diese Attribute steuern auf welcher Seite die jeweiligen Abstände bzw. der Rahmen erscheinen soll, werden sie nicht angegeben wird der jeweilige Pixelabstand für alle Seiten genutzt.

/* Hier einmal ein Beispiel für Margin:*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
 
/* Und hier Beispiele für Padding:*/
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
 
/* Und ein weiteres für Border:*/
border-top: 10px;
border-right: 10px;
border-bottom: 10px;
border-left: 10px;

Border hat hierbei noch weitere Attribute die die Eigenschaften des Rahmens einstellen.
Ein Beispiel hierfür ist:

border-bottom:1px solid #dadada;

Das “1px solid” dient der regulierung der Dicke des Rahmens, der Wert nach der # ist schlichtweg eine Farbangabe.

Bis jetzt habt ihr nur eine leere Seite erhalten, jetzt geht es daran eure Lehre Seite zu füllen. Ale erstes eröffnet ihr ein alles umschließendes Body Element, so dass euer HTML Dokument wie folgt aussieht:

        TEST

Jetzt erscheint euer TEST Text erstmalig auf dem Bildschirm.
spätestens jetzt solltet ihr euch eine kleine Skizze anfertigen, wie eure Homepage aussehen soll. Ich habe für den Anfang nur eine ganz einfache Webseite angedacht.

Als erstes solltet ihr wissend das in einer CSS-Programmierung die Homepage aus mehreren “Kisten” besteht. Innerhalb dieser Kisten werdet ihr im Laufe dieser Übung euren Inhalt einbringen, die Kisten belibig hoch und breit machen, sowie noch einiges mehr austesten. Diese Kisten nennt man “Divs”. Divs werden mit einem entsprechenden Element geöffnet und wieder geschlossen, mit dem Element Div. wir werden jetzt ersteinmal 3 Divs erstellen. Damit ihr diesen Kisten bestimmte Attribuzte zuordnen könnt, geben wir Ihnen einen Namen. Wir erstellen jetzt eine Div Navi einen Div Banner und einen Div Content.

Das ganze sieht dann in etwa so aus

Wie ihr gesehen habt, benennt man einen Div mit dem Befehl “div id”. Jetzt wird es Zeit das ihr euren Div Formatiert. Dafür müsst ihr allerdings ereinal eine CSS-Datei erstellen.
Damit diese zu der im Header eingebauten Datei passt, nennt ihr Sie “stylesheet.css”

* {margin:0; padding:0;}
* img { border:0; }
 
body {
  font:12px Arial, Verdana, Helvetica, sans-serif;
  color: #515050;}

Hiermit legt ihr ersteinmal die Schriftart fest, sowie die nötige Schriftfarbe. Die Größe wird definiert mit den Wert “12px”, die Schriftarten mit dem folgendem “Arial, Verdana, Helvetica, sans-serif”, sowie die Schriftfabe mit “color: #515050;”.Jetzt habt ihr für euer gesamtes Layout einen Schrifttyp,Schriftgröße und die Schriftfarbe festgelegt, welche jetzt als Standart verwendet werden.

Jetzt wird es Zeit die Divs zu definieren, wir arbeiten in diesem beispiel mit %-Werten um euer Layout auf jede Bildschirmgröße anzupassen. Ersteinmal hier die Synthax des Banner-Divs.

#banner
{
width:100%;
height:150px;
background-color: #f3c600;
}

Hierbei regelt width die Breite eures Divs und height die Höhe. Background-color regelt hierbei die Hintgergrundfarbe, der Wert mit der Raute ist eine Farbkennzeichnungsnummer, diese könnt ihr auf verschiedenen Webseiten nachschaun. Jetzt regeln wir noch die restlichen Bereiche:

#content
{
position: absolute;
left:10%;
top:150px;
width:90%;
height:600px;
background-color: red;
}
#navi
{
width:10%;
height:800px;
background-color: #f3d400;
}

Was wir jetzt gemacht haben ist an sich nichts neues, bis auf die Tatsache das wir größtenteils mit Prozentwerten-gearbeitet haben, ist aber nichts atemberaubendes. Intressanter wird für ein sein, dass ich 3 neue Elemente im Bereich Content eingebracht habe. Diese 3 Elemente gehören quasi zusammen, denn in dem ich das Element “absolute” verwende entnehme ich die Div aus dem normalen Fluss an dem Sie sich automatisch anordnet und muss nun eine gewisse Position festlegen, an der die Div beginnen soll. Hierfür dienen die Elemente Top und left, es gibt hier auch mehr Elemente auf die ich hier aber nicht weiter eingehe.

Euer Ergebniss müsste etwa so aussehen:

Html

<div id="banner">
      BANNER</div>
<div id="navi">
      Navigation</div>
<div id="content">
      CONTENT</div>

CSS

* {margin:0; padding:0;}
* img { border:0; }
 
body {
  font:12px Arial, Verdana, Helvetica, sans-serif;
  color: #515050;}
 
#banner
{
width:100%;
height:150px;
background-color: #f3c600;
}
#content
{
position: absolute;
left:10%;
top:150px;
width:90%;
height:600px;
background-color: red;
}
#navi
{
width:10%;
height:800px;
background-color: #f3d400;
}

Was euch jetzt auffallen wird ist, dass eure Texte direkt Links am Divrand “kleben”. Das sieht wenig gut aus noch ist es schlecht zu lesen. Hier könnt ihr nun zum Beispiel zusätzliche Divs erstellen und diese innerhalb eurer Hauptelemente integrieren. Ich wähle hierfür “bannert”, “navit”, und “contentt”, wie ihr diese benennt ist eigentlich egal, ihr solltet diese nur einfach zuordnen können um das ganze übersichtlich zu halten.

Html

<div id="banner">
<div id="bannert">
            BANNER</div>
</div>
<div id="navi">
<div id="navit">
          Navigation</div>
</div>
<div id="content">
<div id="contentt">
          CONTENT</div>
</div>

CSS

* {margin:0; padding:0;}
* img { border:0; }
 
body {
  font:12px Arial, Verdana, Helvetica, sans-serif;
  color: #515050;}
 
#banner
{
width:100%;
height:150px;
background-color: #f3c600;
}
#bannert
{
padding-left:10px;
padding-top:10px;
width:99%;
height:140px;
}
 
#content
{
position: absolute;
left:10%;
top:150px;
width:90%;
height:600px;
background-color: red;
}
 
#contentt
{
padding-left:10px;
padding-top:10px;
position: absolute;
width:88%;
height:590px;
}
 
#navi
{
width:10%;
height:800px;
background-color: #f3d400;
}
#navit
{
padding-left:10px;
padding-top:10px;
width:8%;
height:790px;
}

Die Abstände könnt ihr natürlich individuell verändern. Herzlichen Glückwunsch ihr habt euer erstes CSS-Homepage-Gerüst erstellt.

Ein häufiger Fehler der häufig von Anfängern im Bereich CSS gemacht wird, ist dass für alles mögliche Div-ids erstellt werden. Das mag zwar funktionieren, ist aber für euch extrem unübersichtlich. Besser ist es wenn ihr bestimmte Divs statt mit einer Div mit einer Klasse belegt. Der Vorteil hierbei ist ganz simpel, Klassen könnt ihr mehrfach auf einer Seite verwenden, ID´s hingegen nicht aufgrund der fehlenden Validität.

In den Klassen könnt ihr dann verschiedene Elemente zusammenfassen, wie Schriftgrößen, Schriftfarben und vieles mehr. Durch die Verwendung der Klassen wird euer Stylesheet auch wesentlich übersichtlicher, was euch die Einarbeitungszeit, wenn ihr das Projekt einmal wieder aufgreifen solltet verkürzt.

Hier mal ein kleines Beispiel wie ein Div-Chaos aussehen kann, wenn ihr zum Beispiel eine Galerie ohne Tabellen mit einem CSS-basierten Rahmen einbauen wollt:

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
27
28
29
30

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  </head>
  <body>
<div id="galery">
    <div id="rahmen1">
       <div id="picture1">
         <a href="galerie/bild1.jpg" title=""><img src="galerie/bild1_klein.jpg"  alt="" /></a>
       </div>
    </div>
 
 
    <div id="rahmen2">
       <div id="picture2">
         <a href="galerie/bild2.jpg" title=""><img src="galerie/bild2_klein.jpg"  alt="" /></a>       
       </div>
    </div>
    <div id="rahmen3">
       <div id="picture3">
         <a href="galerie/bild3.jpg" title=""><img src="galerie/bild3_klein.jpg"  alt="" /></a>      
        </div>
    </div>
 
</div>
 
  </body>
</html>

Wie ihr seht habt ihr für jedes einzelne bild einen eigenen Div eröffnet, was in diesem Fall völlig unnötig ist. Auf diese Weise habt ihr für das ganze 6 verschiedene Divs angelegt, die im Prinzip alle identische Eigenschaften haben. Deshalb hier lieber mit Klassen arbeiten wie im folgendem Beispiel.

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
27
28
29
30

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  </head>
  <body>
<div id="galery">
    <div class="rahmen">
       <div class="picture">
         <a href="galerie/bild1.jpg" title=""><img src="galerie/bild1_klein.jpg"  alt="" /></a>
       </div>
    </div>
 
 
    <div class="rahmen">
       <div class="picture">
         <a href="galerie/bild2.jpg" title=""><img src="galerie/bild2_klein.jpg"  alt="" /></a>       
       </div>
    </div>
    <div class="rahmen">
       <div class="picture">
         <a href="galerie/bild3.jpg" title=""><img src="galerie/bild3_klein.jpg"  alt="" /></a>      
        </div>
    </div>
 
</div>
 
  </body>
</html>

Die Dazugehörige CSS Datei kann dann so aussehen

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

.rahmen
{
 
width:214px;
height:214px;
background:white;
border: 1px solid grey;
margin:10px;
 
}
 
.picture
{
 
margin-left:7px;
margin-top:7px;
width:200px;
height:200px;
background:black;
}

Auf diese Art braucht ihr statt 6 Divs nur 2 Klassen, da identische Elemente vorhanden sind.

Häufig bietet es sich bei langen Texten an am anfang des Texte ein Inhaltsverzeichnis zu integrieren, weches die Themengebiete des aktuellen Html-Dokumentes auflistet.  Hierbei ist es möglich bestimmte Textpassagen am besten in einer Div mit einer entsprechenden ID zu versehen, so zum Beispiel bei einem Text über einem Stylesheet die ID stylesheet zu vergeben.

An dieser Stelle ein Tipp für diejenigen die sich noch nicht mit dem Thema Klassen und Id´s beschäftigt haben, nähere Informationen findet ihr hier: ID´s und Klassen

Wenn ihr nun diese Id´s entsprechend innerhalb eures Inhaltsverzeichnisses verlinkt, erhaltet ihr sogenannte Anker- oder Sprungpunkte. Durch einen Klick auf die Verlinkung “springt” ihr zu dem jeweiligen Div.

Was ihr beachten solltet, ist dass ihr die Verlinkung zur Div mit einem # ankündigen müsst.

Ein Beispiel findet ihr hier:

1
2
3

<ul>
<li><a href="#stylesheet">Stylesheet</a></li>
</ul>

Die Elemente ul und li gehören allerdings zu einer Liste, für intressierte gibts hier mehr.

Id´s und Klassen, sind in CSS nicht nur für Div-container zu gebrauchen, ihr könnt im Prinzip nahezu alles mit einer Klasse versehen, was natürlich eingige Vorteile für euer Projekt bringen kann, so müsst ihr für einzelne Bilder die Ihre im Prinzip gleich gestallten wollt nicht unbedingt extra dafür gedachte Div-Container erstellen, sondern könnt diese Bilder mittels einer Klasse direkt ansteuern.

Im Prinzip macht ihr hierbei nichts anders als bei den Div-Containern, so fügt ihr bei einem Bild einfach nach Abschluss des “src” Elementes noch ein “class” oder “Id” Element hinzu und schön könnt ihr die Bilder direkt ansteuern. Dieser Vorgang funktioniert im übrigen auch mit den Überschriften H1 – H6, wodruch ihr auf ebenfalls nutzlose Div-Container aus eurem Quellcode entfernen könnt, was euch einiges an Quellcode in der HTML Datei ersparrt und dazu nur wenig Platz in eurem Stylesheet erfordert.

Ihr solltet euch also stets bei einem Projekt überlegen, ob ihr Formatierungen für Bilder zum Beispiel, auf einer Homepage mehrfach verwenden möchtet, so zum Beispiel in einer Bildergalerie.