Warum CSS eine Extrawurst braucht

In CSS-Dateien können wir keine HTML-Entities verwenden, da diese vom Browser nur innerhalb von HTML-Tags interpretiert werden. Wenn du Text über CSS einfügst, nutzt du stattdessen den ISO-Code des Zeichens in einer speziellen Hexadezimal-Schreibweise.

Die Syntax: Der Backslash macht’s

Um einen Umlaut in CSS darzustellen, verwendest du einen Backslash \ gefolgt vom Hex-Code des Zeichens.

Hier sind die häufigsten Umlaute für dein Stylesheet:

Einsatzbeispiel

/* Herkömmlich: Sollte meist funktionieren, aber störanfällig */
.pflichtfeld::before {
content: "Bitte ausfüllen: ";
}

/* Sicher: Mit dem CSS-Escape-Code */
.pflichtfeld::before {
content: "Bitte ausf\00FC llen: ";
}

Pro-Tipp: Wenn nach dem Escape-Code direkt ein Buchstabe folgt, setze ein Leerzeichen nach dem Code (wie im Beispiel oben). CSS erkennt das Leerzeichen als Ende des Codes und zeigt es im Browser nicht an.

Der moderne Weg: @charset

Genau wie in HTML kannst du auch in CSS den Zeichensatz definieren. Denk aber daran, dass die Datei auch entsprechend abgespeichert ist (Die Textdatei mit dem Quelltext als UTF-8 speichern). Dann kannst du Umlauter im Quelltext verwenden, die dann auch richtig angezeigt werden. Füge dazu ganz oben in deine CSS-Datei folgende Zeile ein:

@charset "UTF-8";

Umlaute in HTML vs. CSS

Warum der Unterschied?

CSS-Escapes nutzen die hexadezimale Unicode-Nummer. Das ist nötig, da CSS eine andere Syntax-Logik verfolgt, um Zeichen in Pseudo-Elementen wie ::after darzustellen.

HTML-Entities nutzen Namen oder Dezimalzahlen. Sie sind für den Einsatz direkt im HTML-Markup laut W3C gedacht.

Wer kennt es nicht: Du öffnest deine Website und statt „Über uns“ liest du plötzlich „Ãœber uns“. Keine Sorge, deine Seite ist nicht gehackt – es liegt lediglich an der fehlenden oder falschen Kommunikation zwischen deiner Datei und dem Browser über den verwendeten Zeichensatz. 

1. Die Basis: Den Zeichensatz (Charset) definieren 

Damit der Browser weiß, wie er die Bits und Bytes deiner Datei in lesbare Buchstaben übersetzt, musst du ihm den Weg weisen. Heute ist UTF-8 der absolute Standard. Es deckt nahezu alle Zeichen der Welt ab – inklusive unserer Umlaute. 

Um UTF-8 zu aktivieren, fügst du diesen Meta-Tag im Header deiner Website ein: 

<meta charset="utf-8">

Wichtig: Es reicht nicht, nur den Tag zu setzen. Du musst deine Datei auch im Editor (z.B. VS Code oder Notepad++) explizit als „UTF-8“ speichern. 

2. Was sind HTML-Entities?

Manchmal kannst oder willst du dich nicht auf die UTF-8-Kodierung verlassen – zum Beispiel in alten Systemen oder wenn du sichergehen willst, dass ein Zeichen absolut immer korrekt interpretiert wird. Hier kommen Entities ins Spiel. 

Entities sind Platzhalter, die mit einem Und-Zeichen (&) beginnen und mit einem Semikolon (;) enden. Der Browser erkennt diese Codes und ersetzt sie bei der Darstellung durch das richtige Zeichen. 

3. Die deutschen Umlaute als Entities 

Hier ist ein Spickzettel für die Entities der deutschen Umlaute:

Und im nächsten Beitrag werd ich ein paar Worte über deutsche Umlaute in CSS verlieren.

Wenn man erst einmal versteht, dass HTML- & CSS-Code die Brücke zwischen Logik und Ästhetik ist, wird es richtig spannend. Viele denken bei Webtechnologie sofort an staubige Firmen-Homepages oder komplexe Tabellen. Doch weit gefehlt! HTML und CSS sind die unsichtbaren Macher hinter vielen Dingen, die wir im digitalen Alltag feiern.

