/* CSS-Datei style1.css */

body {background-color: #000000;
       text-align:center;
 }

/* Hinweis für aeltere firefoxversionen */

header, nav, article, footer {
    display: block;

}

header {
    background-color: #000000;
    width: 980px;
    margin: 0 auto;
}
nav {
    background-color: #000000;
    width: 980px;
    margin: 0 auto;
}
article {
    background-color: #000000;
    width: 980px;
    margin: 0 auto;
}
footer {
    background-color: #000000;
    width: 980px;
    margin: 0 auto;
}


h1 {
color: #ffffff;
}


h2 {
color: #ffffff;
}

h3 {
color: #ffffff}

#head {
border-top: grey 1px dashed;
border-right: grey 1px dotted;
border-bottom: grey 2px solid;
border-left: grey 20px solid;
padding-top: 15px;
padding-bottom: 15px;



}

#foot {
border-top: grey 2px solid;
border-right: grey 1px dotted;
border-bottom: grey 1px dashed;
border-left: grey 20px solid;
padding-top: 15px;
padding-bottom: 15px
}

#head a:link { color:#ffffff; text-decoration:none; }
#head a:visited { color:#ffffff; text-decoration:none; }
#head a:hover   { color:#ff0000; text-decoration:none; }
#head a:active  { color:#ffaa00; text-decoration:none; }

#foot a:link { color:#ffffff; text-decoration:none; }
#foot a:visited { color:#ffffff; text-decoration:none; }
#foot a:hover   { color:#ff0000; text-decoration:none; }
#foot a:active   { color:#ffaa00; text-decoration:none; }

#body a:link { color:#ffffff; text-decoration:none; }
#body a:visited { color:#ffffff; text-decoration:none; }
#body a:hover   { color:#ff0000; text-decoration:none; }
#body a:active  { color:#ffaa00; text-decoration:none; }

.texta {
color:#ffffff;
font-size:10pt;
font-family:arial, "lucida console", sans-serif;
font-weight:normal;
font-style:normal;
line-height:2em;
letter-spacing:0.3em;
word-spacing:0.5em;
text-indent:1.8em;
}


/*
#navi a:link    { color:blue;   text-decoration:none; }
#navi a:visited { color:black;  text-decoration:line-through; }
#head a:focus   { color:green;  text-decoration:overline; }
#navi a:hover   { color:red;    text-decoration:overline; }
#navi a:active  { color:orange; text-decoration:underline; }



    <article>
    <aside>
    <dialog>
    <figure>
    <footer>
    <header>
    <nav>
    <section>



border

    solid = durchgezogen
    double = doppelt
    none = kein Rahmen (unsichtbar)
    hidden = kein Rahmen (unsichtbar)
    dotted = gepunktet
    dashed = gestrichelt
    groove = 3D-Effekt
    ridge = 3D-Effekt
    inset = 3D-Effekt
    outset = 3D-Effekt

Schrift

    color:#FF9F00;   Farbe orange
    font-size:28pt;   Größe 28pt
    font-family:arial, "lucida console", sans-serif;  Schriftart

    font-weight:normal/bold/bolder/lighter;
    font-style:normal/italic/oblique;

    text-indent:1.5em;
    Einrückung der ersten Zeile eines Textblockes um den vorgegebenen Abstand

    line-height:2em;
    Zeilenhöhe bestimmen, wenn der Text mehrzeilig angezeigt wird - dabei ist ratsam, das Ganze relativ zur Schriftgröße anzugeben, also in EM
    letter-spacing:0.3em;
    Abstände zwischen den einzelnen Buchstaben - sollte relativ angegeben werden, also in EM
    word-spacing:0.5em;
    Abstände zwischen den einzelnen Wörtern - sollte relativ angegeben werden, also in EM

Boxmodell

<div style="background-color:yellow;
            width:400px;
            padding: 10px;
            margin: 15px;
            border-top: 3px green solid;
            border-right: 2px red hidden;
            border-bottom: 2px black dashed;
            border-left: 12px red double;
"></div>

margin Außenabstand
padding Innenabstand

Angaben verkürzen
Es gibt Kurzschreibweisen. Haben alle 4 Seiten denselben Wert, reicht eine Angabe (z. B. "margin: 20px;" bewirkt, das auf allen 4 Seiten ein Abstand von 20px eingehalten wird)
Soll für oben/unten und rechts/links derselbe Wert definiert werden, ist die Schreibweise "margin:20px 35px;" - 20px für oben/unten, 35 px rechts/links
In der verkürzen können auch alle 4 Seiten definiert werden: "margin:20px 35px 15px 60px;" - 20px für oben, 35 px rechts, 15px unten, 60px links - gelesen wird wie die Uhrzeit, man fängt oben an.

Die verkürzte Schreibweise funktioniert sowohl für margin/padding/border

Selektoren
id
#idname
<div id="navi">

class
.class
<strong class="textmarkergelb">

id dominiert

DIV/SPAN

<span style="background-color:yellow;">
<div style="background-color:red;">

Float


*/