Einfaches CSS für Pagewizz Artikel

Was bedeutet CSS?

CSS ist die Abkürzung von Cascading Style Sheets. Und einfaches CSS bedeutet hier, dass ich in diesem Artikel nur auf ein paar wenige von unendlich vielen Anwendungsmöglichkeiten eingehen werde. Zum Beispiel: Wie man farbige Boxen für Pagewizz Artikel macht! 

CSS-styling kann für alle möglichen Dekorationstricks verwendet werden...

                                                                                                           Aber Vorsicht!!!

Hey!Das ewige Blinken nervt fürchterlich!

Das kann ja niemand lesen und die Farbe passt hier auch nicht rein!

Diese Box wirft das elegante Pagewizz Farben-Design total über den Haufen! Nich gut.

"Auweia Braxmeier!  ”

Der erste Eindruck ist entscheidend! Wenn der Leser sofort mit einer Farbenschlacht überfallen wird, nimmt er den Rest auch nicht mehr ernst und klickt gleich wieder weg. Und das macht Simon und Hans sauer!                                    Auweia, lieber Herr Braxmeier!

"Da lachen sogar die Elche!”

Wie ihr selbst sehen könnt - das ist zu viel des Guten. Simple CSS on Steroids! Help!

Wie man farbige Boxen macht, die zum Pagewizz Color Scheme passen - Weniger bringt hier mehr!

Mit einer leicht-orangen Box kann man einen wichtigen Textteil auf geschmackvolle Weise hervorheben. Kein Blinken, keine übergrossen Schriften, keine hässlichen Farben oder schlechten Farbkombinationen - so ist es viel angenehmer für's Auge des Lesers.

 Und so sieht dieser einfache CSS Code aus:

<p style="padding: 5px; background-color: #FCF8C0; border: dotted 2px #FF9900;"><b>EUER TEXT STEHT HIER!</b></p>

Anstatt "EUER TEXT STEHT HIER" habe ich den Text für die obige orange Box eingetragen. Ihr schreibt hier natürlich jene Zeilen, die ihr in eurem Artikel besonders hervorheben möchtet.

Am besten kopiert man diesen Code in ein Worddokument, ergänzt ihn mit dem gewünschten eigenen Text und kopiert ihn dann als Ganzes in den HTML Editor.

Im HTML-Editor "Aktualisieren" und im nachfolgenden Text-Editor "Speichern". Fertig!

Drei weitere Beispiele für einfache CSS Boxen...

Hier soll euer Text eingefügt werden!

Und so sieht der CSS Code aus:

<p style="padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;"><b>Hier soll euer Text eingefügt werden!</b></p>

Wenn man den Text nicht fettgedruckt haben will, nimmt man einfach die zwei Klammern "<b>" und "</b>" aus dem Code heraus.

Hier soll euer Text eingefügt werden!

Code im Normaldruck:

<p style="padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;">Hier soll euer Text eingefügt werden!</p>

Das ganze jetzt mit einer durchgehenden Linie:

Hier kommt euer Text rein, gell?

 Und der Code dafür lautet:

<p style="background: #E1E8F2; padding: 15px; margin: 0;border: solid 05px #069;">Hier kommt euer Text rein, gell?</p>

Zum Schluss noch eine ganz tolle Box für ganz besondere Anlässe:

Ich sitze hier und kaue Speck und wer mich lieb hat, holt mich weg!

Der Code für diesen schönen Rahmen:

<p style="border: outset 05px #069; padding: 10px;background: #ff6600;">Ich sitze hier und kaue Speck und wer mich lieb hat, holt mich weg!</p>

Einfaches CSS nochmals erklärt:

Der Code besteht aus drei Teilen...

• was vor dem Text steht, z.B.: <p style="border: outset 05px #069; padding: 10px;background: #ff6600;">
• der Text selbst, z.B.: Ich sitze hier und kaue Speck und wer mich lieb hat, holt mich weg!
• was am Ende steht: </p>
• der eigene Text wird direkt zwischen den zwei Code-Teilen eingefügt - ohne Zwischenraum! <p style="border: outset 05px #069; padding: 10px;background: #ff6600;">Ich sitze hier und kaue Speck und wer mich lieb hat, holt mich weg!</p>
• wenn man fettgedruckten Text haben möchte, fügt man direkt vor dem Text das <b> ein, und direkt nach dem Text ein </b>: <p style="border: outset 05px #069; padding: 10px;background: #ff6600;"><b>Ich sitze hier und kaue Speck und wer mich lieb hat, holt mich weg!</b></p>