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

 valija [, valija2, ...][:pseudo-klass] {
   atribuut: väärtus;
   [atribuut2: väärtus2;
   ...]
 }

 /* kommentaar */

Kuidas kasutada

Stiilid tuleb defineerida ja vajadusel ka rakendada

Defineerimine

• Defineerida CSS stiilid veebilehe sees

<style type="text/css">

/* 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; 
 }

Pseudo-klasside kasutamine. Kui hiir liigutada p elemendi peale, siis muudetakse ajutiselt ära taustavärv:

 p:hover { background: #abcdef; }

asd