CSS
Cascading Style Sheets
Trennung von Inhalt und Präsentation
In Kombination mit HTML dient CSS der Trennung von Inhalt und Präsentation. Die Hypertext Markup Language (HTML) kommt zum Einsatz, um Textdokumente mit Informationen anzureichern, die einer semantischen Strukturierung der Textelemente dienen. Die Auszeichnungssprache erzeugt somit die Grundlage einer jeden Website: den HTML-Code. Dieser beschreibt, aus welchen Elementen sich ein Dokument zusammensetzt (z. B.: <body>, <header>, <footer>) und wie die Informationen zu interpretieren sind (z. B.: Überschrift <h1>, Textabsatz <p>, Zeilenumbruch <br>, Link <a>, Bild <img>, Video <video>).
CSS wird in sogenannten Regelsätzen geschrieben und strukturiert. So beginnt jede CSS-Regel zunächst mit dem Selektor. Dieser bestimmt die HTML-Elemente, die gestaltet werden sollen. In folgendem Beispiel ist es „p“, was für „Paragraph“ bzw. einen Absatz in Ihrem Text-Inhalt steht.
Wie ist ein CSS-Regelsatz strukturiert?
Selektor (selector): Hier wählen Sie aus, welches HTML-Element Sie gestalten wollen (hier: p = Paragraph). Möchten Sie sich stattdessen ein anderes Element vornehmen, etwa die Titelüberschrift <h1>, müssen Sie nur den Selektor anpassen.
Deklaration (declaration): Die zwei Bestandteile der Deklaration sind Eigenschaft und Eigenschaftswert. Hier wird bestimmt, welche Eigenschaft auf welche Weise geändert werden soll.
Eigenschaft (property): Hier wird vermerkt, welche Eigenschaft des HTML-Elements Sie ändern möchten.
Eigenschaftswert (property value): Hier wird die Darstellung des Elements verändert, indem der Eigenschaft ein Eigenschaftswert zugewiesen wird
wichtigste Elemente
in CSS
p {
color: blue;
}
color: blue;
font-size: 16px;
margin-top: 20%;
HTML:
<div class=„box“ id=„header“>…</div>
CSS:
.box {
background-color: yellow;
}
#header {
color: blue;
}
