CSS Tutorials


Reset CSS

Hiermit entfernt ihr alle vom Browser vordefinierten Style.
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;
}

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

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.
#div_layer { }
.class_layer {}

Hintergrund Bild einfügen

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.
body {
    background-image: url(bild.jpg);
    background-repeat:repeat-x;
}

Link Farbe ändern

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.
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
}

CSS Grundgerüst

Der Code wird bei einer HTML Datei zwischen <head> </head> eingefügt. Um die CSS Datei extern einlesen zu können muss im head Bereich folgender Code stehen <link rel="stylesheet" href="style.css" type="text/css" />