Gastartikel van Jan van de Laar
Veel mensen weten inmiddels wel dat het mogelijk is om met CSS te bepalen hoe elementen op een website getoond kunnen worden. Daarbij kan gebruik worden gemaakt van de begrippen 'class' en 'id'.
CSS classes
De class gebruik je als je de stijl vaker gebruikt op een pagina. Bijvoorbeeld als je alle rijen van een tabel op dezelfde manier wilt vormgeven. Je voegt dan class='tableRow' toe aan iedere rij: daarna kun je met één regel CSS bepalen hoe alle rijen getoond moeten worden.
Als de achtergrondkleur dan een keer moet worden aangepast hoeft dat maar in één bestand te gebeuren.
In een CSS bestand wordt een class voorafgegaan door een "." (punt).
CSS ID's
De 'id' gebruik je op vergelijkbare wijze maar die mag slechts één keer op iedere pagina voorkomen. De 'id' fungeert als een echte indentificatie van alleen dat object.
In een CSS bestand wordt een 'id' voorafgegaan door een "#" (hekje).
Allemaal heel efficient natuurlijk maar er kan zoveel meer!
Uitgaande links
Alle links die naar buiten je eigen website leiden kun je voorzien van een icoontje.
Een link binnen je eigen website wordt niet voorzien van 'http://' en bij extrne links is dat juist noodzakelijk.
a[href^="http"] {
background: url(uitgaande-link.jpg) no-repeat;
padding-left: 10px;
}
Als je bovenstaande code in je CSS bestand opneemt worden alle externe links voorafgegaan door de afbeelding 'uitgaande-link.jpg'.
De pseudo classe :not
Ook heel handig en niet vaak gebruikt is de 'not' pseudo class. Als je alle paragrafen een bepaalde tekstkleur wilt geven behalve die in de div met de id "header".
p:not(#header) {
color: blue;
}
De eerste letter van een paragraaf
Zoals in een sprookjeboek of een oude bijbel waarbij de eerste letter heel groot is. Zo doe je dat:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
Van iedere paragraaf wordt nu de eerste letter afwijkend weergegeven. Maar als je dat alleen bij bepaalde paragrafen wilt kun je dat nog verder toespitsen.
p#alleen-deze-dus::first-letter {
float: left;
font-size: 5em;
}
Nu zal de paragraaf met het id="alleen-deze-dus" een grotere letter krijgen.
Dat was een korte inleiding van geavanceerde CSS. De volgende keer gaat het over zg 'child' elementen zoals alleen de tweede of derde item in een lijst.