Kako upravljati HTML elementima koristeći CSS?

Question

Kako upravljati tj. opisivati HTML elemente koristeći CSS?

Answer 1

Pozdrav!

Da bi mogli opisivati HTML elemente pomoću CSS-a treba nekako povezati HTML tagove i CSS stilove, jer HTML "ne zna" koji opis(stil) uzeti za koji element.

Povezivanje se vrši pomoću tzv. selektora, a selektori se mogu odnositi na jedan ili više elemenata.

Ukoliko želimo povezati CSS opis s određenim HTML elementom, koristimo id atribut(svojstvo) elementa, a u CSS-u navodimo taj id sa znakom # ispred, evo primjera:

HTML:

<div id="element1">OVO JE ELEMENT 1</div>
<div id="element2">OVO JE ELEMENT 2</div>

CSS:

#element1{
    font-color: #FF0000;
}

Ako želimo povezati CSS opis s više HTML elemenata, koristimo class atribut elementa, a u CSS-u navodimo taj class sa znakom . ispred, evo primjera:

HTML:

<div id="element1" class="crveno">OVO JE ELEMENT 1</div>
<div id="element2" class="crveno">OVO JE ELEMENT 2</div>

CSS:

.crveno{
    font-color: #FF0000;
}

U prvom primjeru će samo prvi element dobiti crvena slova, dok će u drugom primjeru oba elementa postati ispisana crvenim slovima.

Naravno, HTML i CSS moraju biti povezani na jedan od tri načina povezivanja(inline, interno ili vanjsko).

Answer 2

CSS-om je moguće kontrolirati i položaj elemenata bez mijenjanja strukture HTML dokumenta. Postoje različite tehnike koje se upotrebljavaju za razmještaj elemenata CSSom, no sve su vrlo slične jer su ovisne o dvama svojstvima HTML elementa: float i clear.

Pomoću tih dvaju svojstava različitim tehnikama možemo kreirati različite razmještaje elemenata koje možemo svrstati u dvije skupine:

1. s obzirom na širinu web-stranice: stranice apsolutne širine (u kojima je širina stranica točno određena, u pikselima)
                                                     stranice relativne širine (s obzirom na širinu prozora preglednika)

2. s obzirom na broj stupaca stranice: stranice s jednim stupcem
                                                        stranice s dvama stupcima
                                                        stranice s trima stupcima itd.

Navedene dvije skupine možemo međusobno kombinirati te na taj način dobiti veliki broj različitih opcija razmještaja elemenata web-stranice.