I HTML-språket finns det ett system med olika märken h1, h2, h3, h4, h5 och h6 som du kan använda för att ha rubriker i olika storlekar. Naturligt har dessa olika storlek relativt till varandra så att ett enkelt sätt att göra olika stora rubriker är att sätta dem till de olika märkena med inbördes olika storlek (där h1 är en stor rubrik och h6 är en liten rubrik, precis som pappersstorlekarna A3, A4, A5 och så vidare).

När du arbetar med CSS kan du använda dessa märken för att inkludera mer information för de olika märkena så att varje givet märke (h1, h5, och så vidare) innehåller ett visst format. Du kan specificera teckensnittet, färgen och mycket mer på varje rubrik. Det blir på detta sätt möjligt att programmera storleken också så att rubrikernas storlek inte längre behöver ha någonting att göra med vilken inbördes storlek de har; h1 kan du göra mindre än h6 om du skulle vilja detta.

Det går också att klumpa ihop dessa märken så att till exempel h1, h2, h3, h4 och h5 har samma storlek, men h1, h2, h3 har ett typsnitt och h4, h5 har ett annat. Koden skulle kunna se ut så här:

h1, h2, h3, h4, h5 {

font-size: 20px;

}

h1, h2, h3 {

font-family: Arial;

}

h4, h5 {

font-family: Times New Roman;

}

När du sedan använder något av märkena h1-h3 på hemsidan (förutsatt att denna stilmall hämtats in) kommer dessa att vara i Arial och 20 pixlar stora, medan rubrikerna h4 och h5 kommer att ha typsnittet TImes New Roman men också vara 20 pixlar stora.

Rubriker blir på detta sätt mycket mer dynamiska och praktiska att ändra på. När du vill ändra på rubriker med ett visst märke eller flera olika märken samtidigt är det bara att ändra i css-mallen och vips så sker ändringarna på hela hemsidan.