Textformatierungen in Blogs per CSS

Wer Texte im Internet verfasst, der will diese unter Umständen zur besseren Lesbarkeit formatieren. Meistens nutzt man die Fett- oder Kursivschrift. Trotzdem möchte man vielleicht bestimmte Textpassagen noch mehr hervorheben – und das geht per CSS wirklich klasse.

Natürlich könnte man mit Codes im Quelltext arbeiten – so ist der in der Einleitung versehene grüne Text mit “<span style="background-color: #a3df61">” codiert. Bei dieser Variante hat man aber nicht die Möglichkeit “mal eben schnell” komplette Boxen zu erstellen:

Kaffee gefällig?

Grüne Box

Rote Box

Gelbe Box

Wie realisiert man das Ganze? Man öffnet die style.css des Themes und trägt folgende Werte ein (Beispielwerte, die ich genommen habe):

/* GelbeBox */
p.gelb {
padding: 0.57143em 0.78571em;
background: #ffffa0;
border: 1px solid #e5e597;
}

Eine rote Box sieht so aus:

/* RoteBox */
p.rot {
padding: 0.57143em 0.78571em;
background: #ff4f52;
border: 1px solid #ef1d21;
}

Wer noch ein wenig mit Hintergrundbildern herumexperimentiert, kann dies auch tun – wie ich oben in der Box “Kaffee gefällig”. Dieser Code sieht so aus:

/* subfeed: Feed Image */
p.subfeed {
background: #f2f2f2 url(‚images/kaffeederherr.gif‘)
no-repeat top right;
padding: 0.57143em 0.78571em;
border: 1px solid #ddd;
}

Besagte Codes kommen – wie gesagt – in die style.css. Um diesen auch sichtbar zu machen, muss man beim Schreiben eines Textes in die HTML-Ansicht gehen. Text, der in einer roten Box erscheinen soll, müsste so formatiert werden: <p class="rot">Rote Box</p>.

Geile Sache – inspiriert via Hostintheshell.

Gefällt dir der Artikel? Dann teile ihn mit deinen Freunden.

caschy

Hallo, ich bin Carsten! Baujahr 1977, Dortmunder im Norden, BVB-Getaufter und Gründer dieses Blogs. Auch zu finden bei Twitter, Google+, Facebook, Instagram und YouTube. PayPal-Kaffeespende. Mail: carsten@caschys.blog

Das könnte dir auch gefallen…

Mit dem Absenden eines Kommentars willigst du unserer Datenschutzerklärung und der Speicherung von dir angegebener, personenbezogener Daten zu.

12 Kommentare

  1. schöne sache aber ist der Sinn der CSS Nutzung nicht der dass man den Style seines Inhaltes immer wieder neu ändern kann. wenn die Formatierung jedoch 1x gemacht wird und immer so bleibt, wie zb in einem Blog, ist es doch sinnvoller das ganze direkt im Code zu machen und nicht über Css zu gehen.

  2. @hoschi geh mal auf eine Seite und stell im Firefox unter Ansicht->Webseiten-Stil „Kein Siel ein“ und du wirst sehen das es sehr sinnvoll ist das Design in eine Externe CSS auszulagern.

    1. Könnte mann so für jeden Browser ein anderes Design Bauen.

    2. Laden Schmascheien Spider die CSS nicht mit wenn du jetzt das ganze im HTML Quellcode gepackt hast dann muss der Spider das ganze aber zwangsläufig mit laden und das verursacht auf beiden seiten unnötigen Traffic

  3. hoschi: Sinn von CSS ist es, Design und Inhalt zu trennen. Wenn du die Formatierung direkt in den PHP-Code von WordPress bzw. jeder anderen HTML-Seite schreibst, tust du eben genau das Gegenteil.

    In der HTML-Ausgabe definierst du nur die Befehle, wie z. B. Links verlinken (geile Wort-Kombination) oder erstellst mit div Container, die über class eine Eigenschaftsgruppe zugewiesen bekommen.

    Das Aussehen der definierst du (soweit möglich) immer in der CSS-Datei. Wenn du dann das Design ändern willst, brauchst du nur die CSS-Datei anpassen und eben nicht im HTML-Code pfuschen.

  4. Kaffee gefällig?

    da sag ich nicht nein 😀

  5. Bin ja anerkannter Koffeinjunkie 😉

  6. Also, wenn ich in diesem Post nicht die Kaffeetasse
    kennen gelernt hätte, dann wüsste ich nicht, dass dein neues favicon eine Kaffeetasse ist…

  7. Ja, mit das Einzige, womit man mich assoziieren kann – deshalb von mir gewählt =)

  8. chevygnon says:

    Das vorherige Favicon mag zwar inhaltsleer gewesen sein, aber es war auffällig und hatte, zumindest meiner Meinung nach, einen hohen Wiedererkennungswert.
    Die Kaffeetasse ist so unauffällig…

    Muss ich wohl doch mal ein Plugin zum Ändern des Favicons testen.

  9. Wenn du dein altes Favicon nicht mehr nutzt, was dagegen wenn ich das in etwas abgewandelter Form bei mir umsetze? 🙂

Du willst nichts verpassen?
Neben der E-Mail-Benachrichtigung habt ihr auch die Möglichkeit, den Feed dieses Beitrags zu abonnieren. Wer natürlich alles lesen möchte, der sollte den Hauptfeed abonnieren. Alternativ könnt ihr euch via E-Mail über alle neuen Beiträge hier im Blog informieren lassen. Einfach eure E-Mail-Adresse hier eingeben, dann bekommt ihr 1x täglich morgens eine Zusammenstellung. Mit dem Absenden willigst du unserer Datenschutzerklärung und der Speicherung von dir angegebener, personenbezogener Daten zu.
Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessern. Durch Deinen Besuch stimmst Du dem zu.