Immer mal wieder tauchen in meiner Facebook-Gruppe Fragen auf, wie man bestimmte Anpassungen an einem Theme vornehmen kann – Zum Beispiel eine Farbe anpassen oder die Schriftart ändern oder ähnliches.

Das habe ich zum Anlass genommen, eine kleine Serie zum Thema „CSS“ zu veröffentlichen.

Heute starte ich mit den Grundlagen.

Allgemeines

Die Abkürzung CSS steht für „Cascading Stylesheets“. Es ist die Standardsprache für „Stylesheets“ im Netz.

Aufbau einer CSS-Anweisung

CSS-Regeln werden nach einem immer gleichen Schema aufgebaut:

Zuerst steht der sogenannte „Selektor“.

Damit wird angegeben, für welches HTML-Element diese Formatierungsregel gelten soll. Der Selektor ist also jeweils der HTML-Befehl, der für die Strukturierung eines Bereiches verwendet werden kann. (Beispiele: h1, ul, p, …)

Danach folgt in geschweiften Klammern ( { und } ) die Formatierungsanweisung.

Eine solche Formatierungsanweisung setzt sich zusammen aus

• dem Namen,
• der Eigenschaft,
• einem Doppelpunkt
• und dem Wert.

Jede Anweisung wird durch ein Semikolon ( ; ) beendet.

Beispiel für die Darstellung:

h1 {color: red;}

Im obigen Beispiel sind:

h1 = Selektor
color = Eigenschaft
red = Wert

Durch diese CSS-Regel werden alle Überschriften auf der Website, die zwischen

 <h1> 

und

 </h1> 

stehen, rot eingefärbt.

Man kann aber auch im HTML-Editor einzelne Elemente durch CSS-Formatierungen anpassen. Das macht Sinn, wenn man z.B. nur eine einzige Überschrift in einer anderen Farbe anzeigen lassen möchte.

In diesem Fall gilt nicht der nachfolgende Aufbau, sondern die Formatierungen werden über das Wort „Style“ eingebaut.

Beispiel:

 <p style=“color: red;“> Text </p> 

Das Wort „Text“ wird in diesem Beispiel dann in rot ausgegeben.

Möchte man innerhalb eines bestimmten Elementes nur einige Wörter hervorheben, geht das durch den Befehl

 <span> </span> 

Ein Beispiel:

 <p>In diesem Beispielsatz soll nur das Wort <span style=“color: red;“>Beispiel</span> in rot hervorgehoben werden</p> 

Anzeige:

In diesem Beispielsatz soll nur das Wort Beispiel in rot hervorgehoben werden.

Anmerkung: Wer Wert auf eine suchmaschinenoptimierte Website legt sollte dieses sogenannte „Inline-CSS“ nur selten verwenden. Die eleganterer Version ist immer die Definition einer sogenannten „Klasse“ oder „ID“ im Stylesheet, die dann im HTML-Code verwendet werden kann.

Klassen und IDs

Es gibt in CSS die Möglichkeit, für einzelne Elemente sogenannte „Klassen“ oder „IDs“ anzulegen. Damit könnten Sie zum Beispiel vorgeben, dass nicht alle Überschriften einer Ebene in der selben Art formatiert werden, sondern die Überschriften innerhalb eines Blogartikel in einer anderen Farbe und Schriftgröße angezeigt werden.

Klassen dürfen in einer Website mehrfach verwendet werden. Sie eignen sich zum Beispiel für die Definition verschiedenfarbiger Überschriften oder anderer Bereiche, die auf einer Seite mehrfach vorkommen können. Sie werden im Stylesheet mit einem vorangestellten Punkt (.) definiert.

IDs dürfen auf einer Website nur einmal vorkommen. Diese verwendet man für fest definierte Bereiche wie zum Beispiel die Sidebar oder den Inhaltsbereich. ID’s werden im Stylesheet mit einer vorangestellten Raute (#) definiert.

Um für die Überschriften im Blog eine andere Farbe und eine andere Schriftgröße zu definieren gehen Sie folgendermaßen vor:

Legen Sie im HTML-Editor einen Namen für diese Überschrift fest, zum Beispiel:

 <h2 class=“blog“> 

In der CSS-Datei können Sie diese Klasse dann definieren, indem Sie als Selektor den vergebenen Namen mit einem „.“ davor vergeben:

Beispiel für die Darstellung

h2 {font-size: 18px; color: red;}

h2 .blog {font-size: 20px; color: blue;}

Anzeige:

<h2>Das ist ein Beispieltext</h2>	

Das ist ein Beispieltext

<h1 class=“blog“>Das ist ein Beispieltext</h1>

Das ist ein Beispieltext

Stylesheet

Wie oben erläutert kann man alle Formatierungen über die entsprechende Angabe im HTML-Editor einer Seite oder eines Artikels verwenden, um eine einfache Anpassung vorzunehmen.

Wenn Sie aber bestimmte Elemente dauerhaft und mit Gültigkeit für die gesamte Website verändern möchten und die Theme-Optionen diese Möglichkeit nicht bieten, ist es sinnvoll, diese Anpassungen direkt im Stylesheet vorzunehmen.

Anmerkung: Bitte schreiben Sie die Änderungen nach Möglichkeit nicht direkt in die style.css Ihres Themes. Dort haben Sie nur bis zum nächsten Theme-Update Freude daran. Mit einem Update werden die Theme-Dateien überschrieben und damit auch Ihre individuellen Anpassungen.

Viele Themes haben in den Theme-Options einen Bereich für die sogenannte „Custom CSS“. Wenn es einen solchen Bereich auch für Ihr Theme gibt können Sie Ihre individuellen Anpassungen direkt in dieses Feld schreiben.

Wenn Ihr Theme keine Custom CSS mitbringt können Sie auch ein PlugIn wie „Simple Custom CSS“ installieren. Nach Installation des Plugins finden Sie im WordPress-Backend unter „Design“ einen neuen Menüpunkt „CSS anpassen“, in dem Sie Ihre individuellen CSS-Regeln eintragen können.

Sie wollen mehr als nur ein paar Kleinigkeiten in Ihrem Theme anpassen?

Dann empfehle ich in jedem Fall die Einrichtung eines sogenannten Child-Themes.

Vorschau

In den nächsten beiden Teilen dieser Serie stelle ich einige der wichtigsten CSS-Regeln vor und erkläre Ihnen, wie Sie mit Hilfe von Entwickler-Werkzeugen herausfinden können, wie das gewünschte Element im Stylesheet definiert ist.

Bildquelle:
© coramax – Fotolia.com