Class som selector /container

Det giver jo kun begrænsede muligheder mht layout. Vi kan ikke opfinde nye html-tags, men vi kan i stedet definere vores egne Selectorer,  nemlig det som kaldes  CLASSES (klassifikation eller klasser). En 'class' eller klassifikation er et navngivent sæt af regler for en eller flere egenskaber og tilhørende værdier.

Dette er særlig anvendeligt hvis vi har elementer på vores webside som går igen flere og måske mange gange. F.eks. sidehoved, et navigations-panel, sidefod, eller andre dele af teksten som gentagne gange skal gengives med et særlig ensartet layout. Lad os som eksempel sige at der ofte optræder længere citater i vores tekst. Jeg vil derfor i mit style sheet definere hvordan citater skal vises.
 

Først definerer man sin 'class' ved at give den et navn: f.eks   'citat'. 
formateringen angives i stylesheet'et som f.eks:

.citat {
font-style:italic;
margin-left:200px;
margin-right:200px;
background-color:beige;
}

I selve teksten skal jeg nu angive hvornår min Class (klassifikation og container 'citat' skal anvendes. Det gøres ved i teksten at skrive

<div class="citat"> her følger teksten der skal formateres </div>

Se eksempel - check kildekode for at se hvordan min selector 'citat' er indsat i teksten. I eksemplet her er vores Selector 'citat' indsat i et block-element < div >, derfor vil citatet optræde med linjeskift før og efter block-elementet.

<span class="citat">  her følger teksten der skal formateres </span>

Se eksempel - bemærk at nu indsættes der ikke linjeskift før og efter vores citat.