CSS

Reset CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}

Hiermit entfernt ihr alle vom Browser vordefinierten Style.

Vertikales CSS Flyout Menü

Ein Vertikales Css Flyout Menü, welches sich seitlich entfaltet
Zum Tutorial

Horizontales CSS Flyout Menü

Bei Überfahren einer Rubrik erscheinen die Unterkategorien. Ein simples aber dennoch sehenswertes Menü
Zum Tutorial

Id und Class
#div_layer {

}
.class_layer {

}

Mit Id und Class kann man so genannte Container erstellen. Angesprochen wird der Id Container mit einem # und der Class Container mit einem Punkt ".". Das ist aber noch nicht der einzige unterschied, Id Container darf man nur einmal Pro Seite verwenden wo hingegen Class Container beliebig oft werwendet werden dürfen. In beiden fällen wird der Inhalt wie in einer einfachen Tabelle dargestellt.

Hintergrund Bild einfügen
body {
    background-image: url(bild.jpg);
    background-repeat:repeat-x;
}

Mit diesem Code wird ein Bild im Body dargestellt welches sich Horizontal so lange wiederholt bis der Seiten- bzw. Bildschirmrand erreicht wurde. Mit background-repeat:repeat-y wird das Bild vertikal wiederholt. background-repeat:no-repeat verhindert die Wiederholung.

CSS einbinden
a:link {
    color:#CCCCCC;
    text-decoration:none
}

a:visited {
    color:#000000;
    text-decoration:none
}

a:hover {
    color:#ffffff;
    text-decoration:none
}

a:active {
    color:#CCCCCC;
    text-decoration:none
}

Als A sind alle Hyperlinks auf der Seite gemeint.
A:link {color:#CCCCCC } Alle Links werden grau
A:visited {color:#000000 } Bereits Besuchter Link wird schwarz
A:hover {color:#ffffff } Färbt den Link beim Mouseover weiß
A:active {color:#CCCCCC} Färbt den Link beim Anklicken grau
text-decoration:none weitere Text Effekt wie z.b. ein Unterstrich,
indem Fall wurden keine zusätzlichen Optionen verwendet.

CSS einbinden
<link rel="stylesheet" href="style.css" type="text/css" />

Der Code wird bei einer HTML Datei zwischen eingefügt. Um die CSS Datei extern einlesen zu können muss im head Bereich folgender Code stehen