Besonders als Gamer und Design-Fan sollten dir HTML & CSS nicht gleichgültig sein. Hier sind drei Bereiche, in denen du mit Code zum Creator wirst:

1. Gaming: Dein individuelles Setup (UIs und Overlays)

Wusstest du, dass viele moderne Spiele im Hintergrund auf Web-Engines setzen, um ihre Menüs und Inventar-Ansichten darzustellen? Das nennt man Gaming UI (User Interface).

• Twitch-Overlays: Wer auf Twitch streamt, möchte auffallen. Ob Spenden-Barometer, Alert-Boxen oder Chat-Integrationen – Tools wie Streamlabs basieren fast immer auf HTML und CSS. Wenn du hier selbst Hand anlegen kannst, baust du dir ein Design, das sonst niemand hat.
• In-Game-Interfaces: Sogar Klassiker wie Minecraft erlauben es mit den richtigen Mods, die Optik des Spiels tiefgreifend zu verändern. Wer den Code versteht, gestaltet sein Spiel aktiv mit.

2. Social Media Individualisierung: Discord & Co.

Viele Menschen lieben es, ihre digitale Umgebung zu personalisieren und sich von der Masse abzuheben.

• Discord-Themes: Mit CSS kannst du das Aussehen deines Discord-Clients (z. B. über BetterDiscord) komplett umkrempeln. Von der Schriftart bis hin zu animierten Hintergründen ist alles möglich.
• Profil-Design: Plattformen wie Carrd oder das Retro-Netzwerk SpaceHey boomen, gerade weil sie Nutzern erlauben, ihre Identität durch eigenen Code auszudrücken. Es ist das digitale Äquivalent dazu, sein Zimmer mit Postern zu tapezieren – nur viel flexibler.

3. Digitale Kunst & Creative Coding

CSS ist mittlerweile so mächtig geworden, dass es fast schon eine eigene Kunstform ist. Unter dem Begriff Creative Coding erschaffen Entwickler Erstaunliches:

• Pure CSS Art: Es gibt Künstler, die mit reinem CSS komplette, fotorealistische Gemälde „malen“. Kein Pinsel, nur Code-Zeilen.
• Interaktive Installationen: In Verbindung mit ein wenig JavaScript lassen sich Kunstwerke erschaffen, die auf Mausbewegungen oder Sound reagieren. Für kreative Köpfe ist das oft viel spannender als eine klassische Firmenseite.

Für die Gamer und Kreativen unter euch:

Wusstest du, dass du dein eigenes Twitch-Overlay mit CSS gestalten kannst? Oder dass viele der Menüs in deinen Lieblingsspielen im Grunde wie kleine Webseiten funktionieren? Selbst wenn du kein klassischer Webdesigner werden willst: HTML und CSS sind die Werkzeuge, mit dem du deinem digitalen Setup deinen ganz persönlichen Stempel aufdrückst. Es ist die Kunstform des 21. Jahrhunderts!

So – habe ich dich jetzt überzeugt, dass HTML und CSS absolut spannende THemen sind und einen echten Coolness-Faktor haben?

Ich muss dann immer schmunzeln. Denn die Wahrheit ist: HTML und CSS sind wie das Fundament eines Hauses. Du siehst es vielleicht nicht, wenn du drin wohnst, aber ohne es würde alles zusammenbrechen. Und das Beste? Diese Techniken stecken an Orten, an denen du sie niemals vermutet hättest.

Hier sind ein paar Bereiche, in denen du mit HTML- und CSS-Wissen eingeflossen ist. Es ist also nicht nur eine spannende Spielerei sondern auch im Berufsleben, gerade in den neueren Technologien eine Schlüsseltechnik.

1. Apps auf deinem Smartphone

Viele Apps, die du täglich nutzt (besonders auf Android und iOS), sind in Wirklichkeit sogenannte „Hybrid-Apps“. Das sind im Grunde kleine, spezialisierte Webseiten, die in ein App-Gehäuse verpackt wurden. Wenn du CSS kannst, verstehst du plötzlich, warum die App so aussieht, wie sie aussieht – und Entwickler nutzen exakt dieses Wissen, um die Oberflächen zu gestalten.

2. E-Books (Ja, auch meine!)

