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.

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.

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!

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) */
}

HTML und CSS ganz leicht und Schritt für Schritt lernen. Eine Webseite mit allem Drum und Dran erstellen: farbige Texte, übersichtliche Tabellen, schöne Bilder, praktische Formulare, interessante Videos und sogar Musik. Mit viel Hintergrundwissen zur Gestaltung sowie zur Suchmaschinenoptimierung

Es gibt viele Wege, eine eigene Webseite zu erstellen. Aber möchtest du es von Grund auf lernen, solltest du am besten HTML und CSS dazu verwenden. Thomas Kobert weiht dich Schritt für Schritt in die Grundlagen von HTML 5 und CSS 3 ein. Du lernst, mithilfe von HTML und einem Editor deine Webseite mit vielen Elementen zu füllen und zu gestalten: Überschriften, Zeilenumbrüche, Hyperlinks und schöne Textformatierungen gehören ebenso dazu wie das Einbinden von Bildern, Videos und Musik.

Mit CSS verschönerst du dann das Design: Ein toller Hintergrund, Rahmen, Aufzählungen und Tabellen machen aus deinen Webseiten einen Hingucker. Du lernst sogar, wie du Formulare selbst erstellst und erhältst zusätzlich ganz viele Profi-Tipps. Zusätzliches Wissen zu Suchmaschinenoptimierung und Quelltextvereinfachung geben dir das nötige Handwerkszeug für einen tollen eigenen Online-Auftritt.

Viele Fragen und Aufgaben helfen dir, das Gelernte zu festigen und eigenständig weiterzumachen. Am Ende des Buches findest du eine Übersicht über die wichtigsten HTML- und CSS-Befehle zum Nachschlagen.

Aus dem Inhalt:

• Firefox installieren und einen Editor auswählen
• Die erste Webseite erstellen
• Texte mit Stylesheets gestalten
• Fotos und Multimedia einbinden
• Seitendesign mit CSS
• Sich durch Hyperlinks mit anderen Webseiten vernetzen
• Listen, Aufzählungen und Glossare erstellen
• Tabellen mit CSS verschönern
• Individuelle Formulare entwickeln
• Mit einem Dokumentenkopf deine Webseite aufwerten und für Suchmaschinen optimieren
• CSS-Profitipps: schicke Rahmen verwenden, Mauszeiger ändern und Quelltexte optimieren
• Ausführliche CSS-Referenz
• Anhang mit weiterführenden Infos und den wichtigsten HTML-Elementen

Zum Download: Alle Beispiele aus dem Buch, Antworten und Lösungen zu den Fragen, ein Editor sowie ausführlichere Referenzen

Systemvoraussetzungen: Für Windows, Linux und Mac

Ab 11 Jahre, aber auch für Erwachsene, die eine wirklich einfache Einführung suchen

Über den Autor:
Thomas Kobert ist HTML-Experte und hat bereits viele erfolgreiche Bücher zum Thema verfasst.

Pressestimmen:

»Ein leicht verständliches Lehrbuch, für alle Anwender, die eigene Websites erstellen und optimieren möchten.« (Mac Life, 11/2020)

»Nach der Lektüre kann zum Schluss die 1. eigene Webseite vorgewiesen werden. Programmiervorkenntnisse werden nicht vorausgesetzt – mehr als Texteditor und Browser werden nicht benötigt. Der Autor richtet sich an Kinder ab 11 Jahren und vermittelt das Wissen sehr anschaulich und kindgerecht.« (ekz-Bibliotheksservice, 04/2020)