Specifieke stijl voor een bepaald element

Selecties

Zoals je al hebt gezien, maak je in CSS voortdurend "slimme" selecties. De kunst is om met zo weinig mogelijk code, zoveel mogelijk resultaat te behalen. De basistechniek is telkens hetzelfde:

selector{               
   stijlkenmerk: eigenschap;               
   stijlkenmerk2:eigenschap;   
}

Eén enkel element selecteren

Meestal definieer je een stijl die van toepassing is op al je webpagina's. Dat zorgt voor een hoop minder werk. Beeld je in dat een bedrijf als Meta de stijl voor elke tijdlijn in elke tijdlijn afzonderlijk zou "coderen". Dat zou niet alleen voor enorm veel werk zorgen, maar ook voor bijzonder veel overbodige data. Met CSS kunnen ze in één enkel bestand bepalen hoe alle miljoenen tijdlijnen van al hun gebruikers er uitzien. Al die tijdlijnen hebben namelijk dezelfde stijl. 

Toch kan het gebeuren dat je voor een bepaald element op een webpagina een heel specifieke stijl wil definiëren. Je wil bijvoorbeeld de header van je startpagina hoger maken of een andere achtergrondafbeelding dan op al je andere pagina's. Dan kan je dat specifieke element een eigen "identiteit" geven. In het onderstaande filmpje leggen we uit hoe dit werkt.  

In HTML doe je dan bijvoorbeeld het volgende:

<header id="homebanner">
...
</header>

In CSS selecteer je dit element met #homebanner:

#homebanner{
    /*hier noteer je unieke stijlkenmerken voor dit enkele element*/
}