.:Sintaksa

Sintaksa v CSS-su je zgrajena iz treh delov: elementa, lastnosti in vrednosti:

element {lastnost: vrednost}

Element je lahko katerikoli element uporabljen v kodi HTML-ja. Tu je primer spremembe barve pisave na črno.

body {color: black}

Če je vrednost sestavljena iz dveh ali večih besed, potem jo damo med narekovaje:

p {font-family: "sans serif"}

Če želimo elementu prirediti več lastnosti, potem jih ločimo s podpičjem.

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

Predlagam vam, da lastnosti pišete eno pod drugo, zaradi boljše preglednosti.

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

.:Določanje lastnosti večim elementom hkrati

Lahko določimo večim elementom več lastnosti hkrati. Tu je primer, da smo določili naslovom od h1 do h6 barvo pisave na zeleno.

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

.:Atribut "class"

Z atributom class lahko določimo eno lastnost večim elementom hkrati. Vzemimo primer, da hočemo narediti dva odstavka, ampak da je eden poravnan desno, drugi pa levo. Tako napišemo v kodi CSS:

p.desno {text-align: right}
p.levo {text-align: left}

Tako vključimo atribut class v HTML dokument:

<p class="desno">
Ta odstavek ima desno poravnavo.
</p> 

<p class="levo">
Ta odstavek ima levo poravnavo.
</p>

Če bi uporabili v stilu le element ".levo", lahko potem določimo v našem primeru levo poravnavo večim elementom:

.levo {text-align: left}

Tu vidimo, kako potem tudi to uporabimo v HTML dokumentu.

<h1 class="levo">
Ta naslov je poravnan levo
</h1>
<p class="levo">
Ta odstavek je tudi poravnan levo.
</p>

.:Atribut ID

Atribu "id" se uporablja na podoben način, kot atribut "class". V HTML kodi ga pokličemo takole:

<p id="naslov">
To je naš naslov !
</p>

V kodi css pa določimo lastnosti atributa (id="naslov") takole:

#naslov
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

Če pa atribut id="naslov" določimo tako, pa lahko ta atribut uporabimo le na elementu <p>:

p#naslov
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

.:Komentarji v CSS

Če želite, lahko vstavite komentar v kodo stilne predloge, tako da začetek komentarja označite z /* , napišete komentar, konec pa naznanite z */:

/* To je komentar */
p
{
text-align: center;
/* Tukaj imamo pa drugi komentar */
color: black;
font-family: arial
}