Hast du schon mal ein E-Book auf einem Kindle oder iPad gelesen? Ein E-Pub-File ist im Grunde nichts anderes als eine Sammlung von HTML-Dateien und CSS-Stylesheets. Jede Überschrift, jeder Zeilenabstand in deinem Lieblingsbuch wurde mit genau der Technik gestaltet, die ich in meinen Büchern erkläre.

3. Newsletter, die gut aussehen

Jede schicke Werbe-E-Mail oder jeder Newsletter in deinem Postfach ist pures HTML. Wenn du dort jemals ein Layout anpassen oder einen Button verschieben willst, kommst du ohne CSS-Grundkenntnisse nicht weit.

4. Moderne Benutzeroberflächen (UI)

Sogar in der Industrie oder in Autos werden Oberflächen von Displays immer häufiger mit Webtechnologien gebaut. Es ist einfacher, ein Interface mit CSS „hübsch“ zu machen, als es mühsam für jedes System neu zu erfinden.

5. Das „Internet der Dinge“ (IoT)

Ob das Display an deiner Kaffeemaschine oder das Dashboard deiner Smart-Home-Steuerung: Überall dort, wo Informationen visualisiert werden, ist die Chance groß, dass HTML im Hintergrund die Fäden zieht.

Mein Fazit: Wissen, das bleibt

Und das waren nur einige Beispiele. HTML und CSS-Wissen ist also auch heute mehr als eine Spielerei, man kann sogar sagen, dass es wichtiger denn je ist. HTML und CSS zu lernen ist nicht nur „Webdesign“. Es ist das Erlernen der Grammatik unserer digitalen Welt. Wer diese Grammatik versteht, ist nicht mehr nur Passagier, sondern kann die digitale Umgebung mitgestalten – egal ob in einer App, einem E-Book oder eben doch auf der eigenen Webseite.

Hättest du das gedacht? Im nächsten Beitrag, der in einer Woche kommt, da geht´s weiter, mit Sachen in denen HTML- und CSS-Technologie steckt. Wir werden über Twitch, Gaming und Discord reden.

Vor etwas mehr als 2,5 Jahren habe ich darüber geschrieben, ob HTML und CSS im Zeitalter von Web-Baukästen noch relevant sind. Meine Antwort war ein klares Ja. Jetzt aber kommt der nächste Game-Changer um die Ecke (bzw. er ist schon voll um die Ecke herum): Künstliche Intelligenz, die Code schreibt.

Tools wie ChatGPT oder Claude versprechen, ganze Webseiten zu generieren, CSS-Stile zu optimieren oder Fehler in Sekunden zu finden. Die Verlockung ist groß: Einfach eine Anweisung eintippen, und schon steht der fertige Code. Ist das das Ende der „menschlichen“ Webentwicklung? Müssen wir bald nur noch „prompts“ schreiben, statt uns mit <divs> und .classes zu beschäftigen?

Als jemand, der das Web von den ersten HTML-Tags an begleitet hat, sage ich: HTML und CSS sind wichtiger denn je – und KI macht sie sogar noch mächtiger für DICH.

KI ist dein Copilot, nicht dein Autopilot.

Stell dir vor, du sitzt in einem brandneuen Jet. Du musst kein Flugzeugbauer sein, um abzuheben. Aber wenn ein Problem auftaucht oder du eine spezielle Flugroute nehmen willst, hilft es ungemein, die Instrumente zu verstehen und die Aerodynamik zu kennen.

Genauso ist es mit KI beim Coding:

