Wenn deine HTML-Webseite noch grau und langweilig aussieht, dann wird CSS sie in ein buntes Kunstwerk verwandeln. CSS für Kinder lernen bedeutet, die Sprache zu entdecken, mit der du Farben, Schriftarten und das Aussehen deiner Webseite bestimmst. Hier erfährst du, wie CSS funktioniert und machst deine ersten Schritte.
Was ist CSS und warum brauchst du es
CSS macht deine Webseite bunt und schön
CSS steht für "Cascading Style Sheets" und ist wie ein Farbkasten für deine Webseite. Während HTML die Struktur deiner Seite bestimmt, sorgt CSS für das Aussehen. Du kannst Farben ändern, Schriftarten wählen und alles schön gestalten.
Stell dir vor, HTML ist wie das Gerüst eines Hauses. CSS ist dann die Farbe, die Tapeten und alle schönen Dekorationen. Ohne CSS wären alle Webseiten grau, schwarz und sehr langweilig.
Der Unterschied zwischen HTML und CSS
HTML beschreibt, was auf deiner Webseite steht. CSS beschreibt, wie es aussehen soll. HTML sagt "hier ist eine Überschrift", CSS sagt "die Überschrift soll rot und groß sein".
In HTML schreibst du
<h1>Meine Überschrift</h1>
Mit CSS machst du sie bunt: h1 { color: red; font-size: 30px; }. So arbeiten HTML und CSS zusammen wie ein Team.
Deine erste CSS-Datei erstellen
CSS-Datei anlegen und mit HTML verbinden
Erstelle eine neue Datei und nenne sie "style.css". Die Endung ".css" ist wichtig, damit dein Computer weiß, dass hier CSS-Code steht. Diese Datei legst du in denselben Ordner wie deine HTML-Datei.
In deiner HTML-Datei fügst du im ``-Bereich diese Zeile ein: ``. Jetzt weiß deine HTML-Datei, wo sie die CSS-Regeln finden kann.
<!DOCTYPE html> <html> <head> <title>Meine bunte Webseite</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Willkommen auf meiner Seite!</h1> </body> </html> Wo schreibst du CSS-Code hin
CSS-Code schreibst du in deine "style.css" Datei. Jede Regel besteht aus einem Selektor (was du ändern willst) und Eigenschaften (wie du es ändern willst). Das sieht so aus: `h1 { color: blue; }`.
Du kannst CSS auch direkt in deine HTML-Datei schreiben. Dann packst du es zwischen `` und `` Tags im Kopfbereich. Eine separate CSS-Datei ist aber übersichtlicher.
CSS-Selektoren verstehen
HTML-Elemente auswählen
Selektoren sind wie Zauberstäbe, mit denen du bestimmte Teile deiner Webseite auswählst. Der einfachste Selektor ist der Element-Selektor. Mit `h1` wählst du alle Überschriften der ersten Ebene aus.
Mit `p` wählst du alle Absätze aus, mit `img` alle Bilder. So kannst du alle Elemente eines Typs gleichzeitig gestalten. Das ist sehr praktisch und spart viel Arbeit.
</p><p>h1 { color: red; font-size: 32px; }</p><p>p { color: blue; font-size: 16px; } Klassen und IDs verwenden
Manchmal willst du nur bestimmte Elemente gestalten. Dafür gibt es Klassen und IDs. Eine Klasse vergibst du mit `class="mein-name"` im HTML-Element. Im CSS wählst du sie mit `.mein-name` aus.
Eine ID vergibst du mit `id="einmalig"` und wählst sie mit `#einmalig` aus. IDs sollten nur einmal pro Seite verwendet werden, Klassen kannst du öfter nutzen.
.wichtiger-text { color: red; font-weight: bold; } #haupttitel { color: purple; font-size: 40px; } Farben mit CSS ändern
Textfarben bestimmen
Farben in CSS änderst du mit der Eigenschaft `color`. Du kannst Farbnamen wie "red", "blue" oder "green" verwenden. Es gibt auch Farbcodes wie "#FF0000" für Rot oder "#0000FF" für Blau.
Farbcodes bestehen aus sechs Zeichen mit Zahlen und Buchstaben. Die ersten beiden Zeichen stehen für Rot, die nächsten für Grün, die letzten für Blau. So mischst du jede Farbe, die du willst.
h1 { color: red; } p { color: #0066CC; } .gruen { color: green; } Hintergrundfarben gestalten
Mit `background-color` änderst du die Hintergrundfarbe von Elementen. Du kannst den Hintergrund von Absätzen, Überschriften oder der ganzen Seite färben. Das macht deine Webseite viel bunter.
Der Hintergrund der ganzen Seite änderst du mit `body { background-color: lightblue; }`. Für einzelne Bereiche verwendest du dieselbe Eigenschaft bei anderen Elementen.
Schriftarten und Text gestalten
Schriftgröße und Schriftart ändern
Die Schriftgröße änderst du mit `font-size`. Du kannst Pixel verwenden wie "16px" oder "24px". Größere Zahlen bedeuten größere Schrift. Die Schriftart änderst du mit `font-family`.
Beliebte Schriftarten sind "Arial", "Times" oder "Verdana". Du kannst auch mehrere angeben: `font-family: Arial, sans-serif;`. Falls Arial nicht verfügbar ist, nimmt der Browser eine andere ähnliche Schrift.
h1 { font-family: Arial, sans-serif; font-size: 28px; } p { font-family: Verdana, sans-serif; font-size: 14px; } Text fett, kursiv oder unterstrichen machen
Text fett machst du mit `font-weight: bold;`. Für kursiven Text verwendest du `font-style: italic;`. Unterstrichenen Text erstellst du mit `text-decoration: underline;`.
Du kannst auch mehrere Eigenschaften kombinieren. Ein Text kann gleichzeitig fett, kursiv und unterstrichen sein. Das sieht dann sehr auffällig aus und eignet sich für wichtige Informationen.
Abstände und Größen bestimmen
Innenabstände mit padding
Padding ist der Innenabstand eines Elements. Er schafft Platz zwischen dem Rand und dem Inhalt. Mit `padding: 10px;` gibst du ringsum 10 Pixel Abstand. Das macht deine Texte luftiger und lesbarer.
Du kannst auch verschiedene Abstände für jede Seite festlegen: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`. So bestimmst du genau, wo wie viel Platz sein soll.
Außenabstände mit margin
Margin ist der Außenabstand zwischen Elementen. Mit `margin: 20px;` schaffst du Platz zwischen verschiedenen Bereichen deiner Webseite. Das verhindert, dass alles zusammengequetscht aussieht.
Wie bei padding kannst du auch hier jeden Rand einzeln bestimmen: `margin-top: 30px;` schafft nur oben Abstand. So kontrollierst du genau, wie deine Elemente angeordnet sind.
Deine ersten CSS-Experimente
Eine bunte Überschrift erstellen
Lass uns eine richtig auffällige Überschrift gestalten. Sie soll groß, bunt und mit einem schönen Hintergrund sein. Das ist ein perfektes erstes Projekt, um die CSS-Grundlagen anzuwenden.
.bunte-ueberschrift { color: white; background-color: #FF6600; font-size: 36px; font-family: Arial, sans-serif; padding: 15px; text-align: center; } Diese Überschrift hat weißen Text auf orangenem Hintergrund, ist groß und zentriert. Der Padding sorgt für schönen Abstand ringsum. In deiner HTML-Datei verwendest du `
Mein Titel
`.
Einen schönen Button gestalten
Buttons sind wichtige Elemente auf Webseiten. Mit CSS kannst du sie richtig schön und anklickbar aussehen lassen. Wir gestalten einen Button mit runden Ecken und schönen Farben.
.mein-button { background-color: #4CAF50; color: white; padding: 12px 24px; font-size: 16px; border: none; border-radius: 8px; } Dieser Button ist grün mit weißer Schrift, hat schöne Abstände und runde Ecken durch `border-radius`. In HTML schreibst du `` und schon hast du einen professionellen Button.
Häufige Fehler vermeiden
Warum funktioniert mein CSS nicht
Der häufigste Fehler ist ein vergessenes Semikolon am Ende einer CSS-Regel. Jede Eigenschaft muss mit einem Semikolon abgeschlossen werden: `color: red;`. Ohne Semikolon funktioniert die ganze Regel nicht.
Ein anderer Fehler sind Tippfehler in den Namen. `colr: red;` funktioniert nicht, es muss `color: red;` heißen. Auch die Selektoren müssen exakt stimmen: `.meine-klasse` ist etwas anderes als `.meineKlasse`.
Tipps zum Fehler finden
Wenn dein CSS nicht funktioniert, überprüfe zuerst die Rechtschreibung. Dann schaue, ob alle Semikolons und geschweiften Klammern da sind. In deinem Browser kannst du mit F12 die Entwicklertools öffnen und Fehler finden.
Teste immer nur kleine Änderungen nacheinander. So findest du schnell heraus, welche Regel Probleme macht. Speichere deine CSS-Datei nach jeder Änderung und lade die Webseite neu.
Mit diesen Grundlagen kannst du schon richtig schöne Webseiten gestalten. Das Gestalten mit CSS macht Spaß und wird mit jedem Projekt einfacher. In unserem Webseiten für Kinder Bereich findest du noch mehr Tipps und weiterführende Informationen. Experimentiere mit verschiedenen Farben, Schriftarten und Abständen. So lernst du am besten, wie CSS funktioniert und was alles möglich ist.
Bereit für das nächste Level? Lerne Layout mit CSS!
