Der CSS-Katalog


Da viele Tutorials Grundkenntnisse in CSS voraussetzen, habe ich hier ein CSS-Katalog erstellt, welches an sich kein eigenes Tutorial ist, sondern als Begleitmaterial für andere Tutorials dient.

Achtung: Dieser Post ist nicht dafür geeignet, CSS in seiner Gesamtheit zu erlernen.

Benutzen von CSS

CSS ist für das Aussehen jeder Webseite verantwortlich (nicht verwechseln mit dem Aufbau!). Im Prinzip ist die Sprache sehr einfach. Ihr braucht einen Selektor (Adressat), den ihr ansprecht und eine Anweisung bestehend aus Attribute und Werte zuweist. Im Grunde sieht ein CSS-Code so aus:
Selektor {
Attribut: Wert;
}
Dem angesprochenen Selektor kann man unendlich viele Anweisungen, also Attribute und Werte geben. Der Selektor ist abhängig vom HTML, denn CSS ist dafür da um HTML-Elemente zu gestalten.

Einfache Attribute von CSS

Je nach dem ob ihr ein Block-Element (div-Elemente, Bilder) oder ein Schrift-Element (a-Elemente, span-Elemente) gestalten wollt, gibt es verschiedene Attribute. Manche kann man auch bei beidem einsetzen. Im folgenden gehe ich auf einfache Attribute ein und welche Werte man jeweils einsetzen kann.

Höhe und Breite (nur Block)

width | height: [Zahlen-Wert mit Größeneinheit];

Erklärung der Größeneinheiten:

  • px = Pixel
  • em = Höhe der verwendeten Schrift
  • % = Prozentsatz - relativ zum Elternelement (Element, indem sich das bearbeitete Element befindet)
  • auto = wird ohne Maßangabe benutzt, damit sich das Attribut sich an das andere vorgegebene Attributwert anpasst (zB. width ist fest vorgegeben, dann kann mit height:auto; die Höhe sich anpassen, damit das Bild nicht verzerrt wird). Funktioniert nur bei Bilder.

Beispiele:

width: 50px;
height: 5em;
width: 100%;
height: auto;

Rahmen (Block, Schrift)

border-top | border-right | border-bottom | border-left: [Zahlen-Wert mit Größeneinheit] [Art des Rahmens (double, dashed, dotted, solid)] [Farbe];

Erklärung der Werte:

  • dashed = gestrichelt
  • dotted = gepunktet
  • double = doppelter durchgehender Strich
  • solid = durchgehender Strich

Beispiele:

border-top: 1px solid #000000;
border-left: 3px dashed rgb(174, 255, 7);
border-right: 5px dotted #ffffff;

Hintergrundfarbe (Block, Schrift)

background-color: [Farbe];

Beispiele:

background-color: #ffffff;
background-color: rgb(0, 0, 0);

Schrift-Attribute von CSS

Im folgenden werden CSS-Attribute gezeigt, die nur auf Schriften anwendbar sind (h1 bis h6, a und span Elemente).

Schriftgröße

font-size: [Zahlen-Wert mit Größeneinheit];

Beispiele:

font-size: 5em;
font-size: 15px;

Schriftfarbe

color: [Farbe];

Beispiel:

color: #ccdd66;

Textformatierung

text-align: [center, left, right oder justify];

Erklärung der Werte:

  • center = zentriert
  • left/right = links/rechts
  • justify = Blocksatz

Beispiel:

text-align: left;

Schriftformatierung

text-transform: [uppercase, lowercase, capitalize, none];

Erklärung der Werte:

  • uppercase = alles in Großbuchstaben
  • lowercase = alles in Kleinbuchstaben
  • capitalize = erster Buchstabe groß, Rest klein
  • none = keine Formatierung

Beispiel:

text-transform: uppercase;

Schriftart (nur Schrift)

font-family: [Schriftname], [alternative Schriftart];

Wie ihr eine Schrift einbindet, wird hier in den ersten 3 Schritten erklärt: http://www.copypastelove.de/2011/11/schriftart-bei-posttitel-andern.html

Beispiel:

font-family: 'Verdana', sans-serif;

Zeichenabstand (nur Schrift)

letter-spacing: [Zahlenwert mit Größeneinheit];

Erzeugt Abstand mit der angegebenen Größe.

Beispiel:

letter-spacing: 0.5em;
letter-spacing: 1px;


Diese Liste wird natürlich aktualisiert. Falls ihr etwas gerne wissen wollt, lasst es mich in den Kommentaren wissen!

5 Kommentare

  1. Liebe Mira,
    das ist ja eine tolle Idee. Das ist eine Reihe, die du definitiv weiterführen solltest :) Mich würde zum Beispiel interessieren, wie man den Abstand der einzelnen Bereiche in der Sidebar verändert. Habe allerdings einen WP Blog.
    Vielen Dank und liebe Grüße, Bee

    AntwortenLöschen
  2. Ich finde es super, dass du wieder mehr in die "Tutorial"-Richtung gehst! Gerne mehr davon!

    AntwortenLöschen
  3. Eine wirklich sehr hilfreiche Einleitung zu dem Thema CSS :)
    Liebe Grüße ♥

    AntwortenLöschen
  4. Ich kann mich den anderen Mädels nur anschliessen: Eine tolle Idee, ich hoffe richtig, dass es davon noch einige Fortsetzungen geben wird. Vielen Dank für Deine Arbeit. :-)

    AntwortenLöschen
  5. Könntest du erklären, wie man es hinbekommt, dass wenn man Dotted striche über und unter dem Postille hat, wie man diese dann verschiebt, quasi weiter vom post Titel entfernt vom abstand her?

    Ohje was ein schrecklicher satz...

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!