Tipps Web & Blog Wordpress

Mit CSS Blogelemente stylen

Stylistische Veränderungen per CSS

Um eine ganze Website mit CSS zu stylen bedarf es natürlich ausreichend Erfahrung. Es ist allerdings gar nicht so schwer einzelne Elemente deines Blogs zu stylen. Mag dein Theme auch noch so schön und ausgefeilt sein, es gibt immer wieder Stellen, die man gerne verändern würde und wie das geht zeige ich Dir.

Eine kleine Warenkunde

Erklärung des CSS Codes

Was ist CSS?

CSS (cascading stylesheets –kaskadierende Stilvorlagen) ist eine Programmiersprache mit der du bestimmte Elemente in deinem Blog gestalten kannst. So kannst du Schriften, Absätze, Bilder, Linien, Rahmen usw. in ihrer Größe, Farbe und Position verändern.

Das ist vergleichbar mit dem Umgestalten eines Raumes. Du möchtest beispielsweise die Wände deines Schlafzimmers farblich verändern.

Der CSS Code setzt sich zusammen aus selektor (Element),  property (Eigenschaft) und value (Wert) und ist folgendermaßen aufgebaut:

Element {
Eigenschaft: Wert;
}

Im Falle deines Schlafzimmers:

Schlafzimmer{
Wand: blau;
}

Möchtest du die Überschrift eines Absatzes in Farbe und Größe verändern könnte das so aussehen:

Überschrift {
Textgröße: 12 Pixel;
Textfarbe: blau;
Textneigung: schräg;
}

Ganz so einfach ist es dann leider doch nicht, da es vorgegebene Eigenschaften und Werte gibt. Unser Beispiel mit der Überschrift würde demnach wie folgt aussehen:

h1{
font-size: 12px;
color: blue;
font-style:italic;
}

Die Schriftgröße könnte man auch in pt oder em definieren, bzw in Prozent vergrößern. Die Farbe ist natürlich in dieser Form sehr grob definiert und als Hexawert in Nuancen darstellbar z.B. so: #175fd7

Wer sich ausführlich über Eigenschaften und Werte informieren möchte, findet hier ein umfassendes Werk:

https://wiki.selfhtml.org/wiki/CSS

Hier kommt eine Reihe wichtiger Codes:

Text eines Absatzes (p) stylen

Der Reihe nach Schriftgröße, Schriftstil, Farbe, Zeilenhöhe, Schriftstärke, Zeichenabstand, Wortabstand, Textdekoration (unterstrichen, durchgestrichen, blinkend, ohne, überstrichen), Textbereich(Nur der erste Buchstabe groß, alle Buchstaben groß, alle Buchstaben klein), Textausrichtung (links, rechts, zentriert, Block)

p{
font-size: 12px; …. oder 1.2em; …..oder 120%;
font-style: italic; ….. oder oblique; …..oder normal;
color: black; …..oder red; …..oder #123456;
line-height: 12px …..oder1.2em ……oder 120%
font-weight: 100; ….oder 300; …. oder bold; ….oder bolder; ….oder light;
letter-spacing:1,2em;
word-spacing:1.2em;
text-decoration: underline; ….oder line-through; ….oder blink; …..oder none; ….oder overline;
text-transform: capitalize; …..oder uppercase;…..oder lowercase;
text-align: left; ….oder right; ….oder center; ….oder justify;
}

All diese Eigenschaften und Werte können auch für Überschriften h1, h2, h3, h4, h5 eingestzt werden. Bitte beachte dabei die Reihenfolge der Größe. H1 sollte immer die größte und die folgenden entsprechend kleiner werden.

Vielfältige Rahmen definieren

Jedes Element kann ganz, teilweise, gepunktet, doppelt und in allen Farben umrahmt werden. Ich erkläre hier zunächst nur ein Beispiel, anschließend weitere Eigenschaften und Werte:

h1{
border-width: 1px;
border-style: solid;
border-color: #000;
}
Die erste Überschrift erhält einen normalen, schwarzen Rahmen der 1px stark ist.

border, border-left, border-top, border-right, border-bottom
(ganzer Rahmen, nur links, nur oben, nur rechts, nur unten)

border-style:solid, ….oder dotted, ….oder dashed; ….oder double;
(Rahmenstil: durchzogen, gepunktet, gestrichelt, doppelt)

border-width
(Dicke des Rahmens in px, em oder thin, thick, medium)

Abstände von Elementen

Grafik CSS Abstände

Das Thema Abstände ist in Verbindung mit der Positionierung von Elementen sehr komplex. Für kleine Stylings, die in diesem Artikel gemeint sind, ist es lediglich wichtig zu wissen wie man den Elementen etwas Raum gibt oder sie verschiebt.

Padding

Mit der Eigenschaft padding bestimmst du den Abstand zwischen einem Element und seiner Aussengrenze oder seinem Rahmen(sichtbar oder unsichtbar). Dieser Wert bestimmt den Raum oder das Polster um das jeweilige Element. Der Wert kann nur positiv sein.

Text mit und ohne cssDer Textrahmen links mit padding, rechts ohne.

p{
padding-top:20px;
padding-right:25px;
padding-bottom:20px;
padding-left:15px;
}

oder diese Schreibweise von top im Uhrzeigersinn bis left

p{
padding:20px 25px 20px 15px;
}

Margin

Der Abstand zwischen den Elementen wird mit der Eigenschaft margin bestimmt. Man bewegt das Element also mit der Regulierung des Abstands zum angrenzenden Element. Die Werte dürfen auch negativ sein.

Textblog mit margin verschieben

Die Textbox wurde nach unten verschoben.

p{
margin-top:20px;
}

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Schreibe einen Kommentar

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