CSS Mis see on?

CSS (Cascadin Style Sheet) e. Kaskaadsed stiililehed. S.o. meetod mida kasutatakse veebilehtede toimetamisel. Stiilid määravad kindlaks mismoodi kuvatakse Html elemendid. Kogu veebisaidi kujundus on viidud ühte dokumenti ning selles dokumendis tehtud muudatused kajastuvad korraga üle terve saidi. Kasutades stiile, hoiad kokku oma aega.

Enne kui alustada Css'iga, peab sul olema enam-vähem selge arusaamine Html'ist ja Xhtml'ist.
Selleks, et tutvuda Html'iga siis vaata Html Aabitsat.

Stiililehed võivad asuda veebidokumendi <head> sektsioonis või siis eraldi dokumendis e. välimisel stiililehel (external style sheet). Stiil võib asuda ka Html elemendi sees.

Kaskaadne järjekord

Stiilide kaskaadsus tähendab seda, et olenevalt stiili asukohast, mõjutab see veebidokumenti.

Selles nimekirjas on stiilid loetletud prioriteetide järgi. Number neli omab kõige kõrgemat prioriteeti.

Vaikimisi brauseri stiil
Välimine stiilileht
Sisemine stiilileht (<head> märgise sees)
Inline stiil (Html elemendi sees)

CSS Kirjakeel

CSS kirjakeel koosneb kolmest osast: selector, omadus ja väärtus

          selector {omadus: väärtus}

Selector on tavaliselt Html märgis mida soovitakse kujundada.
Omadus on atribuut mida soovitakse muuta antud märgise juures.
Igal omadusel on ka oma väärtus.
Omadus ja väärtus eraldatakse teineteisest kooloniga ja ümbritsetakse loogeliste sulgudega.

          body {color: black}

Pane tähele: Kui väärtus koosneb kahest v. rohkemast sõnast siis tuleb need panna jutumärkidesse.

          p {font-family: "sans serif"}

Pane tähele: Kui sa soovid määratleda rohkem kui ühte omadust siis tuleb need omadused eraldada semikooloniga. Allpool olevas näites on omadused määratud nii, et paragrahv asetseb keskel ning teksti värv on punane.

          p {text-align:center;color:red}

Selleks, et stiili definitsiooni oleks kergem lugeda ja teha selles parandusi, on soovitav iga omadus kirjutada eraldi reale. Näiteks nii:

          p
          {
           text-align: center;
           color: black;
           font-family: arial
          }

Grupeerimine

Selector'eid saab ka grupeerida. Iga selector eraldatakse komaga. Allpool olevas näites on grupeeritud pealkirjade elemendid. Kõik pealkirjad kuvatakse roheliselt.

          h1,h2,h3,h4,h5,h6 
          {
           color: green
           }

Class ja ID atribuudid

Stiilide rakendamiseks veebidokumendis on mitmeid mooduseid. Oletame, et p (paragrahv) märgis on kogu veebisaidi ulatuses määratud väärtustega (taandread, reavahed, kirja suurus jne.). Tihti on vaja, et mingi üks ainuke element oleks põhistiilist erinev.
Mõnel teisel juhul on vaja ainult teatud hulka elemente kujundada nii, et ei peaks kasutama igakord "inline" stiili.
Selleks siis ongi võimalus kasutada "class" ja "id" atribuute.
"Class" selektor võimaldab kujundada Html elemente v. märgiseid erineval viisil, ühes dokumendis.
Näiteks on vaja, et paragrahvi teksti taust muudaks aeg-ajalt värvi, erinevalt põhitaustast.
Siis on kirjaviis selline:

   <style type="text/css">
p.green {background-color: #008000;}
p.yellow {background-color: #ffff00;}
   </style>

Nüüd kui soovid, saad muuta paragrahvi tausta värvi. Kasutad selleks CLASS atribuuti paragahvi märgises. Kõik ülejäänud paragrahvid, milledel puudub "class" atribuut jäävad vaikimisi taustaga mis on määratud mujal.

Näide:

Selle paragrahvi taust on roheline.

Selle paragrahvi taust on määratud vaikimisi.

Selle paragrahvi taust on kollane.

Juhul kui soovid, et "class" atribuut muudaks vajadusel kõiki HTML elemente siis tuleb css koodist eemaldada HTML elemendi nimi.
(Jälgi, et eemaldatud nime asemel oleks (.) punkt):

   <style type="text/css">
.green {background-color: #008000;}
.yellow {background-color: #ffff00;}
   </style>

Selles näites töötavad "class" atribuudid mitme HTML elemendi juures:

Selle paragrahvi taust on kollane.

<h2 class="green">Ja selle h2 pealkirja taust on samuti kollane</h2>

ID selektor võimaldab anda HTML märgisele v. elemendile nime. Oletame, et ID kood on selline:

   <style type="text/css"> 
#taane1 { text-indent: 10px; }
   </style>

Siin töötab ID samuti nagu "class" atribuut. Näiteks saame määrata stiili: . Nime võib kirjutada suvalise kuid soovitav on valida selline mis meelde jääb. Tulevikus on siis lihtsam koodist aru saada. Näide:

Selles paragrahvis on kasutatud ID atribuuti, taandrea saamiseks.

Pane tähele: ära kunagi unusta elemendi lõpumärgist! Vastasel juhul mõjutab ID atribuut, dokumendi stiili kuni lõpuni.

Oletame, et soovid kirjutada dokumenti, kahte erinevat tüüpi paragrahvi. Üks paragrahv asetseb lehekülje paremas servas ja teine keskel. Stiili kirjutame nii:

           p.right {text-align: right}
           p.center {text-align: center}

Edaspidi pead sellisel juhul kasutama "class" atribuuti. Näiteks nii:

See paragrahv asub paremal. See paragrahv asub keskel.

Pane tähele: Kui soovid lisada elemendile veel omadusi siis kirjuta nii:

          <p class="center bold">
See on paragrahv.
          </p>

Ülalpool oleva paragrahvi stiili määravad class "center" JA class "bold". Tulemus kuvatakse järgmiselt: paragrahv asetseb kskel ja paragrahvi tekst on paks.

Märgise nime selector'is võib ära jätta kui Html elementides kasutada kindlat klassi (class). Allpool olevas näites on Html element määratud klassiga: class="center".
S.t. - keskel asetsev (center-aligned).

          .center {text-align: center}

Allpool olevas koodis on h1 ja p elemendid määratud klassiga: class="center". S.t. et mõlemad elemendid järgivad reeglit mis on kirjutatud selector'is "center".

           <h1 class="center">
           See pealkiri asetseb keskel
           </h1>
           <p class="center">
           See paragrahv asetseb samuti keskel.
           </p>

Ära alusta "class" nime numbriga! Mzilla/Firefox ei toeta sellist meetodit.

Elemendi atribuudi stiil

Html elemendi üksikut atribuuti saab samuti kujundada stiili abil.

Allpool olevas näites stiil puudutab "input" elementi, mille väärtuseks on "text".

      input[type="text"] {background-color: blue}

CSS Kommentaar

Kommentaare kasutatakse css kodeeringu täpsemaks selgitamiseks. See aitab hiljem teha parandusi ja muudatusi. Kommentaare brauser ei kuva. Css kommentaar alustatakse nii: "/*" ja lõpetatakse nii: "*/".

          /* See on kommentaar */
p
{
text-align: center;
           /* See on veel üks kommentaar */
color: black;
font-family: arial
}