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!

Hand aufs Herz: Wer heute eine Website starten will, hat es so einfach wie nie zuvor. Ein paar Klicks bei einem Web-Baukasten, ein fertiges Theme bei WordPress oder eine Vorlage in Joomla – und zack, die Seite steht.

Da stellt sich die berechtigte Frage: Warum sollte man sich heute noch mit „eckigen Klammern“, Selektoren und CSS-Grids herumschlagen? Reicht es nicht, wenn die Technik im Hintergrund einfach funktioniert?

Als jemand, der seit den Anfängen des Webs dabei ist, sage ich ganz klar: Nein. Wer die Sprache des Webs versteht, spielt in einer ganz anderen Liga. Hier sind vier Gründe (… und es gibt noch viel mehr), warum HTML und CSS auch im Zeitalter von WordPress & Co. wahre Superkräfte sind.

1. Das Ende der „geht nicht“-Ausrede

Kennst du das? Du hast ein tolles Theme in WordPress, aber die Überschrift ist einen Tick zu groß, der Button sitzt an der falschen Stelle oder der Zeilenabstand raubt dir den letzten Nerv. Im Baukasten-Editor suchst du vergeblich nach dem passenden Schalter.

Mit ein paar Zeilen CSS ist das Problem in Sekunden gelöst. Wer den Code versteht, ist nicht länger Gefangener von Vorlagen, sondern der Designer seiner eigenen Vision.

2. Schnelligkeit und SEO

Suchmaschinen wie Google lieben sauberen Code. Baukästen und komplexe CMS neigen dazu, den Quelltext mit unnötigem Ballast aufzublähen. Wenn du die Grundlagen von HTML kennst, verstehst du, wie eine Seite strukturiert sein muss, damit sie schnell lädt und von Suchmaschinen optimal indexiert wird. Ein gut strukturierter HTML-Code und der richtige Einsatz von CSS sind das beste Fundament für dein SEO-Ranking.

3. Fehler finden, statt verzweifeln

Nichts ist frustrierender als ein Design, das plötzlich „zerbricht“, weil ein Plug-in sich mit einem Theme beißt. Wer HTML und CSS zumindest in Ansätzen beherrscht, kann mit den Entwickler-Tools seines Browsers (F12 ist dein bester Freund!) sofort sehen, wo es hakt. Oft ist es nur ein nicht geschlossenes Tag oder eine überschriebene CSS-Regel. Wissen ist hier der beste Schutz gegen Panikattacken.

4. Nachhaltigkeit in einer schnellen Welt

Tools kommen und gehen. Wer weiß heute noch, wie man einen Netscape-Navigator bedient? Aber: HTML und CSS sind die zeitlosen Konstanten. Wenn du diese Sprachen lernst, investierst du in Wissen, das auch in zehn Jahren noch die Basis des Internets sein wird. Es ist ein Handwerk, das dich unabhängig von Plattformen und Trends macht.

Mein Tipp: Schritt für Schritt zum Code-Profi

Du musst kein Informatikstudium absolvieren, um das Web zu gestalten. Es geht darum, die Logik zu begreifen. In meinen Büchern zum Thema HTML und CSS verfolge ich einen klaren Ansatz: Kein Fachchinesisch, sondern einfache, nachvollziehbare Schritte.

Ich erkläre dir die Grundlagen so, dass du sie direkt an deinem WordPress-Blog oder deiner Joomla-Seite anwenden kannst. Denn am Ende macht es einfach verdammt viel Spaß, wenn man nicht nur „klickt“, sondern wirklich versteht, was auf dem Bildschirm passiert.

Wie siehst du das? Nutzt du lieber reine Baukästen oder hast du dich schon mal an den Code gewagt, um deine Seite zu individualisieren? Schreib es mir gerne in die Kommentare – ich bin gespannt auf deine Erfahrungen!