Individuelle Anpassungen – Mit CSS kein Problem

CSS TutorialImmer 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

Print Friendly, PDF & Email

Kommentare

Individuelle Anpassungen – Mit CSS kein Problem — 13 Kommentare

  1. Toller Leitfaden, ich freue mich auf die nächsten Teile!

    Ja, der WordPress Editor macht es einem nicht leicht kleine Änderungen vorzuehmen und wenn man keine großartigen Kenntnisse in HTML hat, muss man immer wieder nachschlagen. Schön, dass ich jetzt hier eine weitere nützliche Quelle finden kann 🙂

    PS: Im Satz „In diesem Beispielsatz soll nur das Wort Beispiel in rot hervorgehoben werden.“ stimmt die rote Farbe nicht ganz 🙂

  2. Hallo Michaela !
    Ich habe foldendes Problem: Ich arbeite in WP mit dem TinyMCE Editor.
    In WP ist weiter der Profit Builder von Joan Donahoe installiert.
    Wenn ich dort einen Text gestalten möchte komme ich scheinbar an die Grenzen dieses Editors. Ein Beispiel soll das verdeutlichen:

    ÜBERSCHRIFT (jetzt Return weil ich eine Zeile tiefer will)
    Hier also kein Problem. Aber im Editor setzt dieser jetzt eine Riesenspalte die ich nicht ausschalten kann.

    Weiteres Beispiel:

    ÜBERSCHRIFT
    TEXT TEXT
    TEXT TEXT
    Das ist im Tiny Editor alles nicht möglich !? (Hier habe ich ab dem Wort alles mit dem Cursor einfach die Reihe weiter eine Reihe tiefer verschoben. Bei Tiny kommt dann ein Wort aus der obersten Reihe mit hinterher)

    Gibt es da irgendein Plugin das weiter hilft. CSS das Zauberwort – aber das beherrsche ich nicht.

    Ich hoffe Du kannst da helfen. . .
    LG!
    Ingrid

    • Hallo Ingrid,

      ich habe ein bisschen Probleme, das Problem zu verstehen. Leider kenne ich das Plugin „Profit Builder“ nicht besonders gut, ich weiß also nicht weilchen Editor dieses Plugin für die Texteingabe verwendet.

      Das was Du beschreibst klingt ein bisschen danach als wäre im CSS für einen Absatz ein relativ großer Abstand nach unten eingerichtet. Dazu etwas zu sagen ist aber ohne konkretes Beispiel sehr schwierig.

      Wenn Du einfach nur eine Zeile tiefer möchtest ohne einen Absatz zu erstellen kannst Du auch einfach die Feststelltaste und Return drücken. Damit erstellst Du eine einfache Zeilenschaltung.

      Vielleicht hilft Dir das schon weiter?

      Herzliche Grüße
      Michaela

      • Hallo Michaela !
        Dank für die schnelle Antwort.
        Profit Builder ist ein Plugin für WP und verwendet den selben Editor.
        Gelöst ist das Problem für mich nicht aber ich habe den Text jetzt erst einmal als Bild eingefügt.

        LG!

  3. Hallo Michaela!

    Es ist eine ganz wunderbare Arbeit die Du da machst! Du hast mir schon viel geholfen, doch nun komme ich nicht weiter.
    Ich möchte gerne auf meine Website mit der post=954 das Textfeld in dieser Farbe haben #E0FFFF. Also nicht der Hintergrund, sondern das Textfeld selbst! Kannst Du mir da helfen? Die WP-Theme ist Revive!
    Herzliche Grüße
    Ulrich

    • Hallo Ulrich,

      kannst Du mal einen Link posten zu der Seite auf der Du das ändern möchtest?

      Herzliche Grüße
      Michaela Steidl

  4. Hallo Michaela,
    danke für Deine Antwort!
    Ich arbeite noch nicht lange mit WP. Simple Custom CSS habe ich installiert und möchte diese Änderung nur für die Seite post=954 einfügen!
    Kannst Du mir da die ganze Befehlszeile sagen!

    Lieben Dank schon im Voraus!
    Ulrich

  5. Hallo Michaela, vielen Dank für deine Mühe!

    Damit hat es jetzt geklappt:

    body.page.page-id-954 #content {
    background: #99C4CD;
    }

    Herzliche Grüße
    Ulrich

  6. Hallo in die Runde,

    ich habe ein kleines Problem und hoffe mit kann hier jemand helfen. Ich betreibe seit etwa einem Jahr einen kleinen Koch Blog. So weit funktioniert alles und ich wachse langsam aber stetig.
    Leider habe ich das Problem, das mein Template immer zwei H1 Überschriften generiert, was SEO Technisch nicht gut ist hab ich mir sagen lassen. Ich habe aber Angst im CSS rum zu Docktern, da ich mich da nicht so gut auskenne. Gibt es noch eine andere Möglichkeit eine von den beiden H1 abzustellen ???

    Gruß Claudia

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren