Was ist CSS und wie passt man damit seine Website an?

Du hast schon einmal gehört, dass CSS ein nützliches Tool für die Gestaltung und Anpassung deiner Website ist? Aber was genau ist CSS?

CSS steht für „Cascading Style Sheets“ und ist eine Methode, um Design-Anweisungen direkt in den Programmcode deiner Website zu integrieren. Bevor wir das vertiefen, sollten wir erst einmal klären, was mit „Code“ gemeint ist und was „Code“ kann.

Der Website-Code ist die Sprache, in der einem Browser gesagt wird, wie eine Website aussehen und was sie machen soll. Am häufigsten wird dafür HTML (Hypertext Markup Language) verwendet. Dieser Code regelt, welche Elemente auf einer Website angezeigt werden. Mit HTML kannst du z. B. vorgeben, wo eine Überschrift sitzen soll, wie ein Absatz umgebrochen wird oder wie groß ein Bild sein darf.

CSS ist eine Erweiterung von HTML, mit der du das Design anpassen kannst. CSS dient z. B. dazu, die Farbe einer Überschrift oder die Schrift für deine Texte vorzugeben. HTML ist für das große Ganze zuständig – sozusagen das Haus, in dem deine Website wohnt. CSS ist dagegen der Innenarchitekt, der z. B. die Farbe der Wände, die Fenstergröße und die Breite des Eingangsbereichs bestimmt. Mit CSS kannst du das Aussehen deiner Website anpassen und den Stil deiner gesamten Website vorgeben. CSS sorgt also dafür, dass das Aussehen deiner Website zu deinem Marken-Image passt.

Die Elemente von CSS

Bevor wir uns den einzelnen Schritten zum Hinzufügen von angepasstem CSS-Code zu deiner Website widmen, sollten wir noch ein paar Begriffe klären. Wenn wir über CSS sprechen, gibt es drei Hauptkomponenten, die du kennen musst: Selektoren, Eigenschaften und Werte.

Ein Selektor verwendet HTML-Code, um den Teil deiner Website anzugeben, den du gestalten willst. Beispielsweise ist der HTML-Code für einen Absatz „p“. Willst du mit CSS den Absatzstil ändern, ist „p“ dein Selektor.

Mit Eigenschaften und Werten werden dann den einzelnen Selektoren stilistische Anweisungen zugewiesen. Sollen deine Absätze in roter Schrift erscheinen, wird zuerst die Eigenschaft angegeben. Diese bezieht sich auf das spezielle Attribut, das du ändern willst (in diesem Beispiel die Farbe). Der Wert gibt an, wie dieses Attribut geändert werden soll (in diesem Beispiel in Rot).

Der CSS-Code für einen roten Textabsatz würde dann so aussehen (beachte die besondere Interpunktion bei CSS):

p {

color: red;

}

Jedes Mal, wenn das „p“ im Website-Code auftaucht, wird der Text in Rot gestaltet. Wenn du mehr über die Grundlagen von CSS wissen willst, findest du bei WordPress.com viele hilfreiche Ressourcen und Anleitungen.

Verwenden von CSS mit WordPress.com

Es gibt zwei Möglichkeiten, wie du deine WordPress.com-Website mit CSS anpassen kannst. Bei der ersten Methode fügst du die CSS-Befehle direkt in den HTML-Code ein. Dafür musst du im WordPress.com-Editor zur HTML-Ansicht wechseln. Hier kannst du den entsprechenden Code-Abschnitt überall dort einfügen, wo dieser CSS-Stil verwendet werden soll. Bei dieser Methode musst du allerdings den CSS-Code auf jeder einzelnen Seite und bei jedem Beitrag einfügen.

Für eine umfassendere Anpassung deiner Website brauchst du Zugriff auf die Funktion „Individuelles Design“. Diese ist beim Premium- und Business-Tarif von WordPress.com inbegriffen. Du findest die Funktion unter Design > Customizer > CSS.

Die folgenden Beispiele zeigen, wie du deine Website mit CSS gestalten kannst.

Ändern der Textfarbe mit CSS

Verwendet dein Theme standardmäßig gelbe Unterüberschriften, du aber hierfür lieber grüne Schrift hättest, kannst du die Farbe mit CSS ändern. Der HTML-Code für Unterüberschriften ist „h2″ (das ist dein Selektor). Die Eigenschaft, die du änderst, ist die Farbe, und der neue Wert für diese Eigenschaft ist „grün“. Also fügst du den folgenden Code in den CSS-Anpassungsbereich im Customizer ein:

h2 {

color: green;

}

Mit dieser Eigenschaft kannst du auch die Farbe des Textkörpers ändern:

body {

color: blue;

}

Ändern von Schriftart und Schriftgröße

Gefällt dir die Standardschrift deines Themes nicht, kannst du sie mit der Eigenschaft „font-family“ ändern:

h2 {

font-family: Helvetica;

}

Mit dem oben gezeigten Code wird die Schrift deiner Unterüberschriften in Helvetica geändert. Es stehen jedoch viele andere Schriftarten zur Auswahl.

Du kannst auch die Schriftgröße ändern. In CSS wird die Schriftgröße in Prozentwerten angegeben. Der folgende Code zeigt eine Änderung der Unterüberschriftgrößte auf 250 %:

h2 {

font-size: 250%;

}

Mit diesem Code kannst du die Schrift und die Schriftgröße gleichzeitig ändern:

h2 {

font-family: Helvetica;

font-size: 250%;

}

Weitere Texteigenschaften, die du kennen solltest, sind die Schriftstärke (fett oder normal), der Schriftstil (kursiv oder nicht) und weitere Texteffekte (z. B. unterstrichen, Linie über dem Text, durchgestrichener Text).

Ändern des Zeichenabstands

Manchmal sieht die Schrift zwar gut aus, aber die Buchstaben stehen zu dicht beieinander. Bei Selfhtml findest du Tipps, die du mit CSS den Zeichenabstand ändern kannst. Sehen die Buchstaben zu dicht gedrängt aus, kannst du das mit diesem Code ändern:

p {

letter-spacing: 0.5 em;

}

Probiere einfach verschiedene Zahlenwerte aus, bis dir der Zeichenabstand gefällt.

Erste Schritte

Was also ist CSS? Inzwischen kannst du diese Frage beantworten und weißt jetzt genug, um einfach mal loszulegen. Tipp: Du kannst jederzeit weitere Fragen in den Foren von WordPress.com stellen.