Wenn ihr mit eurem Stylesheet arbeitet solltet ihr euch stets einem bewusst sein, ein Stylesheet beurteilt Klassen, Pseudoklassen, Id´s und Attribut-Styles nach verschiedenen Gewichtungen. Diese Gewichtungen entscheiden welches Element wirksam wird. So können zum Beispiel im Body festgelegte Farben, Schriften etc. “überschrieben” werden, wenn in einer ID zum Beispiel ein abweichender Wert angegeben wird.

Kleines Beisiel:

1
2
3
4
5
6
7
8
9

body
{
background:black;
}
 
#content
{
background:white;
}

Hier gillt dann zwar für den gesamten body das der Hintergrund Schwarz sein soll, jedoch durch die abweichende Eigenschaft in der ID Content, wird die Background Rigenschaft vom Body, nur für Inhalte im Div “content” stehender Elemente mit der Eigenschaft Background white überschrieben. Also werden die Eigenschaften ersetzt.

Um euch das mit der Punkteverteilung etwas besser zu erklären, zeige ich euch hier einmal eine Punktetabelle mit der Ihr die einzelnen Gewichtungen nachvollziehen könnt. Durch diese Punkteverteilung wird dem Stylesheet angegeben welche Elemente über andere Elemente übergeordnet sind und dessen Eigenschaft andere dominiert.

Das nächste was ihr über diese Punkteverteilung wissen solltet ist, dass durch die kombination dieser Eigenschaften, auch die Punktbewertungen kombiniert, oder bessergesagt addiert werden. Auch hierfür ist das beste einfach mal in die folgende Tabelle schauen und verstehen.

Als erstes wird bei euch wahrscheinlich die Frage aufkommen was ein Stylesheet ist. Ein Stylesheet ist eine externe Auslagerung gewisser Elemente in eine Datei. Dies hat zur Folge das euer Quellcode wesentlich schlanker ist, somit einfacher zu bearbeitet ist und auch für Suchmaschinen um einiges interessanter wird.

Nicht zuletzt solltet ihr den Stylesheet allerdings nutzen um euch die erstellung einer Homepage möglichst einfach zu machen, so könnt ihr bestimmte Eigenschaften zu Klassen zusammenfassen, Divs vorformatieren, so dass diese Einheitlich sind und unerwünschte Bildelemente wie Hintergrundbilder nicht im normalen Quellcode anzeigen lassen.

Ein Tipp den ich euch für Bearbeitungen geben möchte, ist dass ihr direkt im Kopf des Stylesheets eine kleine Deklaration einsetzt, mit der Ihr auch noch Monate später etwas anfangen könnt.

Zum Beispiel:

1
2
3

/********* Projekt CSS Roots ***********/
/*** Abweichende Einstellungen in den Bereichen "breitenzusatz","höhenzusatz" da Seite eine abweichende Contentmenge aufweist. ***/
/*** Footer ist variabel eingestellt und benötigt keine weitere konfiguration **/

Hier fasst Ihr euch die wichtigsten Dinge einfach kurz zusammen und habt einen leichteren Wiedereinstieg in euer Projekt.

Wie der eine oder andere vielleicht schon bemerkt hat, gibt es in CSS mehr als eine Größeneinheit. Die Einheit die allen bekannt sein sollte sind Pixel (px). Jedoch gibt es noch weitere einheiten die ich kurz vorstellen möchte, um euch die Unterschiede aufzuzeigen.

Pixel:

Pixel ist die bekannteste einheit und verhält sich relativ in zur Bildschirmauflösung.

Ein Pixel = ein Pixel

Anwendungsbeispiel:

border: 5px;

em

Ex ist eine Einheit die auf eine bestehende Größe aufbaut, wie zum Beispiel bei der Schriftart. So wird aus einer Schriftgröße mit 10 Pixeln, beim Einsatz der Einheit em mit dem Wert 1.4 eine Schriftgröße mit 14 Pixeln

Bei 10 px und 1.4em = 14 Pixel

Anwendungsbeispiel:

body
{
font-size:10px;
}
#content
{
font-size: 1.4em;
}

Desweiteren gibt es noch einige absolute Längenangaben, welche ihr jedoch stets mit bedacht einsetzen solltet, denn ihr wisst nie welche Bildschirmauflösungen eure Besucher haben, wodurch ungewollte Scrollbalken entstehen können.

Inch:

In ist eine Einheit aus dem amerikanischem und steht für Inch. Ein Inch ist exakt 2,54cm lang, was diese Angabe für den normalen Gebraucht relativ unbrauchbar macht.

1in = 2,54cm

#content
{
height: 10in;
width: 5in;
}

Centimeter und Millimeter:

Ich glaube zu diesen beiden Angaben ist nicht viel zu sagen, daher hier nur das Anwendungsbeispiel:

#content
{
height: 5cm;
}
#footer
{
height: 23mm;
}

Punkte:

Punkte sind auch wieder eine amerikanische Einheit, ein pt ist 1 / 72 Inch groß. Hört sich etwas merkwürdig an deshalb hier mal die umrechnung in cm.

1pt = 1 / 72 Inch = 0,035277777777777777777777777777778 cm

Kurz gesagt ein pt ist seeeeehr klein und deshalb auch nur ein seeeehr kleines Anwendungsbeispiel

#content
{
font-size:10pt;
}

Das sind so die geläufigsten Größenangaben, jedenfalls meines Wissenstandes nach.

Der häufigste Grund warum die Überschriften nicht verwendet werden ist, weil bei diesen die Schriftgrößen schon vorgegeben sind. Aber keine Sorge diese kann man noch umdefinieren.  Dazu erstellt ihr in eurem Stylesheet einfach ein Element wie folgt:

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

h1
{
  font:15px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h2
{
  font:14px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h3
{
  font:13px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h4
{
  font:12px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h5
{
  font:11px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}
h6
{
  font:10px Arial, Verdana, Helvetica, sans-serif; color: #515080;
}

Ich rate euch mit absteigender wertigkeit der Überschriften auch die Textgrößen zu verringern, dies dient den Usern dazu die Unterthemen eurer Texte zu erkennen und eventuell zu den relevanten Texten zu springen ohne den vielleicht unnötigen Vorspann lesen zu müssen.

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.