-
CSS-Referenz: de.selfhtml.org
- Sidebar: alle Properties werden aufgelistet
- CSS = Design, Layout einer Webseite
-
CSS in HTML einbinden
-
Zentrale Einbindung in HTML
- <style type="text/css">
....
</style>
-
CSS Bezeichnungen
-
Regel für Element = Style
- Selektor { Property: Wert; }
- Bsp.: body { color: red; }
-
Selektor
-
Typen
-
Typselektor
- body {...}
-
ID-Selektor
- #wrapper {...} #kopfbereich{...}
-
Klassen-Selektor
- .farbe {...}
-
verschachtelte Selektoren
- Bsp.: #textbereich a {color: red}
-
Farben und Schriften
-
Hintergrund, Textfarben
- Bsp.: body { background-image: url(bilder/hintergrund.png); }
- Bsp.: #inhalt { background-color: #b5a689; }
- Bsp.: .tipp { color: white; }
- b5a689 = Hexadezimalzahl
-
Property: Schriftart
- font-family
-
Box (Kasten) Modell
- Boxmodell
-
margin = Außenabstand
- Bsp.: .tipp { margin-left: 10px; }
-
border = Rahmen
- Bsp.: .tipp { border-bottom: 1px dotted #323948; }
-
padding = Innenabstand
- Bsp.: .tipp { padding: 5px 20px 0 20px; }
-
Addon Firebug für Firefox
- hebt Box + zugehörige margin + padding Felder hervor
-
Box in Firefox abrunden
-
CSS3
- Bsp.: .tipp { -moz-border-radius: 30px; }
-
Box schweben lassen
- Bsp.: .tipp { float: left; }