1. Der „Bullshit-Detektor“: KI-generierter Code ist oft gut, aber so gut wie nie perfekt. Manchmal ist er umständlich, veraltet oder erfüllt nicht genau deine Anforderungen, oder der Code hat schlicht und einfach massive Fehler drin. Denn KI fantsiert auch mal ganz gerne und denkt sich einfach neue Befehle oder Tags aus, die es gar nicht gibt. Wenn du die Grundlagen von HTML und CSS verstehst, kannst du den generierten Code kritisch prüfen, optimieren und anpassen. Du erkennst schnell, ob da ein Fehler lauert oder ob eine elegantere Lösung möglich ist.
2. Präzise Anweisungen für präzise Ergebnisse: KI ist nur so gut wie die Anweisung, die du ihr gibst (der sogenannte „Prompt“). Wenn du weißt, wie ein valider HTML-Aufbau aussieht, welche CSS-Eigenschaften für Responsive Design wichtig sind oder welche Semantik für SEO relevant ist, kannst du deine Prompts viel genauer formulieren. Statt „Mach mir eine Website“, sagst du „Erstelle ein semantisches HTML5-Grundgerüst mit einer Header-Navigation, einem Main-Content-Bereich und einem Footer, alles im Mobile-First-Ansatz.“ Das Ergebnis wird um Welten besser sein.
3. Lern-Booster statt Denkfaulheit: Sieh KI als deinen persönlichen Mentor. Du kannst KI-Tools nutzen, um Code-Beispiele zu komplexen CSS-Layouts (Stichwort: Grid oder Flexbox) zu generieren, sie dir erklären zu lassen oder sogar Alternativen vorzuschlagen. Das beschleunigt deinen Lernprozess enorm. Du fragst nicht mehr „Wie geht das?“, sondern „Zeig mir, wie ich das am besten mit reinem CSS umsetze.“
4. Die menschliche Note bleibt entscheidend: Ein Algorithmus kann Code schreiben (erstaunlich gut, aber immer noch fehlerhaft), aber er kann nicht die Intuition eines Coders haben, das Gefühl für Ästhetik oder das Verständnis für die Zielgruppe deiner Website. Die kreative Vision, die Feinabstimmung und die finale Entscheidung bleiben bei dir. Deine Fähigkeit, den Code zu verstehen und zu formen, wird zu einem Premium-Skill.

Mein Fazit: HTML & CSS Codingwissen bleibt essentiell, auch im KI-Zeitalter.

KI ist kein Ersatz für dein Wissen, sondern ein mächtiges Werkzeug in deinem Werkzeugkasten. Wer die Grundlagen von HTML und CSS beherrscht, kann KI optimal einsetzen, um schneller, effizienter und kreativer zu arbeiten. Es geht nicht mehr darum, jede Zeile von Hand zu tippen, sondern darum, den Code zu verstehen und zu dirigieren.

Wenn du also schon immer die Sprache des Webs lernen wolltest: Jetzt ist der beste Zeitpunkt! Meine Bücher zu HTML und CSS sind dafür der ideale Einstieg. Sie geben dir das Fundament, auf dem du mit und ohne KI die spannendsten Projekte umsetzen kannst.

Wie siehst du das? Nutzt du schon KI-Tools beim Coden? Und hat sich deine Einstellung zu den Basics dadurch verändert? Ich freue mich auf deine Gedanken in den Kommentaren!

Du hast dir eine WordPress-Seite erstellt, ein schönes Theme gewählt, aber irgendwie… passt die Farbe der Überschrift nicht zu deinem Logo? Oder der Abstand zwischen den Absätzen ist dir zu groß?

Viele Einsteiger denken, sie müssten jetzt ein Informatikstudium beginnen oder teure Plugins kaufen. Aber die Lösung ist viel einfacher: Custom CSS.

WordPress bietet in fast jedem Theme unter Design -> Customizer -> Zusätzliches CSS ein kleines Fenster an. Hier kannst du mit minimalem Aufwand maximale Wirkung erzielen. Ich zeige dir heute drei „Magic Tricks“, die jeder Anfänger beherrschen kann.

1. Die Farbe deiner Überschriften ändern

Standard-Themes nutzen oft ein langweiliges Schwarz oder Dunkelgrau. Mit diesem Schnipsel gibst du deiner Seite Charakter:

h1, h2, h3 {
color: #4CAF50; /* Ersetze dies durch deinen Hex-Farbcode */
}

Das war schon alles. Genial, oder? Und du wirst sehen, die anderen Schnipsel sind genauso einfach. Kleine Ursache, große Wirkung.

Tipp: Suche bei Google nach „Color Picker“, wähle deine Wunschfarbe und kopiere den Code mit dem #.

2. Bessere Lesbarkeit durch Zeilenabstände

Nichts ist anstrengender als Text, der zu eng gequetscht ist. Gute Lesbarkeit ist das A und O.

p {
line-height: 1.8;
margin-bottom: 20px;
}

