CSS

Hinweis:
Diese Seite ist eine persönliche Sammlung zu Infos rund um CSS (Cascading style sheets).
Sie hat weder den Anspruch auf Vollständigkeit, noch auf vollständige Richtigkeit :)
Trotzdem wird der ein oder andere hier vielleicht noch ein paar wertvolle Infos oder Links rausziehen können.

1 Allgemeines zu CSS

Stylesheets dienen dazu Layouts für Webseiten zu definieren.

Ohne Style-Angaben ist das Aussehen von den Default-Einstellungen des Browsers abhängig. Die Website sieht in diesem Fall in jedem Browser anders aus. Mit Stylesheets kann man erzwingen, dass die Website in jedem Browser gleich aussieht.

Es gibt drei verschiedene Arten, wie man CSS einbinden kann:
- Embedded: Stylesheets im Head-Bereich der HTML-Datei
- Inline: CSS direkt in den Tags, Beispiel <p style="bla"></p>
- External: Stylecheets in einer seperatren CSS-Datei. Vorteil hiervon: Man kann die Datei leicht in mehrere (oder alle) HTML-Dateien einbinden.
- Mehr Infos zum Einbinden von CSS gibt es auf Selfhtml.

Die Reihenfolge der style definitions ist in CSS normalerweise egal. Eine Ausnahme gibt es allerdings: Für die Style-Definitionen der Links ist es wichtig, dass a:hover und a:active nach a:link und a:visited definiert werden.

2 Tipps & Tricks

Unterschied zwischen den Attributen "width" und "max-width":
- "width" ist wirklich eine feste Breite -> wird das Browser-Fenster verkleinert, wird Seiteninhalt rechts abgeschnitten
- "max-width" ist die maximale Breite -> wird das Browser-Fenster kleiner gemacht als die Angabe unter max-width, so wird der Seiteninhalt weiter verkleinert und ist somit noch komplett lesbar
media-Parameter: kann man zum Beispiel nutzen um fürs Drucken (media="print") andere Styles zu verwenden als auf dem Schirm (media="screen")
Das Attribut z-index (für Schichtpositionierungen) funktioniert nur bei positionierten Elementen (position:absolute, position:relative, position:fixed).
Mit dem Attribut "text-shadow" kann man einen schönen Textschatten-Effekt produzieren - zum Beispiel mit dem Code text-shadow: 0 1px 2px #777777;
Die Standard-Attribute für das body-Tag sind color, background-color, font-size und font-family.
Beispiel für eine typische Style-Definition für den Body-Bereich:

body {
     color: #5d665b;
     background-color: #e8eae8;
     font-size: small;
     font-family: Verdana, Geneva, Arial, sans-serif;
}

Möglichkeiten um Ausgabe unterhalb von floatenden Objekten zu erzwingen (Textumfluss beenden):
- clear:both
- Alternative zu CSS: <br clear="all">
Um einen pre-Bereich nicht über die ganze Seitenbreite zu strecken, sondern der Breite des Elternelements anzupassen: white-space: pre-wrap;

2.1 margin-Attribut

Kann in einer Kurzform verwendet werden: margin: a b c d. Dabei stehen die Werte a bis d der Reihe nach für die Abstände top, right, bottom und left.
Wird nur ein Wert hinter margin angegeben, so wird allen 4 Abständen dieser Wert zugewiesen. Beispiel: margin: 200px; erzeugt einen Abstand von 200 Pixeln in alle 4 Richtungen.

3 Website mit CSS zentrieren

Links die zeigen wie man eine Seite mit CSS zentriert:
- Einfache und leichte Erklärung
- Variante bei der der Inhalt bei kleinem Browser-Fenster aus dem Bildschirm geschoben wird

4 Siehe auch

HTML

5 Weblinks

CSS: Best practices
CSS Infographic: Interesting Facts and History
campaignmonitor.com/css/ - Infos über den Einsatz von CSS in E-Mails
css-tricks.com/downloads/css-stuff - Slider, Tabs, Zoomer und vieles mehr in CSS
emailology.org - List of universally supported CSS & HTML in Email clients
universalwebservices.net - Modify CSS with JavaScript
Context dependant selectors in CSS
css3button.net - Button-Generator mit Hilfe von CSS3

5.1 Tipps & Tricks

6 Weiterführendes

6.1 Tools

CSS button library built with Sass & Compass - Vielzahl von schönen Buttons die über CSS erzeugt werden
CSS-Validator
HTMLPad - Intelligenter HTML-, CSS- und JavaScript-Editor
Long Shadows Generator - Erzeugt Lange Schatten per CSS

Autoren

Stefan Seidner (23)
Christian Herrmann (1)

Jeder Autor hat seine eigenen Passagen zu diesem Artikel beigesteuert. Deshalb muss nicht jeder Autor alle Passagen des Artikels unterstützen.
Zahl in Klammern = Anzahl der Artikel-Bearbeitungen dieses Autors. Eine hohe Anzahl bedeutet nicht zwangsweise, dass dieser Autor auch viel Inhalt zum Artikel beigesteuert hat.

CSS