Kommentare 18

CSS für Anfänger (Teil 1): Deine CSS-Fragen beantwortet

CSS Tipps für Anfaenger Da einem schnell mal der Kopf schwirrt und viele Fragen auftauchen können, wenn man mit CSS noch nicht so vertraut ist, werde ich in den folgenden zwei Artikeln ein paar Antworten zusammen gestellt, die dir den Start in die Arbeit mit CSS hoffentlich erleichtern. Wenn du weitere CSS-Fragen oder hilfreiche CSS-Tipps für Newbies hast, schreibe mir diese doch einfach in einem Kommentar hier im Artikel.

1. Was ist eigentlich ein CSS-Reset?

Da alle Browser leicht andere Standard-Einstellungen haben, kann man mit Hilfe von CSS-Reset Styles am Anfang des Stylesheets bestimmte Werte auf einen einheitlichen Standard-Wert zurücksetzen. So hat man etwas mehr Kontrolle darüber, dass alle Styles in allen Browsern einheitlich dargestellt werden und man weiß, von welchen Grundwerten man ausgehen kann. Es gibt vorbereitete Standard Reset-Styles, wie das Reset CSS von Eric Meyer (in der überarbeiteten Version). Es ist aber auf jeden Fall empfohlen, dass du deine Reset-Styles immer noch individuell an die Bedürfnisse deines Projekts anpasst.

Eine Alternative ist auch noch der Einsatz des Normalize.css Stylesheets von Nicolas Gallagher. Normalize.css ist ein modernes, vorbereitetes Stylesheet zum kostenlosen Download, mit dem man alle Browser-Grundwerte standardisieren kann. Mehr Infos zum Normalize.css-Projekt findest auf der Webseite des Entwicklers.

2. Wie war das noch einmal mit margin und padding…?

Den Unterschied zwischen margin und padding kann man anfangs leicht verwechseln. Am besten versteht man das Prinzip meiner Ansicht nach, indem man es sich anhand einer Grafik veranschaulicht:

margin-padding-skizze

Margins sind also immer die äußeren Abstände eines Elements, padding dagegen die Abstände innerhalb eines Elements.

In den meisten Fällen ist es übersichtlicher und man benötigt weniger Code-Zeilen, wenn man nicht margin-left, margin-right usw. angibt, sondern die Kurzform: margin: 10px 10px 0 0; nutzt. In der Kurzform sind die Werte im Uhrzeigersinn angeben, begonnen wird beim Top-Wert (die 4 Werte stehen also für margin-top, margin-right, margin-bottom und margin-left). Bei der Padding-Eigenschaft funktioniert das Prinzip genauso.

margin-kurzschreibweise

Wenn die top- und bottom-Werte oder die left- und right-Werte gleich sind, kann man die Kurzform auch noch abkürzen und statt padding: 10px 30px 10px 30px; kurz schreiben padding: 10px 30px; . Wenn die left- und right-Werte zwar gleich sein sollen, die top- und bottom-Werte aber nicht, schreibt man: padding: 10px 30px 0; .

Bei 0 benötigt man keine Einheit, für padding und margin kann man neben px auch, em, rem oder Prozentwerte nutzen. Und das führt auch gleich zur nächsten Frage:

3. Was sind rem, em und px?

Es gibt im CSS verschiedene Einheiten, die z.B. für die font-size (Schriftgröße) oder für Abstände von margin oder padding genutzt werden können. Noch vor einiger Zeit war es üblich, meistens Pixel (kurz: px) für eine Pixel-genaue Angabe der Maße zu verwenden. Da durch die Verbreitung von mobilen Geräten aber immer flexiblere Webseiten-Designs benötigt werden, wird auch der Einsatz von den wenig flexiblen Pixel-Werten mehr und mehr abgelöst.

Ems sind beispielsweise sehr viel flexibler, da sie sich jeweils an der Standard-Schriftgröße orientieren. So wachsen die em-Werte also quasi mit, wenn sich die Schriftgröße der Webseite ändert.

Vorsichtig bei der Arbeit mit ems sollte man allerdings sein, da em-Werte in Abhängigkeit vom jeweiligen Eltern-Element stehen. Wenn ein Eltern-Element also 1.5em hat, werden diese 1.5em im Kind-Element automatisch als Standard-Wert (also gleich 1em) übernommen.

Die neue CSS3-Einheit rem funktioniert gleich wie em, übernimmt aber nicht die Eltern/Kind Element-Abhängigkeit und ist daher sehr viel einfacher zu handhaben. Allerdings wird sie von älteren Browsern (z.B. IE9) nicht unterstützt. Das bedeutet, man muss immer auch eine Fallback Pixel-Wert mit angeben (moderne Browser ignorieren den Pixel-Wert und können die rem-Einheit verwenden).

4. Was bedeutet die Eltern/Kind-Beziehung (Parent/Child) im CSS?

Wenn man damit anfängt HTML und CSS zu lernen, ist es glaube ich mit am wichtigsten, dass man sich immer das Verschachtelungs-Prinzip der HTML-Elemente verinnerlicht und diesen dann auch im CSS berücksichtigt.

