Text

Sledeći niz osobina je ključni za svaki dizajn, jer preko njega uredjujemo preostale osobine teksta.

CSS osobina text-indent omogućava uvlačenje prvog reda teksta u nekom paragrafu. U sledećem
primeru ova osobina uzima vrednost 30px, i biće primenjena na svaki paragraf označen sa <p> u html
dokumentu.

p {
text-indent: 30px;
}

CSS osobina text-align odgovara atributu align u starim verzijama html-a. Tekst može biti poravnat po
levoj ivici preko left vrednosti, desnoj preko right, centriran preko center i razvučen od ivice do ivice,
kao novinski članci preko justify.

th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}

CSS osobina text-decoration omogućava dodavanje nekih specijalnih efekata na tekstu. Moguće
vrednosti koje ova osobina uzima su: underline (tekst je podvučen), overline (linija iznad slova) i line-
through (tekst je precrtan).

h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

Razmak izmedju slova u tekstu će biti odredjen preko letter-spacing osobine. Vrednost koju uzima ova
osobina je rastojanje izražena u pixelima.

h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}

CSS osobina text-transform kontroliše transformaciju teksta u velika slova, mala slova ili prebacivanje
svakog prvog slova u svim rečima u veliko slovo (slučaj sa naslovima u engleskom jeziku). Dozvoljene
vrednosti za ovu osobinu su: capitalize, uppercase, lowercase i none (default).

h1 {
text-transform: uppercase;
}

li {
text-transform: capitalize;
}

Linkovi
Na linkove možemo da primenjujemo sve do sada naučene slovne transformacije preko text i font
osobina. Medjutim, s obzirom na različita stanja koje linkovi mogu da imaju na jednoj strani (po defaultu,
linkovi su plavi kada su aktivni, kada kliknemo na njih su crveni, a posećeni linkovi su ljubičasti), ova
stanja su implementirana i kroz CSS. Za definisanje ovih efekata koristimo takozvane pseudoklase.

Pseudoklase omogućavaju dodavanje posebnih osobina html elementima u zavisnosti od korisničkih

akcija nad elementima. Pseudoklase se navode kao sastavni deo imena selektora razdovojene
dvotačkom.

Pseudoklasa :link koristimo za definisanje linkova koji nisu posećeni.

a:link {
color: #6699CC;
}

Pseudoklasa :visited koristimo za definisanje linkova koji su posećeni.

a:visited {
color: #660099;
}

Pseudoklasa :active koristimo za definisanje linkova koji su aktivni (na njih trenutno držimo
klik, selekciju).

a:active {
background-color: #FFFF00;
}
Pseudoklasa :hover koristimo za definisanje promene koja je vidljiva kada mišem predjemo
preko konkretnog elementa.

a:hover {
color: orange;
font-style: italic;
}

Navodjenjem osobine text-decoration, za a selector, eliminisaćemo podvučene linkove koji su do sada

jedino bili mogući.

a {
text-decoration:none;
}

Alternativno, možemo setovati text-decoration na none za sve pseudoklase.

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

Block & inline (div & span)

HTML elemente možemo da podelimo u dve grupe ‐ block elemente i inline elemente. Block su
oni koji će sami po sebi dobiti prored ispred i iza elementa, i prostiraće se od leve do desne ivice
browsera (<h1>, <p>,<div>). Inline elementi su širine svog sadržaja (<span>,<a>).

Identifikacija i grupisanje elemenata (class i id)

Ponekad nam je potrebno da primenimo specijalni stil na pojedinačni element odredjene grupe
elemenata. Ako na primer, samo jedan od svih <h1> naslova želimo da bude u drugoj boji, tada je
potrebno nekako imenovati i označiti taj različiti naslov.
Grupisanje elemenata preko class atributa

Pretpostavimo da imamo dve liste različitih vrsta vina i u jednoj želimo elemente da obojimo
svetlijom bojom, a u drugoj tamnijom. HTML kod bi izgledao recimo ovako:

<p>Bela vina:</p>
<ul>
<li><a href="ri.html">Riesling</a></li>
<li><a href="ch.html">Chardonnay</a></li>
<li><a href="pb.html">Pinot Blanc</a></li>
</ul>

<p>Crna vina:</p>
<ul>
<li><a href="cs.html">Cabernet Sauvignon</a></li>
<li><a href="me.html">Merlot</a></li>
<li><a href="pn.html">Pinot Noir</a></li>
</ul>

Stil koji bi definisali za <li> elemente, samo preko li selektora, oboji bi sve stavke istom bojom. Ako
uvedemo atribut class u <li> tagove, napravićemo dve različite grupe stavki.

<p>Bela vina:</p>
<ul>
<li><a href="ri.html" class="whitewine">Riesling</a></li>
<li><a href="ch.html" class="whitewine">Chardonnay</a></li>
<li><a href="pb.html" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Crna vina:</p>
<ul>
<li><a href="cs.html" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.html" class="redwine">Merlot</a></li>
<li><a href="pn.html" class="redwine">Pinot Noir</a></li>
</ul>

Klase se na u css-u definišu ili samostalno (kao .imeklase) ili primenjeno na već neki postojeći
tag kao u primeru:

a {
color: blue;
}

a.whitewine {
color: #FFBB00;
}

a.redwine {
color: #800000;
}

Identifikacija elemenata preko id atributa

ID atribut koristimo kad treba odrediti jedan jedinstveni elemenat u html dokumentu.
U sledećem primeru imamo listu poglavlja, i svaki od njih ima neke jedinstvene osobine, i svaki od njih je
dobio svoj jedinstveni id atribut:

<h1 id="c1">Chapter 1</h1>

...
<h2 id="c1-1">Chapter 1.1</h2>
...
<h2 id="c1-2">Chapter 1.2</h2>
...
<h1 id="c2">Chapter 2</h1>
...
<h2 id="c2-1">Chapter 2.1</h2>
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...

Ako recimo naslov za poglavlje 1.2 mora biti crven u deklaraciji css-a ćemo navesti:

#c1-2 {
color: #ff0000;
}