Verschachtelung
Die Kunst der strukturierten Gestaltung
Im CSS-Design spielt die Verschachtelung eine zentrale Rolle, und sie funktioniert wie ein Familienstammbaum, aber ohne die peinlichen Fragen bei Familientreffen. Elternelemente sind die mächtigen Äste, und Kindelemente hängen wie fröhliche Zweige und Blätter daran – bereit, jeden Stil von oben zu erben.
Sobald du einem Elternelement einen schicken neuen Stil verpasst, fließt dieser Zauber durch die ganze „Familie“. Natürlich kann jedes Kindelement auch mal einen eigenen Stil beanspruchen, wenn es sich besonders rebellisch fühlt. Die richtige Verschachtelung sorgt dafür, dass dein Code nicht aussieht wie das Chaos nach einem missglückten Familientreffen und dein Design so geschmeidig bleibt wie ein gut gepflegter Familienstammbaum.
Beziehungen
Verwandschaftsbeziehungen im CSS – und HTML
Leitfaden zum Webseitenbau
Strukturen, Aufbau Beziehungen
HTML zu verstehen ist, als würdest du einen Familienstammbaum durchstöbern – nur ohne die Verwandten, die plötzlich zu Besuch kommen. Elemente haben Eltern, Kinder und Geschwister, was für CSS-Anweisungen äußerst praktisch ist: Du kannst gezielt auf Verwandte zugreifen und sie stilvoll formen. Visual Studio Code macht das besonders übersichtlich, denn die Einrückungen zeigen dir genau, wer mit wem verbunden ist, damit du stets den Überblick behältst und nichts aus der Reihe tanzt.
<body>
<!-- section -->
<section>
<!-- Container 1 -->
<div>
<!-- Bild -->
<img src="dragon-eggs.jpg" alt="">
<!-- Überschrift -->
<h1>Dragons</h1>
<!-- Text -->
<p>Dragons are ancient, mythical creatures often depicted as powerful</p>
</div>
<!-- Container 2 -->
<div>
<!-- Verschachtelter Container -->
<div>
<!-- Überschrift -->
<!-- Bild Icon -->
<img src="egg-icon.png" alt="">
</div>
<!-- Bild -->
<img src="dragon-baby.jpg" alt="">
</div>
</section>
</body>So sieht die Sektion aus
Eine Skizze zur Sektion
Die Verwandtschaftsgrade
