Navigation überspringen

Cascading Style Sheets

Benötigtes Vorwissen

Cascading Style Sheets (kurz: css) ist eine Scriptsprache, die das Aussehen von HTML beschreibt und festlegt. Dafür werden HTML-tags 1. native oder 2. mittels separater Selektoren (id, class)  angesprochen, Erklräungen siehe unten.

CSS folgt dem verbreiteten Syntax-Format mit VariablenName -> Body (Attribut: Wert):

Das folgende Beispiel zeigt die Style-Zuweisung einer Überschrift <h1></h1>

Element-Selektoren

Element-Selektoren verfassen Styleanweisungen für native HTML-Elemente

 

Überschrift 1 fett und rot:

h1{
    color:red;
    font-weight: bold;
}

Paragraph Seitenabstand 5px und Hintergrundfarbe hellgrau:

p{
    margin:5px;
    background-color: #aaaaaa;
}

Tabelle mit der Breite 600px und Elefenbeinweißem Hintergrund:

table{
    width:600px;
    background-color: #D3D3D3;
}

class-Selektoren

Diese Selektoren verfassen für beliebige, dieser Klasse zugewiesene Elemente Styleanweisungen. Dabei können einem Element sogar mehrere Klassen zugewiesen werden. In der css-Umgebung werden die class-Selektoren durch einen führenden "." eingeleitet.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title></title>
        <style> 
            .klasseHaupt {font-style: italic; border: 1px solid #000000; margin:10px;} 
            .klasseSub {color: green; background-color: #ff0000; padding:30px;} 
        </style>
    </head>
    <body>
        <div class="klasseHaupt">
            Text 1
        </div>
        <div class="klasseHaupt klasseSub">
            Text 1
        </div>
    </body>
</html>

Ergebnis

id-Selektoren

id-Selektoren beziehen sich laut Konvention exklusiv auf ein einzigen Element in einem Skript. Das heißt, 
anders als bei class-Selektoren werden id-Selektoren nicht mehrfach verwendet pro Skript. 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title></title>
        <style> 
            #idHaupt {font-style: italic; border: 1px solid #000000; margin:10px;} 
            #idSub {color: green; background-color: #ff0000; padding:30px;} 
        </style>
    </head>
    <body>
        <div id="idHaupt">
            Text 1
        </div>
        <div id="idSub">
            Text 1
        </div>
    </body>
</html>

Ergebnis: