Die CSS-Regel
Wie du deine Elemente mit Stil verzauberst
Selektoren und Deklarationen sind die Zaubersprüche, die deinen Webseitenelementen neues Leben einhauchen. Jeder Spruch beginnt mit einem Selektor, gefolgt von einem Deklarationsblock. Keine Sorge, das klingt komplizierter, als es ist. Der Block enthält Eigenschaft-Wert-Paare, die festlegen, wie dein Element aussieht. Es muss nicht nur bei einer Verwandlung bleiben. Füge ein paar mehr hinzu, und dein Element wird aussehen wie ein Zauberer mit Stil – von der Farbe bis zum Rand.
Ah, und vergiss das Semikolon nicht, dieses kleine, unscheinbare Ding. Lässt man es weg, dann bleibt der nächste Zauberspruch stecken, und plötzlich wirkt nichts mehr.
Lass uns die Geheimnisse der CSS-Regeln erkunden und sicherstellen, dass deine Zaubersprüche perfekt funktionieren – und dabei verdammt gut aussehen!
Die Architektur einer CSS-Regel
Einige magische Begriffe, die du beherrschen solltest
Immer diese Fremdworte
Das who ist who der Fachbegriffe
- Selektor (selector)
- Deklaration { … } (declaration)
- Eigenschaft (property)
- Doppelpunkt :
- Wert (value)
- Semikolon ;
Selektor { Eigenschaft : Wert ; }
Selektor
Der magische Fingerzeig
Der Selektor ist dein Zauberstab, der bestimmt, welche Elemente auf deiner Webseite die Macht von CSS zu spüren bekommen. Mit einem gezielten Wink zeigst du auf das, was du verändern möchtest – ob es nun eine stolze Überschrift, ein bescheidener Absatz oder ein Bild ist, das dringend aufpoliert werden sollte. Der Selektor ist der Schlüssel, um deine magischen Stile gezielt auf die richtigen Elemente loszulassen.
h1, .classname, ...
Deklaration
Der Zauberspruch der Gestaltung
Die Deklaration ist das Herzstück, der eigentliche Zauberspruch, der das Aussehen deiner Elemente neu formt. Sie besteht aus einer Eigenschaft und einem Wert, die zusammen die Gestalt und das Erscheinungsbild festlegen. Hier veränderst du Farben, Größen und Stilrichtungen. Das Semikolon am Ende ist dabei wie der finale Schwung des Zauberstabs – ohne ihn verpufft der Zauber und die Magie bleibt stecken.
h1 {
}
Eigenschaft-Wert-Paar
Die geheime Formel
Jede Deklaration hat ihre geheime Formel, das Eigenschaft-Wert-Paar, das den wahren Zauber entfacht. Die Eigenschaft bestimmt, was du verändern willst, der Wert sagt, wie es aussehen soll – wie eine schimmernde Farbe oder eine neue Form. Der Doppelpunkt dazwischen ist der unsichtbare Magier, der beide miteinander verbindet und die Magie erst möglich macht. Und schließe immer deine Formel mit dem Semikolon ab, denn sonst wird das nächste Eigenschaft-Wert-Paar seine Magie nicht entfesseln.
h1 {
font-family: Georgia, serif;
}In dieser Lektion hast du gelernt…
- Wie ein Selektor funktioniert, um gezielt HTML-Elemente für CSS-Stile anzusprechen.
- Warum eine Deklaration das Herzstück einer CSS-Regel ist, um das Aussehen eines Elements zu bestimmen.
- Wie Eigenschaft-Wert-Paare zusammenspielen, um Farbe, Größe oder Schriftart eines Elements zu verändern.
- Welche Rolle der Doppelpunkt und das Semikolon haben, um CSS-Regeln korrekt zu schreiben.
- Wie du mit einer sauberen Syntax dafür sorgst, dass deine CSS-Stile fehlerfrei angewendet werden.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Schrift der Wanderer
In den sonnigen Wäldern von Sunnyside Fields lebt ein weiser Wanderer namens Kael Windstride. Kael sammelt alte Texte und versieht sie mit magischen Schriftarten, um ihre Bedeutung zu bewahren. Um seine Zauberformel für die Schriftarten zu verstehen, musst du die Struktur einer CSS-Regel entschlüsseln und herausfinden, wie die Magie funktioniert.
Deine Aufgabe: Die Magie der Schriftarten
Kael hat eine CSS-Regel geschrieben, um die Schriftarten eines alten Textes zu verändern:
Füge im body-Bereich eine h1-Überschrift mit dem Text „Willkommen“ hinzu.
Setze darunter einen Absatz mit dem Text „in der fabelhaften Welt von Aetheron“.
Binde die Deklaration in den <head>-Bereich ein:
<style>
body {
font-family: Georgia, 'Times New Roman', Times, serif;
color: brown;
}
p {
font-style: italic;
}
</style>Finde die Selektoren: Der Selektor zeigt, auf welches Element Kael seine Schriftmagie anwendet. Was sind die Selektoren in dieser CSS-Regel?
Analysiere die Deklarationen:
- Was ist die Eigenschaft in jeder Deklaration, und welcher Wert wird jeweils zugewiesen?
- Welche Bedeutung haben font-family und font-style? Wie beeinflussen sie das Aussehen des Textes?
- Funktion von Doppelpunkt und Semikolon:
• Warum ist der Doppelpunkt notwendig? Beschreibe, was passiert, wenn man den Doppelpunkt zwischen der Eigenschaft und dem Wert weglässt.
• Was passiert, wenn das Semikolon fehlt? Lasse das Semikolon hinter der Schriftart weg. Teste es und beschreibe welches Verhalten du beobachtest. - Experimentiere mit Schriftarten:
• Ändere die Werte für font-family und font-style:
• Ersetze font-family: ‚Courier New‘, monospace; durch eine andere Schriftart, z.B. ‚Times New Roman‘, serif. Was ändert sich am Text?
• Setze font-style: normal; statt italic. Wie wirkt sich das auf den Text aus? Welche anderen Werte sind für font-style möglich?
• Füge eine weitere Deklaration hinzu (vor font-style: italic;) , z.B. font-weight: bold;.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-Deklaration</title>
<style>
body {
font-family: Georgia, 'Times New Roman', Times, serif;
color: maroon;
}
p {
font-style: italic;
}
</style>
</head>
<body>
<h1>Willkommen</h1>
<p>in der fabelhaften Welt von Aetheron</p>
</body>
</html>