Selleks kasutatakse CSS (Cascading Style Sheets) keelt, mille abil saab HTML-dokumentide kujundust määrata.
CSS laade saab HTML dokumendile lisada kahel viisil:
- käsud lisatakse iga HTML dokumendi päisesse <HEAD> .... </HEAD> siltide vahele
- käsud salvestatakse eraldi faili ning lisatakse siis iga HTML lehe päisesse link sellele failile
Viimase viisi eeliseks on see, et HTML lehtede välimust puudutavaid muudatusi tuleb teha ainult ühes, CSS laade sisaldavas failis. Kõik lehed võtavad info väljanägemise kohta sellest failist.
CSS süntaks ehk keele kirjutamise reeglid
Esimesele kohale kirjutatakse HTML elemendi sildi tähis, mille kohta reegel kehtib. Edasi kirjutatakse loogeliste sulgude vahele reegel, kus omadus eraldatakse väärtusest kooloniga. Kui ühele elemendile määratakse mitu omadust, siis eraldatakse need üksteisest semikooloniga.
Näiteks rida H1 {color:blue; font-size: 40px} tähendab, et loogelistest sulgudes olev reegel kehtib HTML elemendile H1 (pealkirja suurus) ning määrab selle värviks sinise (color:blue) ning teksti suuruseks 40 pikslit (font-size: 40 px).
Samamoodi on võimalik määrata omadusi kõikidele HTML siltidele.
Ülesanne 1
- Ava Notepad ning salvesta see nimega laadid.css (salvestamisel vali tüübiks All Files ning faili nimi kirjuta koos faililaiendiga css, fail salvesta oma kausta kooli arvutivõrgus).
- Lisa sellesse faili rida H1 {color : blue } ja salvesta.
- Ava eelmistel tundidel tehtud HTML fail ning lisa selle päisesse <link rel="stylesheet" type="text/css" href="laadid.css"> ja salvesta. Juhul, kui oled eelmisel tunnil H1 pealkirjale lisanud stiili style="color: ...", siis kustuta see ära!
- Ava HTML fail veebilehitsejaga.
- Lisa HTML dokumenti veel üks pealkiri, mille suuruseks on H1 ja salvesta.
- Ava HTML fail veebilehitsejaga.
Ülesanne 2
Lisa CSS faili veel järgmised read
body {background-color: #d0e4fe}
p {font-family: "Times New Roman"; font-size: 20px}
Salvesta CSS fail ning värskenda veebilehitsejas oma HTML faili vaadet.
Ülesanne 3
Uuri, mida teevad CSS faili lisatud read
table, td, th {border: 1px solid blue}
th {color:red; background-color:yellow}
