Andere manieren om je code in te korten
1) Combineer tags met een komma:
[red]p, input, li, textarea, select, option {
font: 12px verdana;
}[/red]
2) Gebruik een spatie om elementen binnenin een ander element te stylen:
[red]#container p {
color: #f00;
}[/red]
betekent dat alle <p> elementen in de div met id="container" rood worden.
Let op: een komma is echt een scheidingteken! Dit:
[red]#container p, span {
color: #f00;
}[/red]
betekent NIET alle <p> en <span> elementen binnen div met id="container". Dat moet zo:
[red]#container p, #container span {
color: #f00;
}[/red]
3) Combineer classes in je HTML. Stel sommige spans moet rood worden en andere vet en weer andere rood èn vet.
Dan doe je:
[red].red {
color: #f00;
}
.bold {
font-weight: bold;
}[/red]
En dan kun je dit doen voor rood: <span class="red">
dit voor vet: <span class="bold">
en dit voor rood en vet: <span class="red bold">
Volgende keer ga ik floats behandelen en een crossbrowser liquid lay-out maken met een header, een footer en een sidebar. Liquid houdt in dat de lay-out geen vaste breedte heeft, maar afhangt van de breedte van het browservenster.
Een voorproefje van zo'n lay-out kun je hier zien: link naar voorbeeld
Tot ziens en happy CSS-ing.
Jan Koehoorn