Mis on väline stiilileht?

Väline stiilileht määratleb, kuidas veebileht välja näeb. Stiililehe abil saate täpsustada näiteks teksti suurust, värvi ja teksti, nuppude värvi või menüüde ja külgribade asukohta.

Kood, mida kasutatakse välises stiililehes

Põhiveebilehe loomiseks kasutatakse kahte tüüpi koode:

• Hüperteksti märgistuskeel (HTML): Määratleb veebilehe sisu. See sisaldab tegelikku teksti koos juurdehindlusega, mis tuvastab, kas tekstiosad on lõigud, pealkirjad või loendid. See sisaldab ka linke lehel kuvatavatele piltidele ja hüperlinke välistele lehtedele.
• Kaskaadiga stiililehed (CSS): Kodeerimiskeel, mida kasutatakse sisu kuvamise täpsustamiseks. See määratleb, kuidas igat tüüpi tekstielemente kuvatakse, ja saab sama tüüpi elemente erinevalt kuvada, kui nad kuuluvad erinevatesse klassidesse või neil on erinev ID. See võimaldab näiteks menüüdel ja loenditel toimida veebilehe põhitekstis väga erinevalt.

Üldiselt on stiili eraldamine sisust hea mõte, kuna see võimaldab keskenduda ühele asjale korraga. See muutub meeskonnas veelgi olulisemaks, võimaldades sisu ja esitluse spetsialistidel töötada teistest sõltumatult. Võib-olla veelgi olulisem on see, et see võimaldab ühtlast stiilijuhiste komplekti ühtlaselt rakendada ka kogu veebisaidil.

Veebisaidi visuaalset esitlust saab seejärel muuta ühest stiililehest, muutmata iga veebilehte eraldi. Suuremate keerukate veebisaitide korral võib lehekülgede teksti, menüüde ja jaotuste juhtimiseks kasutada mitmeid stiililehti. Seda stiililehtede kogu võib nimetada "teemaks".

Välise CSS-i kasutamine HTML-i linkimiseks CSS-iga

CSS-i stiil on võimalik lisada otse veebilehe HTML-i, kasutades CSS-i iga lõigu ja pealkirja erinevaks kujundamiseks. Seda tüüpi sisemine stiil üldiselt ei ole hea mõte, kuna kaotate kõik stiili sisust eraldamise eelised. Kõige olulisem on see, et kaotate võimaluse kogu oma veebisaiti ühest failist pidevalt värskendada.

Õige viis stiili rakendamiseks veebisaidil on luua üks välimine stiililehefail igale rakendatavale stiilitüübile, seejärel viidata neile failidele igast HTML-failist. Näiteks võivad teil olla järgmised välised stiililehed:

• text.css
• menüüd.css
• küljendus.css

Nendes välistes stiililehtedes saate CSS-koodi muuta, muutmata neid failinimed, mis tähendab viiteid nendele failidele kõigi teie veebilehtede HTML-is, ei ole muutunud.

HTML ja CSS näited

Väga lihtne HTML-leht võib sisaldada järgmist koodi:

 Kõik minust!

See leht räägib minust ja sellest, miks ma vinge olen.

Sellele lehele saab linkida lihtsa välise stiililehe, lisades järgmise koodi.

type = "text / css"
href = "myStyle.css" />

Looge järgmine tekstifail nimega myStyle.css, mis asub samas kaustas kui index.html ja sisaldab järgmist koodi:

h1 {
värv: # FF7643;
font-face: Arial '
}
p {
värv: punane;
fondi suurus: 1,5em;
}