Cascading Style Sheets

"gestufte Gestaltungsbögen"


Wozu überhaupt?
Mit HTML lassen sich nur eine begrenzte Anzahl an Eigenschaften auf Elemente über die Elemente übertragen. HTML ist auch nur zum Strukturieren! Mit CSS können designtechnische Eigenschaften den Elementen zugetragen werden. Auch vordefinierte Eigenschaften aus den HTML-Elementen lassen sich verändern oder löschen.


Wie versteht und deutet man den Style?
BEI WEM soll welche EIGENSCHAFT einen bestimmten WERT annehmen.

Alle b-Elemente sollen bei Ihrer Eigenschaft Schriftfarbe den Wert rot annehmen.

Alle Bilder (img) sollen bei der Eigenschaft Rahmen diesen in rot mit 1 Pixel Rahmenstärke angezeigen.


Begrifflichkeiten:
Bei welchem Element = Selektor = Selector
Welche Eigenschaft = Eigenschaft = Property
Welcher Wert = Wert = Value
Welche Eigenschaft mit welchem Wert = Deklaration = Declaration


Beispiel 1:

Element {
    Eigenschaft1: Wert1;
}


Beispiel 2:

Element {
    Eigenschaft1: Wert1;
    Eigenschaft2: Wert2;
    Eigenschaft3: Wert3;
}


Welche Arten von CSS gibt es?
extern | <link href="style.css" rel="stylesheet"> (rel = relationship)

intern | <style> </style>

inline | style=" ;"


class und id (schon mal angekündigt; Vorschau der Selektoren zeigen)




<element attribut="wert"> </element>


<p> </p>
HTML Element


<p class="Klasse"> </p>
HTML Element mit einer class und der value "Klasse"


<p id="Identität"> </p>
HTML Element mit einer id und der value "Identität"


Attribute kann man frei wählen und definieren.
Es gibt jedoch auch vordefinierte wie z.B. id, class, style, title, alt, href, src, target uvm.