CSS Tutorials


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

Container mit Rahmen

Mit border-width: bestimmen wir die Rahmen Dicke , border-color: ist für die Farbe und border-style: für das Layout. Als Layout Möglichkeiten gibt es solid (einfacher Rahmen) , dotted (gepunktet) double (doppelter Rahmen), dashed (gestrichelt) und noch ein paar andere.
        <style type="text/css">
        <!--
        #main {
        border-width:1px; 
        border-color:#000000 
        border-style:solid;
        -->
        </style>
        

Container formatieren

Wir bestimmen die Größe des #main Container's mit witdh: für die Breite und height: für die Höhe.Dabei werden die Werte in px (Pixel) oder in % (Prozent) angegeben.
        <style type="text/css">
        <!--
        #main {width:200px; height:50px;}
        -->
        </style>
        

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.
    <style type="text/css">
    <!--
    #div_layer { }
    .class_layer {}
    -->
    </style>
    

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.
    <style type="text/css">
    <!--
    body {background-image: url(bild.jpg);
    background-repeat:repeat-x;}
    -->
    </style>
    

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.
    <style type="text/css">
    <!--
    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 }
    -->
    </style>
    

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" />
        <style type="text/css">
        <!--
        body {color:#000000}
        -->
        </style>