Jedes Element, dass innerhalb eines anderen Elements sitzt, wird als Kind-Element (Child) des äußeren Eltern-Elements (Parent) bezeichnet.

Eigentlich ist es ganz einfach, doch oft sieht man vor lauter Code nicht mehr, wie die Elemente ineinander verschachtelt sind und man verliert den Überblick. Mir hilft es immer eine Skizze meines Webseiten-Projekts zu machen, in der ich alle Elemente noch einmal mit CSS-Klassen bezeichnet notiere. So kann man sich leichter das Prinzip verinnerlichen und den Aufbau des eigenen Projekts planen.

Im CSS ist es wichtig, die CSS-Klassen von Eltern- und Kind-Elementen immer im Überblick zu haben, damit man mit den Bezeichnungen und Werten nicht durcheinander kommt. Einige CSS-Eigenschaften vererben ihre Eigenschaften auch von den Eltern- auf die Kind-Elemente (z.B. die angesprochenen ems).

5. Was bedeutet die Bezeichnung !important?

!important kann hilfreich sein, um eine bestimmte CSS-Eigenschaft zu überschreiben, sollte aber mit Vorsicht eingesetzt werden. Wenn du ein WordPress-Theme nutzt und für diese ein Child-Theme anlegst, kannst du mit dem !important Zusatz deinen Styles vor allen anderen höchste Priorität setzen und somit andere zuvor erteilte Styles überschreiben.

Wichtig: Wenn möglich solltest du aber erst versuchen, die Bezeichnung der CSS-Eigenschaft so genau wie möglich zu definieren (also statt .entry-content …, .container .entry-content… ). In vielen Fällen kannst du so auf !important verzichten, was dein CSS flexibler macht.

Deine Fragen und Tipps

Hast du noch weitere CSS-Fragen oder kennst du Schwierigkeiten, die dir beim Lernen von CSS immer wieder Probleme bereitet haben? Über deine weiteren Fragen und Tipps für CSS-Newbies freue ich mich sehr!

18 Kommentare

  1. Ich kann Box-sizing: Border-Box empfehlen! Es ermöglicht die Umsetzung von Stylesheets in einer wesentlich realitätsnäheren Weise. Den Durchmesser einer Pizza messe ich ja auch von Rand zu Rand. Und so verhält es sich auch mit Border Box. Wird ein Wert für width oder heigth angegeben, dann beinhaltet dieser Wert schon die entsprechenden Angaben für Innenabstand und Rahmen, sodass dann nur noch ein bewusst gesetzter Außenabstand hinzukommt. Wird von vielen Browsern unterstützt und kann mit einem Polyfill sogar auf ältere IE Versionen angewendet werden. REM wiederum finde ich noch nicht ausreichen unterstützt um extra eine CSS damit und ein entsprechendes Fallback zu schreiben. Ist dann eine Frage von Aufwand und Nutzen.

  2. Man sollte aber nicht nur schauen, dass man auf !important verzichtet, sondern auch darauf, dass man Selektoren nicht um seiner selbst Willen überqualifiziert.

    Gerade wenn man in Child-Themes was überschreiben will reicht es in der Regel aus, den gleichen Selektor wie im Parent-Theme zu benutzen, da der im Child-Theme später kommt und daher Priorität hat.

  3. Ellen, das war ein guter Einstieg in CSS. Wenn Du mal zu viel Zeit haben solltest;-), wäre ein Bericht über Firebug wirklich hilfreich. Damit würden die User ein Tool an die Hand bekommen, um ein Theme selber zu bearbeiten.

    LG,
    Stephan

  4. Wirklich schön erklärt. Besser hätte man das in einem Lehrbuch auch nicht erklären können. Ich kannte zwar schon Alles, aber es macht doch immer wieder Sinn sich das noch mal wieder in Erinnerung zu rufen.

  5. Mac

    Margin und Padding verwechsele ich auch immer wieder. :-) Aber fiesesten ist es, wenn man einen Fehler sucht und dann nach Stunden merkt, dass man statt einen Doppelpunkt ein Semikolon getippt hat.

  6. “Allerdings wird sie von älteren Browsern (z.B. IE9) nicht unterstützt.” Herrlich. Danke, ich musste mal wieder lachen. IE9 ist eigentlich fast der neuste Browser von Microsoft. Aber selbst der IE10 ist zum kotzen. Aber wir kennen das bestimmt alle: Es gibt einfach keinen schlechteren Browser als den IE. Beste Werbung = schlechteste Browser, keine Werbung = bester Browser. Schade das kaum wer Opera nutzt. Die halten sich wenigstens an Webstandards.

  7. Stephan Lück

    Hallo Ellen, mich interessiert es auch ie9/ie10 schon info gibt bis auf -ms- und wie kann man scss/less unter WP einbinden kann wenn man die description auch als scss version nutzten möchte. Sowie zb flexbox für layout wie hier zb off canvas was mich auch interessieren würde

    lg

Schreibe eine Antwort