CSS
Kui HTML paneb paika, mis on lehel, siis CSS-iga saab öelda, kuidas asjad välja näevad. CSS (ingl. Cascading Style Sheets) kasutatakse HTML-elementide välimuste kujundamiseks. 1
CSS-i lisamise viisid
Inline CSS kasutades kirjutame elemendi stiili otse HTML elemendi sisse. Tegu ei ole hea tavaga, sest HTML dokument muutub vähem loetavamaks, kuna segame koos sisu ja kujundust.
Internal CSS lisades HTML dokumendi <head> </head> ossa stiili <style> </style> siltide vahele.
External CSS tehakse eraldi dokument lõpuga .css ja lisatakse viide HTML dokumendi <head></head> ossa kasutades <link /> märgendit.
Süntaks
Selektor (nt: h1) tähistab HTML elementi, millele tahetakse stiil lisada. Looksulgude vahele kirjutatakse omadus (nt: color, font-size) ja sellele väärtus (nt: blue, 12px). Iga omadus eraldatakse väärtusest kooloniga (:) ning uued omadused omavahel semikooloniga (;). 2
h1 {
color: blue;
font-size: 12px;
}
Selektorid
Selektoreid on kolme tüüpi - elemendi, klassi ja id selektor. Elemendi selektori puhul rakendatakse stiil HTML dokumendi kõikidele sellistele elemenditele. Klassi selektroit kasutades lisatakse stiil elementidele, millel on sama klass (class). ID selektoriga rakendatakse stiil sellele elemendile, millel see id on. Klassi ja ID vahe ongi see, et ID on ühel konkreetsel elemendil, kuid klassi saame lisada erinevate elementidele. 3
Reeglite hierarhija
Kui rakendada mitut erinevat stiili reeglit samale elemendile, siis CSSi prioritiseerib stiili järgnevalt.
- Inline CSS
- ID selektor
- Klassi selektor
- Elemendi selektor
Mõõtühikud
Elementide suurust saab määrata fikseeritult või dünaamiselt.
Fikseeritud suuruseid paneme paika kasutades piksleid (px). Elemendi suurus jääb samaks igasugusel erkaanil.
Dünaamiliseks kasutame protsente (%), mis tähistab, kui suure osa võetakse ekraani laiususest või pikkusest. Samuti saab dünaamilisust lisada kasutades em või rem. Em sõltub kõige lähema vanema elemendi kirjasuurusest, kuid rem sõltub alati dokumendi kirjasuurusest. 4