div und span sind die fundamentalen Container-Elemente in HTML, mit denen du Webseiten strukturierst — aber sie funktionieren nach völlig unterschiedlichen Prinzipien. div erzeugt einen Block-Container für größere Layouts und Gruppierungen, während span inline bleibt und nur kleine Textabschnitte formatiert, ohne den Textfluss zu unterbrechen. Wenn du verstehst, wann du welches Element einsetzt, legst du die Grundlagen für sauberes HTML und effektives CSS-Styling.
div und span: Die Container-Elemente in HTML
Tag 8 drehte sich um zwei Elemente, die du auf jeder modernen Website findest: div und span.
Ein div ist ein Block-Container. Du packst andere Elemente darin, um sie zu gruppieren und über CSS als Einheit zu stylen oder zu positionieren. Wenn du eine Webseite öffnest und die Entwicklertools aufrufst, siehst du überall div-Elemente. Sie bilden das Gerüst, auf dem das Layout aufgebaut wird.
span funktioniert ähnlich, aber mit einem entscheidenden Unterschied: Es erzeugt keinen Zeilenumbruch. span ist ein Inline-Element. Du benutzt es, um kleinere Textabschnitte zu formatieren, ohne den Textfluss zu unterbrechen.
Kurz gesagt: div für größere Blöcke und Layouts, span für Text innerhalb einer Zeile.
CSS-Grundlagen: Selektoren, Klassen und IDs verstehen
Ab Tag 9 ging es mit CSS los. CSS steht für Cascading Style Sheets und steuert das Aussehen deiner Seite. Du schreibst einen Selektor, der HTML-Elemente auswählt, und dahinter in geschweiften Klammern die Eigenschaften mit ihren Werten.
Beispiel: h1 { background-color: green; } macht alle H1-Überschriften auf deiner Seite grün.
Tag 10 hat das Ganze präziser gemacht. Du kannst jedem Element Klassen und IDs zuweisen:
- Klassen (
class-Attribut) kannst du mehreren Elementen gleichzeitig geben. Wenn du fünf Buttons gleich stylen willst, gibst du allen die Klassebutton. In CSS wählst du sie mit einem Punkt an:.button { ... }. - IDs (
id-Attribut) sind eindeutig. Eine ID kommt pro Seite nur einmal vor. Du wählst sie in CSS mit einer Raute an:#mein-element { ... }.
Die Faustregel: Klasse für Gruppen, ID für einzelne, eindeutige Elemente.
CSS richtig einbinden: Inline, Internal oder External
Tag 11 hat geklärt, wie du CSS überhaupt in dein HTML bekommst. Drei Wege:
- Inline direkt am Element:
<h1 style="color: red;">. Schnell, aber kaum wartbar. - Internal über ein
<style>-Tag im<head>der HTML-Datei. Besser, aber alles klebt in einer Datei. - External über eine separate
.css-Datei, die du per<link rel="stylesheet" href="styles.css">einbindest.
Der externe Weg ist die richtige Wahl für alles, was über ein paar Zeilen hinausgeht. Code trennen, Übersicht behalten.
Texte stylen und das Box-Modell meistern
Tag 12 widmete sich der Typografie in CSS. Die wichtigsten Eigenschaften:
font-family: Schriftartfont-size: Schriftgrößefont-weight: Schriftstärke (normal, bold oder Zahlenwerte wie 400, 700)font-style: z.B.italicfür kursivline-height: Zeilenabstand
Tag 13 und 14 haben dann das Box-Modell erklärt, eines der grundlegendsten Konzepte in CSS. Jedes HTML-Element ist eine Box mit vier Schichten:
- Content: Der eigentliche Inhalt
- Padding: Innenabstand zwischen Inhalt und Rand
- Border: Der Rahmen selbst
- Margin: Außenabstand zu anderen Elementen
Für padding und margin gibt es eine Kurzschreibweise. Du kannst alle vier Seiten in einer Zeile angeben, immer im Uhrzeigersinn: oben, rechts, unten, links.