HTML <style>-attributet används för att lägga till stilar till ett element, såsom färg, font, storlek etc. Koden ser då ut såhär:
<tagname style="property:value;">Property är en CSS-egenskap. Value är ett CSS-värde.
Bakgrundsfärg (background color)
Här är ett exempel med background-color (som är en CSS-property):
<h1 style="background-color:powderblue;">Detta är en rubrik</h1>Textfärg (text color)
Ett annat exempel är textfärg, som anges av color:
<h1 style="color:blue;">Detta är en rubrik</h1>
Typsnitt (fonts)
Font-family anger typsnittsval:
<h1 style="font-family:verdana;">Detta är en rubrik</h1>
Typsnittsstorlek/grad (font-size)
Font-size anger typsnittsstorlek:
<h1 style="font-size:300%;">Detta är en rubrik</h1>I CSS används vanligtvis 100% som standardstorleken för text. Att ange “font-size: 100%;” skulle hålla textens storlek på dess normala storlek enligt det ursprungliga fontstorleksarvet. Font-size: 300% betyder att textens storlek är 300% av den normala storleken. Med andra ord kommer texten att vara tre gånger större än standardstorleken.
Textjustering
Text-align anger den horisontella textjusteringen för ett HTML-element:
<h1 style="text-align:center;">Detta är en centrerad rubrik</h1>Här kan man välja mellan följande values:
- left – justerar texten till vänster
- right – justerar texten till höger
- center – centrerar texten
- justify – sträcker ut raderna så att varje rad har lika bredd (som i tidningar och tidskrifter)
- initial – återställer egenskapen till dess standardvärde
- inherit (ärva) – ärver egenskapen från sitt föräldraelement
Tips: Ibland kan du vilja återställa en egenskap till dess standardvärde*, speciellt om du har ändrat den på ett annat ställe i koden. Genom att använda initial återställer du egenskapen till dess ursprungliga standardvärde.
Om du vill att ett element ska ärva en egenskap från dess föräldreelement kan du använda inherit. Till exempel, om förälderaelementet har en specifik textfärg och du vill att dess barn ska ha samma färg, kan du använda color: inherit; för att barnets text ska ärva förälderns textfärg. Om du ändrar förälderelementets färg i framtiden kommer barnet automatiskt att anpassa sig till den nya färgen om du använder inherit. Detta kan spara tid och möjliggöra enklare underhåll av din kod.
* Standardvärde. Standardvärdet för initial varierar beroende på egenskapen det används för. Generellt sett återställer initial en egenskap till dess ursprungliga standardvärde enligt specifikationen för den egenskapen. Exempelvis för color är standardvärdet ofta för text vanligtvis svart (#000000). På motsvarande sätt är det ofta 16px för font-size. Men för att vara helt säker på det specifika standardvärdet för en egenskap, är det bäst att titta på dokumentationen för det aktuella HTML-elementet eller CSS-egenskapen.