Damit verleihst du deinem Text eine luftige, professionelle Optik, wie man sie aus hochwertigen Magazinen kennt.

3. Einen Button hervorheben

Hast du einen Link, der wie ein Button aussehen soll?

.mein-button {
background-color: #ff5722;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}

Du musst dem Link in WordPress dann nur unter „Erweitert“ die CSS-Klasse mein-button geben. Etwas HTML und CSS Wissen sind jetzt schon notwendig – was kein Problem ist, wenn du die Grundlagen von HTM und CSS kennst. Mein Tipp dazu (du ahnst es bestimmt) eines meiner Bücher, z.B. HTML und CSS für Kids (ist auch eine ganz einfache Einführung für Erwachsene). Achtung, der Link zum Buch leitet dich zu Amazon weiter, wenn du das nicht willst, klick nicht darauf.

So, das wars auch schon für heute mit einem Quick-Tipp. Ich hoffe er hat dir geholfen.

Und noch was zum Schmunzeln:

Der Vollständigkeit halber: Bild ist KI-erzeugt (Kennzeichnungspflicht)

Hand aufs Herz: Ich hätte jetzt stundenlang WordPress-Instanzen aufsetzen, Screenshots zuschneiden und im Grafikprogramm hübsch machen können. Aber ganz ehrlich? Die Zeit verbringe ich lieber mit Schreiben (oder einem Kaffee).

Ich habe stattdessen die KI gefragt, wie sie sich einen Vorher-Nachher-Vergleich vorstellt. Das Ergebnis siehst du oben. Wie man sieht, beherrscht die KI zwar fantastische Welten, aber beim Thema Text im Bild schreibt sie immer noch so, als hätte sie ein paar Gläser Wein zu viel gehabt. Aber hey, die Botschaft kommt an, oder? Struktur und Farbe gewinnen immer gegen die graue Textwüste – und wie genau du das mit den Codeschnipseln von oben machst, hast du ja jetzt auch ohne perfekte Screenshots im Kasten!

Wenn ich heute aus dem Fenster schaue und die Herbstblätter fallen sehe, fühle ich eine Ruhe, die ich so bisher nicht kannte. Vor gut einem Jahr habe ich eine Entscheidung getroffen, die für viele in meinem Umfeld riskant wirkte: Ich habe meinen sicheren Job in der Versicherungsbranche an den Nagel gehängt.

Es war kein Abschied aus einer Laune heraus, sondern ein notwendiger Befreiungsschlag.

Wenn die Leidenschaft lauter wird als die Sicherheit

Man nennt es oft „Brotjob“ – jene Tätigkeiten, die Autoren machen, damit die Rechnungen bezahlt werden, während die eigenen Träume geduldig in der Warteschleife hängen. Über Jahre hinweg war die Versicherungswelt mein Anker. Der Job hat mir finanzielle Sicherheit gegeben, aber er hat mich ausgebrannt, das war ich nicht. Als „GenXer“ ist man mit dem Glauben aufgewachsen, dass Sicherheit das höchste Gut sei. Aber was nützt die Sicherheit, wenn die eigene Leidenschaft jeden Tag leiser wird?

Ich habe gemerkt: Ich brenne für das Schreiben. Punkt.

Sachbuchautor aus Berufung?

Es klingt für manche vielleicht seltsam, wenn ich sage, dass mir das Verfassen von Sachbüchern, das Konzipieren von Schulungsskripten oder das Ghostwriting eine tiefe Zufriedenheit schenkt. Ich schreibe keine dramatischen Romane, aber ich erschaffe Ordnung. Ich nehme komplexe Wissensberge und verwandle sie in Pfade, denen andere folgen können.

Egal, ob ich an einem eigenen Projekt über HTML und CSS (das gab es jetzt schon länger nicht mehr) arbeite oder als Ghostwriter die Gedanken eines anderen in die richtige Form gieße – dieser Prozess des Erschaffens gibt mir eine Erfüllung, die mir keine andere Tätigkeit geben kann.

Geld ist nicht alles – Freiheit schon

Natürlich war der Schritt mit Fragen verbunden. Reicht das Geld? Werden die Aufträge stabil bleiben? Meine Antwort heute ist simpel: Es reicht, mal mehr und mal weniger. Aber es reicht, und das ist genug.

Ich habe gelernt, dass finanzieller Überfluss den Mangel an Zeit und Sinn nicht ausgleichen kann. Für mich ist das Schreiben kein Mittel zum Zweck, um ein „besseres“ Leben zu finanzieren. Das Schreiben ist jetzt mein Leben. Diese Freiheit, morgens den Laptop aufzuklappen und zu wissen, dass ich mich heute ausschließlich mit Wörtern, Strukturen und Inhalten beschäftigen darf, ist unbezahlbar.

Ein neuer Rhythmus

Dieser Blogpost ist kein Versprechen an die Welt und keine Ankündigung neuer Strategien. Er ist einfach eine Bestandsaufnahme meines neuen Ichs. Ich genieße es, die Dinge in meinem Tempo anzugehen, ohne den Druck, jedes Quartalsziel erreichen zu müssen.

Manchmal muss man den Mut aufbringen, das Bekannte loszulassen, um Platz für das Wesentliche zu machen. Bei mir sind es die Buchstaben. Und das fühlt sich, jetzt im Herbst 2025, genau richtig an.

Genauso wichtig wie die Elemente selbst sind die leeren Räume dazwischen – der sogenannte „Whitespace“ oder „Leerraum“. Er hilft dem Auge, sich zu orientieren und schafft eine aufgeräumte, professionelle Ästhetik.

• margin (Außenabstand): Nutze margin, um den Abstand zwischen verschiedenen Elementen (z.B. zwischen einer Überschrift und dem folgenden Absatz) zu definieren.
• padding (Innenabstand): padding ist der Abstand innerhalb eines Elements, zwischen seinem Inhalt und seinem Rand (z.B. der Abstand eines Textes zu den Rändern eines Buttons).
• Konsistenz ist der Schlüssel: Lege dir ein paar feste Abstandsgrößen fest und nutze diese immer wieder. Das sorgt für Harmonie und ein professionelles Erscheinungsbild.

/* Beispiel für Abstände in CSS / .card { padding: 20px; / Innenabstand für eine Box / margin-bottom: 30px; / Außenabstand nach unten */
border: 1px solid #ddd;
}

