Montag, 7. April 2014

Grundlegende CSS Codes

Eine umfangreiche Sammlung aller CSS-Codes findet ihr unter http://www.css4you.de/

Backup

Bevor ihr das CSS eurer Seite bearbeitet, erstellt erstmal eine Sicherheitskopie eurer Vorlage. Klickt dafür im Blogger-Dashboard rechts oben auf "Backup / Wiederherstellung":


Es erscheint dann ein Popup wo ihr das Backup herunterladen könnt.



Schriftart, Schriftgröße und Schriftfarbe ändern

Um die Schriftart eures Blog zu ändern, klickt im Blogger-Dashboard auf "Vorlage" und dann auf "HTML bearbeiten". Drückt Strg+F und sucht nach "body {". Hier werden CSS-Angaben, die für die gesamte Seite gelten, eingefügt.

Der Code sollte in etwa wie folgt aussehen:

body {
font-family: Arial, Helvetica sans-serif;
font-size: 10pt;
line-height: 13pt;
color: #888;
}



Das sind die Angaben für Schriftart, Schriftgröße, Zeilenabstand und Schriftfarbe. Wenn ihr dort die Werte verändert, wirkt es sich auf die gesamte Seite aus. Für Schriften gibt es folgende mögliche Angaben:

Schrifteigenschaften (bei Klick auf die einzelnen Eigenschaften gibt es noch weitere Infos zu den Werten, die ihr pro Eigenschaft vergeben könnt)


Farben anpassen


Farben werden mittels folgender Codes angeben:

color: #555;
background-color: #fff;


Alle Infos und Werte findet ihr hier: Farben

CSS-Angaben auskommentieren

Wenn ihr eine kleine Änderung ausprobieren wollt, könnt ihr auch einfach den CSS-Code auskommentieren. Dann bleibt er im Code, aber wird für die Seite nicht mehr ausgelesen. Um einen Code auszukommentieren, muss er zwischen einem Schrägstrich & Sternchen eingebettet sein:

/* Ich bin auskommentiert */

Wenn ihr das /* */ dann wieder entfernt, wird der Code wieder aktiviert. Ich verwende das z.b. um zu testen, wie sich eine kleine Änderung von Abständen / Schriftgrößen auswirkt oder um die ursprüngliche Größe eines Elementes zu "speichern" so dass ich sie dann später wieder zurück ändern kann, z.b. so:

.box {
font-size: 11pt;  /* vorher 10pt */
background-color: #fff;
width: 500px; /* vorher 250px */
}



Kommentare :

  1. Also... irgendwie komme ich nicht so ganz klar...
    Ich versuche (um die Schriftart zu ändern) auf "HTML bearbeiten" zu klicken und die dann geht zwar die Seite mit dem HTML-Code auf, aber wenn ich auf "strg" und "F" drücke und dann in die Suchleiste "body{" eingebe, dann finde ich kein Ergebnis... Auch, wenn ich selbst durch den Text gehe, finde ich nichts, was auch nur ähnlich ausseiht. Was mache ich falsch? Oder liegt es nicht an mir??

    AntwortenLöschen
  2. Relativ oben im Code hast du doch stehen - davor ist ein Pfeil. Klapp das mal auf und such dann nochmal.

    Geht es?

    Liebe Grüße,
    Julia

    AntwortenLöschen
    Antworten
    1. Vielen Lieben Dank! Jetzt habe ich es gefunden!

      Löschen