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.