button {
padding: 10px 20px; /* 10px oben/unten, 20px links/rechts */
margin-top: 15px;
}

Dein erster Schritt zum visuellen Webdesign

Du siehst: Mit grundlegendem Wissen über HTML für die Struktur und CSS für das Styling kannst du deine Website komplett transformieren. Du musst nicht alles auf einmal lernen. Fang klein an: Ändere die Farben deiner Überschriften, experimentiere mit Schriftgrößen und spiele mit den Abständen.

Alles notwendige Wissen findest du auch in meinen Büchern zu CSS und Webdesign, die speziell für Einsteiger konzipiert sind. Es ist ein tolles Gefühl, die eigene Website mit ein paar Zeilen Code zum Leben zu erwecken.

Welches Styling-Element wirst du als Nächstes auf deiner Website ausprobieren? Hast du einen Lieblings-CSS-Trick, den du gerne teilst? Ich freue mich auf deine Kommentare.

Die Wahl der Schriftart (Font) und Schriftgröße ist entscheidend für die Lesbarkeit und den Charakter deiner Website. Auch hier hast du mit CSS alle Zügel in der Hand.

• Wähle lesbare Schriftarten: Für lange Texte (deine Blogbeiträge!) sind serifenlose Schriften (wie Arial, Lato, Open Sans) oft am besten geeignet, da sie am Bildschirm leichter zu lesen sind. Serifenschriften (wie Times New Roman) wirken klassischer und sind oft gut für Überschriften oder gedruckte Texte.
• Weniger ist mehr: Beschränke dich auf maximal zwei bis drei verschiedene Schriftarten auf deiner gesamten Website. Eine für Überschriften, eine für den Fließtext und eventuell eine für besondere Akzente. Zu viele verschiedene Fonts wirken unruhig.
• Die richtige Schriftgröße: Der Haupttext sollte am Desktop mindestens 14 Pixel (px) groß sein, auf Mobilgeräten eventuell etwas kleiner, um mehr Inhalt darzustellen. Überschriften sind natürlich größer.
• Die richtige Schriftgröße (line-height): Dieser Wert ist oft unterschätzt, aber enorm wichtig für die Lesbarkeit langer Texte. Ein line-height von 1.5 bis 1.8 ist meist ein guter Wert. Probier es aus! Nutze CSS um diese Werte festzulegen:

