CSS

CSS e. Cascading Style Sheet on viis, kuidas kiirelt, efektiivselt ja minimaalse vaevaga kujundada HTML veebileht.

Eeldused

Enne selle teema lugemist tuleks HTML põhitõed endale selgeks teha.

Süntaks

 selector [, selector2, ...][:pseudo-class] {
   property: value;
   [property2: value2;
   ...]
 }
 /* kommentaar */

Kõiki ekraanil kuvatavaid HTML elemente saab CSS'iga kujundada, kagu ka omistada neile ID atribuudi, mistõttu on nende poole kergem pöörduda.

Kuidas kasutada

Stiilid tuleb defineerida ja vajadusel ka rakendada

Defineerimine

• Defineerida CSS stiilid veebilehe sees

<style>

/* stiilide defineerimine */

</style>

• Luua eraldi fail CSS stiilide kirjeldusega ja viidata sellele veebilehe päises

<link rel="stylesheet" href="css/minucss.css" type="text/css" media="screen" />

Rakendamine

• Lisame elemendi sisse vastava CSS koodi

<div style="padding: 5px; border: 1px solid #aaa;">Kasti sisu...</div>

• Lisame elemendi sisse viite vastavale definitsioonile

<div class="stiil1">Kasti sisu...</div>

Näited

Elemendi BODY taustavärvi muutmiseks:

 body {
   background-color: #d0e4fe;
 }

... või ka taustapildi määramiseks ...

 body {
   background: url( 'images/taustapilt.png' );
 }

Muudame paragraafi tekstistiili, suurust ja tühja ruumi, mis jäetakse enne ja pärast lõiku:

 p {
   font-family: "Times New Roman";
   font-size: 20px;
   margin-top: 30px;
   margin-bottom: 30px;
 }

Viidete värv on vaikimisi sinine ja lilla. Kui viiteks teha pilt, siis teda ümbritseb viite värvides raam. Et keelata ära igasugused raamid piltidel:

 img {
   border: 0;
 }

Defineerida saab ka oma stiile, mida vastavale elemendile anda:

 .stiil1 { 
   font-family: verdana, tahoma, arial, helvetica, "trebuchet ms";
   font-size: 12px;
   font-weight: normal;
   text-decoration: none;
   color: #000000; 
 }

<p class="stiil1">Tekstilõik, mis formaaditud stiil1 järgi.</p>

Saab ka öelda konkreetsemalt, mis elementidele see stiil kehtib. Teised elemendid seda stiili kasutada ei saa:

 p.stiil1 { 
   font-family: verdana, tahoma, arial, helvetica, "trebuchet ms";
   font-size: 12px;
   font-weight: normal;
   text-decoration: none;
   color: #000000; 
 }

asd