CSS

CSS3 ermöglicht die Einbindung beliebiger Schriften und Stilmittel auf Webseiten wie Schatten, Rundungen, Farbverläufe, Transparenzen und Animationen können ohne Grafiken umgesetzt werden. Und auch beim Box-Modell gibt's Neues zu entdecken. Eine Webseite wird mit Hilfe von CSS und HTML erstellt. Wobei CSS3 und HTML5 die jeweils neusten Versionen sind. HTML dient dazu, die Dokumente zu strukturieren, mit CSS werden die strukturierten Elemente anschließend formatiert. CSS ist die Abkürzung für „Cascading Stylesheets“, was übersetzt „gestufte Gestaltungsbögen“ heißt. CSS sind also Dokumente, auf denen die Befehle für die Darstellung einzelner Komponenten einer Webseite gespeichert sind, und so zum Beispiel Layout-Aspekte wie Schriftart und -farbe, Zeilenabstand oder die Position von Texten und Bildern festlegen. Mittels CSS kann auch ganz einfach mehreren Seiten das gleiche Layout zugeordnet werden. Es werden also Formateigenschaften von HTML-Elementen definiert. CSS3 ist das aktuellste Update. Als einige der Neuerungen sind hier die Erweiterung der RGB-Farben um Transparenz, Schlagschatten für Boxen und Texte und abgerundete Ecken zu nennen. Bisher wird noch nicht jedes CSS3-Feature von allen Browsern unterstützt. So kann es zum Beispiel beim Internet-Explorer bis einschließlich der Version 8 zu Komplikationen kommen.

Buch-Empfehlung für Selberbastler:

So schaut es aus, wenn man mittels CSS um den Text einen Rahmen legt und dessen Hintergrund orange färbt:

Aus genau diesem Rahmen wird dann mit ein paar weiteren CSS-Regeln ein solches Band mit einem Knick:

Mit einfachen Worten ausgedrückt: CSS ist eine Gestaltungshilfe für Webseiten. Es geht also um das Design bzw. den Stil (Form, Größe, Farbe, Positionierung etc.) und nicht um den Inhalt (worüber die Webseite informieren möchte).

Beispiel: “font-size:20px;”
Bedeutet, dass die Schriftgröße 20 Pixel groß sein soll (“font” heißt Schrift und “size” bedeutet Größe). Alle CSS Befehle sind in Englisch geschrieben. Wer Englisch versteht und beherrscht, ist also klar im Vorteil.

Zur Verdeutlichung einige häufig gebrauchte CSS-Befehle:

color
color: red; = Farbe (z.B. rot) Anmerkung: Wenn “color” ohne Zusatz steht, dann wird es auf die Schrift angewandt

background-color
background-color: #fff; = Hintergrundfarbe (z.B. weiss)

font-family
font-family: 'Arial'; = Schrifttyp (z.B. Arial)

width
width: 300px; = Breite (z.B. 300 px – px ist eine Größenangabe, man kann diese aber auch in %, em oder anderen Einheiten angeben)

min-width: 300px; = Mindest-Breite (z.B. 300 px), hiermit kann man bestimmen wie breit ein Element mindestens angezeigt wird.

margin
margin-left: 20px; = Außenabstand links (z.B. 20 px)

margin-top: 20px; = Außenabstand oben (z.B. 20 px)

!important
margin-left: 20px !important; = mit !important "zwingt" man den Browser dazu, diese Einstellung anzuzeigen. Ist oft sehr nützlich wenn CSS-Einstellungen nicht wie gewollt umgesetzt werden.

Weitere Informationen über CSS findet man zb auf CSS4You

Horizontal Flip

dazu mit dem Mauszeiger über das Bild fahren. Das löst durch den "Mouseover" einen :hover-Effekt aus, der alles weitere in Gang bringt...

Vertikal Flip

dazu ebenfalls mit dem Mauszeiger über das Bild fahren

Und haben Sie schon entdeckt, was unsere kleine Eule macht, wenn Sie sie mit der Maus berühren?