Website basteln - Part 2 CSS - Jetzt wird es Bunt!
06.02.2026
Was erwartet dich hier?
Nach diesem Beitrag kannst du die Grundlagen von CSS, damit deine Website bunt wird. Du kannst Hintergrundfarben und Textfarben anpassen und noch viel mehr! Im ersten Artikel über Website basteln - Part 1 HTML haben wir über HTML gesprochen. HTML strukturiert deine Website und bestimmt welche Inhalte es gibt.
CSS kümmert sich um das Aussehen deiner Website. Es gibt ihr Style! Und was ist wichtiger als guter Style? Eben! Es geht um Farben, Schriftarten, Abstände und Formen und Bildgrößen!
Auf dem Bild siehst du das Gestaltungsziel:
Einfache Weg - CSS in den Head
Später erstellen wir eine eigene CSS-Datei, damit der Code übersichtlich bleibt. Doch dazu später erst mehr. Zunächst wollen wir schnelle Erfolge! Also füge dafür folgenden Style-Code in deinen HTML-<Head>:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
<style>
body {
background-color: black;
color: green;
}
</style>
</head>
Neu ist dieser HTML-Tag <style>.
Hier schreibst du alle deine CSS-Regeln für deine Website rein. In diesem Beispiel wird der Hintergrund schwarz und die Textfarbe grün gemacht. Richtig Matrix-like! Da die Farben in einer Body-Klammer stehen, beziehen sich das Styling auf den gesamte Website, eben auf alles was im Body ist.
CSS für einzelne HTML-Elemente
Nicht nur der Body kann gestylt werden. Jedes HTML-Element kann einzeln gestylt werden, zum Beispiel <h1> und <p>. Füge den folgenden Code in dein <style>-Tag ein:
p {
color: red;
}
Jetzt sind alle Paragraphen rot! Ersetze das p mit h1 und nun sind die Überschriften rot. Ein CSS-Block sieht immer so aus:
selektor {
eigenschaft: wert;
}
Die Eigenschaften, die du ändern willst müssen in geschweiften Klammern {} hinter den HTML-Element (Sektor) stehen. Nach den Wert, z. B. die gewünschte Farbe, gehört immer ein Semicoloum; Beende das Styling eines HTML-Elements mit der }.
p {
color: red;
}
h1 {
color: white;
}
CSS für deine Seite - Grundlayout
Hier ein CSS-Code für deine komplette Seite:
<style>
body {
background-color: #ffffff;
font-family: sans-serif;
}
h1 {
color: #E32993;
}
p {
color: #333333;
}
</style>
Denk dran, es ist deine Seite! Langweilig muss sie nicht aussehen!
Farben und Farben
In Body kommt alles Allgemeines, was für die gesamte Seite gilt. Hier kannst du Hintergrundfarben und Schriftart ändern. background-color: #fffff;
Hier wird die Farbe als Hex-Code angegeben. Ein Hex-Code besteht aus 6 Zeichen und mischt sozusagen die Farben Rot, Grün und Blau. So lassen sich Farben leichter beschreiben. Suche online einfach nach deiner Farbe oder benutze Adobe Color, um deine Website-Farben zu finden.
- #000000 = schwarz
- #ffffff = weiß
- #ff0000 = rot
- #00ff00 = grün
- #0000ff = blau
- #E32993 = ???
Schriftarten und Schriftgrößen
Mit "font-family" legst du die Schriftart deiner Website fest. Arial, Helvetica usw. sind möglich. Da du nie weißt, welche Schriften auf dem Computer deiner Besucher installiert sind, solltest du immer mehrere angeben. Zur Sicherheit kannst du am Ende "sans-serif" nennen. Monospace finde ich ja richtig nice!
- Arial
- Helvetica
- monospace
- cursive
- serif
- sans-serif
font-family: Arial, sans-serif;
Du kannst auch die Schriftgrößen von <H1> und <p> verändern.
h1 {
font-size: 28px;
}
p {
font-size: 16px;
}
oder den Zeilenabstand:
body {
line-height: 1.6;
}
Textausrichten
Du kannst deinen Text global ausrichten lassen, durch text-align und mit left, right oder center. Das funktioniert auch mit den Überschriften und Paragrafen. Dazu text-align auch in deren Styles definieren.
body {
text-align: left;
}
Abstände
Dein Text hängt aufeinander? Dann musst du Margin benutzen! Dein Text klebt am eigenen Rand? Dann musst du Padding benutzen!
p {
margin: 20px;
padding: 10px;
}
Ein Merksatz den ich online gefunden habe ist: Padding polstert, Margin schiebt. Also Margin ist der Außenabstand des Elements zu den anderen Elementen. Padding ist der Innenabstand zur einen Außengrenze eines Elements, es schafft Platz zum einen Rahmen.
Linkfarbe ändern
Ist der Hintergrund zu dunkel oder zu hell, dann wirken manchmal deine Links nicht mehr. Diese Farben kannst du natürlich auch ändern.
a {
color: yellow;
}
oder auch die Farben für einen bereits besuchten Link:
a :visited {
color: red;
}
Bilder stylen
Bilder stylen haben wir mit HTML etwas gemacht, also die Größe in Pixel festgelegt. Du kannst aber noch viel mehr. Z.B. die maximale Anzeigegröße festlegen, einen Rahmen oder Rundungen einfügen.
img {
max-width: 100%;
border: 2px solid #000000;
border-radius: 20px;
}
Mit "max-width: 100%" passt sich das Bild den Bildschirm maximal in der Breite an.
CSS auslagern - Mehr Überblick!
So eine HTML-Seite kann sehr schnell sehr voll werden. Um den Überblick zu behalten, können wir alles CSS auslagern in eine extra Datei. Als erstes erstellst du dazu eine neue Datei in deinem Website-Order mit den Namen "style" und der Endung ".css". Also = style.css. Dann kopierst du dein bisheriges Styling ohne die <style>-Tags in deine neue CSS-Datei.
Folgenden Code schreibst du nun in deine HTML-Datei:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
<link rel="stylesheet" href="style.css">
</head>
Mit dem Link Stylesheet weiß die Seite nun, woher sie ihre Aussehen bekommt, nämlich von deiner style.css. Jetzt kannst du schön übersichtlich arbeiten und musst nicht für jede neue HTML-Unterseite den ganzen Head bearbeiten. Easy oder? Jetzt hast du bereits index.html, hobbies.html und nun style.css in deinem Ordner.
Kommentare in deiner CSS-Datei
In HTML machst du deine Kommentare mit "<!-- -->" in deiner CSS-Dabei musst du diese anders machen:
/* Mein Layout */
body {
background-color: #ffffff;
/* Noch ein Kommentar */
}
Beispiel CSS - Zentraler Style
In diesem Beispiel ist die Seite dunkel mit weißer Schrift und alles ist zentiert. Schnell, einfach und man kann darauf aufbauen.
/* Grundlayout */
body {
background-color: #1e1e2f;
color: #ffffff;
font-family: Arial, sans-serif;
text-align: center;
padding: 40px; /* Etwas Luft nach oben */
/* Alles mittig und verschiebbar*/
display: flex;
flex-direction: column;
align-items: center;
}
/* Überschrift */
h1 {
color: #E32993;
font-size: 36px;
margin-bottom: 20px;
}
h2 {
color: #00ffcc;
font-size: 26px;
margin-bottom: 20px;
}
/* Text */
p {
font-size: 18px;
line-height: 1.6;
color: #ffffff;
max-width: 600px;
}
/* Bild */
img {
max-width: 100%;
border-radius: 20px;
border: 4px solid #00ffcc;
}
/* Die Trennlinie */
hr {
width: 100%;
max-width: 900px;
height: 2px; /* Dicke */
background-color: #00ffcc;
}
/* Farbe deiner Links */
a {
color: yellow;
}
a:visited {
color: red;
}
a:hover { /* Cooler Hover-Effekt! */
text-decoration: none;
}
HTML gruppieren mit Containern
Wenn dein Code immer größer wird, dann benötigst du Hilfe beim Strukturieren. Dafür haben wir bislang nur einzelne Tags verwendet, wie <h1> oder <p>. Du kannst aber auch größere Bereiche mit mehreren Elementen mit <div> zusammenfassen. <div> steht für Division und ist nur ein Gerüst. Hier ein Beispiel in HTML:
<div>
<h2>Über mich</h2>
<p>
Hallo! Ich lerne gerade HTML und baue meine erste eigene Website.
Das macht Spaß und ist einfacher als gedacht.
</p>
</div>
Deine Website hat sich nicht verändert. Erst wenn CSS ins Spiel kommt kannst du gezielt einzelne Abschnitte deiner Website verändern. Da du mehere <div> haben wird, musst du diesen eine "class" geben, damit du deine Abschnitte auch unterschiedlich gestalten kannst. Der Name ist dabei frei wählbar. Das machen wir nun mit der Hobby-Sektion:
<h2>Meine Hobbys</h2>
<div class="box">
<p>Pokemon!</p>
</div>
und dazu nun das CSS:
.box {
background-color: #ffffff;
padding: 20px;
border-radius: 15px;
text-align: center;
width: 200px;
margin: 0 auto 20px;
}
/* Und noch die Schrift in der Box schwarz machen,
sonst sieht man diese nicht.*/
.box p {
color: black;
}
Du siehst, dass das CSS auf .box und auch auf das p in der .box zielt. Diese Änderungen beziehen sich also nur auf den Abschnitt "box".
<div> verschachteln mit display: flex
Du kannst auch <div>verschachteln, um komplexere Designs zu ermöglichen. Hier hast du nun zwei Boxen nebeneinander.
<div class="container">
<div class="box">
<p>Pokemon!</p>
</div>
<div class="box">
<p>Lesen!</p>
</div>
<div class="box">
<p>Schwimmen!</p>
</div>
</div>
und hier das dazugehörige CSS:
.container {
display: flex;
justify-content: center;
gap: 20px;
/* Hiermit werden die Boxen umgebrochen */
flex-wrap: wrap;
width: 100%;
max-width: 900px;
margin: 10px 0;
}
.box {
background-color: #ffffff;
padding: 20px;
border-radius: 15px;
text-align: center;
width: 200px;
}
/* Hier wird die Schrift nur in der Box
verändert mit: .box und dem p für Paragraph*/
.box p {
color: black;
}
KI als Hilfe
Das war jetzt ganz schön viel... vor allem das Thema mit Boxen, Flexbox, Wrap, justify-content und ähnlichen Konzepten. Das sind mächtige Werkzeuge, mit denen du komplexe und zugleich schöne Websites erstellen kannst. Sie sind außerdem wichtig, damit deine Website auch auf dem Handy gut aussieht.
Wenn du schnelle Erfolge erzielen möchtest, lass dich dabei ruhig von einer KI unterstützen. Du kannst eine KI nach der Umsetzung deiner Vorstellungen fragen, und sie liefert dir oft erstklassigen Code.
Ganz ehrlich: Genau das habe ich hier auch gemacht. Insbesondere bei der Startseite oder den Themenseiten brauchte ich Hilfe.
Wenn du mehr über CSS wissen möchtest, findest du hier eine Website mit Templates und weiteren Infos:
W3 Schools - Alles zu CSS
W3 Schools - CSS Templates
Wie geht es weiter?
Beim nächsten Mal schauen wir uns das Website-Hosting und ein paar hilfreiche Tools an. Dann wird es ernst: Deine Seite geht online.
Das Tool, das wir uns ansehen, heißt 11ty. Es wäre ziemlich nervig, für jede einzelne Seite immer wieder Header und Footer zu kopieren. Mit 11ty wird deine Website aus einzelnen, gecodeten Bausteinen zusammengesetzt. So musst du dich nur noch um diese Bausteine kümmern und nicht mehr um alles auf einmal.
Hier geht es nochmal zum ersten teil: Website basteln - Part 1 HTML
Zurück
