Storlek på text
Med CSS kan du ändra den förinställda textstorlek som webbläsaren ger alla webbelement.
I CSS kan man använda flera värdeenheter till sådana egenskaper som kräver att man beskriver storlek eller avstånd. Textstorlek bör anges i dynamiska enheter som ems eller procent, vilket gör det möjligt för användaren att själv justera sin textstorlek i webbläsaren.
Webbläsarens förinställda textstorlek är den som visas när menyn Visa/Textstorlek är inställd på Medel eller Normal.
OBS! I de flesta nya webbläsare går det numera också att zooma en webbsida för att kunna se bättre.
Textstorlek anges i CSS med egenskapen font-size
. Med ett värde i enheten em eller % jämförs den nya storleken med normal text (inte rubriker). Enhetsbeteckningar skall sättas direkt efter siffervärdet.
Eftersom body
omfattar allt innehåll på en webbsida, ger exemplet nedan all text en 20 % mindre textstorlek än webbläsarens förinställda.
body { font-size:80% }
Enheten em
får också anges med decimaltal och den beskriver hur många gånger större eller mindre man menar. Detta jämförs i de flesta fall med den textstorlek elementet har. Tänk på att decimaltal alltid ska innehålla punkt (amerikansk standard) och inte kommatecken som vi har.
Samma storlek som ovan, angivet i ems, ser ut så här:
body { font-size:0.8em }
När du vill ändra storlek på en rubrik relaterar värden i ems eller procent även här till normal textstorlek, och inte till rubrikens egen storlek.
Exemplet nedan resulterar därför i att huvudrubrikerna får samma textstorlek som normal text. Värdet 1em
motsvarar 1 gånger normal textstorlek, d.v.s. lika stor. Samma storlek skulle också kunna formuleras 100%
.
h1 { font-size:1em }