Ein Beispiel:

/* Beispiel für Schriftarten und -größen in CSS / body { font-family: „Open Sans“, Arial, sans-serif; / Fallback-Schriftarten angeben / font-size: 18px; / Standard-Schriftgröße für den Haupttext / line-height: 1.6; / Wichtig für die Lesbarkeit: Zeilenabstand */
}

h1 {
font-family: Georgia, serif; /* Eine andere Schriftart für Überschriften / font-size: 2.5em; / Relative Größe zur Basis-Schriftgröße */
color: #4CAF50;
}

p {
margin-bottom: 1em; /* Abstand zwischen Absätzen */
}

Wer mit HTML und CSS anfängt, denkt oft zuerst an komplizierte Formeln, Klammern und die Angst, etwas falsch zu machen. Aber eigentlich ist CSS der Malkasten des Internets. Es ist das Werkzeug, mit dem du eine leere Leinwand (dein HTML) in eine Website verwandelst, die nicht nur funktioniert, sondern auch gut aussieht und sich gut anfühlt.

Im Frühjahr 2025 sehe ich mehr denn je: Gutes Webdesign muss nicht kompliziert sein. Es geht um die Stimmung! Warum wirkt ein blasses Grün beruhigend (wie ihr hier auf meiner Seite seht)? Warum nutzen Banken oft Blau? Jede Farbe, jede Schriftart und jeder Abstand hat eine Bedeutung und beeinflusst, wie Besucher deine Inhalte wahrnehmen.

In diesem Beitrag möchte ich dir zeigen, dass du kein Grafik-Profi sein musst, um eine schöne und effektive Website zu bauen. Mit ein paar einfachen CSS-Befehlen und einem grundlegenden Verständnis von Webdesign-Prinzipien kannst du die Wirkung deiner Texte und Bilder komplett verändern. Das ist der Moment, in dem aus Code plötzlich Gefühl wird. Genau diesen spielerischen Zugang versuche ich auch in meinen CSS-Büchern für Einsteiger zu vermitteln – denn am Ende soll das Basteln am eigenen Web-Projekt vor allem eines: Spaß machen!

1. Farbenlehre für deine Website: Mehr als nur „Rot“ oder „Grün“

Farben sind das erste, was uns ins Auge springt. Sie erzeugen Emotionen und leiten den Blick. Mit CSS gibst du deinen HTML-Elementen Farbe – aber wie wählst du die richtigen Töne?

• Der „3-Farben-Trick“: Für Einsteiger ist es am einfachsten, sich auf 2-3 Hauptfarben zu beschränken.
  • Primärfarbe: Deine Hauptfarbe (z.B. dein Firmen-Blau, dein persönliches Grün).
  • Sekundärfarbe: Eine Akzentfarbe, die die Primärfarbe ergänzt (oft ein Kontrast oder eine Abstufung).
  • Neutralfarbe: Für Texte und Hintergründe (Grautöne, Cremeweiß, Schwarz) – diese Farben halten sich dezent im Hintergrund.
• Tools helfen dir: Du musst kein Experte sein! Nutze Online-Tools wie Adobe Color Wheel oder Coolors, um harmonische Farbpaletten zu finden. Du bekommst dort direkt die passenden CSS-Codes (Hex-Werte oder RGB) zum Kopieren.
• Kontraste sind König: Gerade bei Texten ist ein hoher Kontrast zwischen Schrift- und Hintergrundfarbe entscheidend für die Lesbarkeit. Helles Gelb auf Weiß? Vergiss es! Dunkler Text auf hellem Hintergrund (oder umgekehrt) ist immer die beste Wahl für Anfänger. Mit CSS-Eigenschaften wie color und background-color spielst du hiermit.

Ein Beispiel:

/* Beispiel für Farbauswahl in CSS / body { background-color: #f8f8f8; / Helles Grau als Hintergrund / color: #333333; / Dunkles Grau für den Haupttext */
}
h1 {
color: #4CAF50; /* Deine Akzentfarbe (hier: ein frisches Grün) */
}