Cascading Style Sheets

CSS

Stilski jezik.

Određuje kako će HTML da se prikazuje.

HTML i CSS-a

1) Inline - umetanje CSS stilova unutar HTML elemenata koje želimo formatirati pomoću atributa style.

Ovo je inline CSS

2) Interni - koristimo HTML element , koji postaje sadržaj

HTML elementa . Unutar elementa style moramo dodati i atribut type koji ima vrijednost "text/css".

p {color:red;}

Vrste CSS-a

3) Eksterni - Ovaj način je najčešći. Piše se u eksternom

fajlu, koji ima ekstenziju .css.

p {color:red;font-size:12px;}

Kreiranje .css :

Postupak je sličan kreiranju dobro nam poznatog

index.html dokumenta.

Samo umjesto index.html imamo sljedeće

Povezivanje html dokumenta sa css-om:

U html dokumentu potrebno je da unesemo sljedeći kod

kojim ćemo izvršiti povezivanje:

Bitno! CSS se povezuje u head tagu.

Kako CSS dokument izgleda?

Sintaksa CSS-a:

selector { property: value; }

p { color: red; }

Selector = HTML element/tag koji želimo definisati (body, font, h1, p, img...)Property = opcija, odnosno atribut koji želimo promijenitiValue = vrijednost koju može poprimiti opcija

Grupno dodjeljivanje deklaracije

Mogućnost grupisanja

Selektori se mogu međusobno grupisati u jednu naredbu

kojom se odjednom određuju svojstva koja će vrijediti za

sve selektore:

Svaki od naslova biće zelene boje

h1,h2,h3,h4,h5,h6

{

color: green;

}

CSS selektori – klase i ID

(.) class selektori – klase – služe da se dodijele stilovi

različitim html elementima. Klase možemo ponavljati

neograničen broj puta za razliku od ID.

Kako to izgleda u CSS fajlu: (npr. Klasa koja se zove

desno – primijetićete da imena klasa određujemo

proizvoljno)

.desno {

text-align:right;

}

A u html dokumentu biće:

Ovaj

paragraf će biti poravnat udesno.

Ako se klasa definiše bez naziva selektora, ona se može koristiti kao

atribut kod bilo kojeg selektora.

Npr. ako ne pišemo u css:

p {text-align: center;

}

Nego, npr.:

.centar {text-align: center;

}

Tada u html-u možemo ovo primijeniti na sve tagove:

Centrirani tekst

Naslov centriran

CSS selektori – klase

CSS selektori – ID

ID selektori takođe dodjeljuju izgled html elementima, ali

oni se mogu ponoviti samo jednom, dakle, jedinstveni su.

Njihova oznaka je # a zatim slijedi ime ID-a, npr. za ID

zaglavlja u css dokumentu biće:

#zaglavlje {

width: 960 px;

height: 200 px;

background-color: #555555;

float:left;

}

U html dokumentu će izgledati ovako:

Značenje jedinstvenosti za ID. To znači da ja ovo mogu još negdje pisati u

kodu html-a ali se u browseru jednostavno

neće vidjeti.

Definisanje taga u html-u

Div tag predstavlja box-kutiju, prostor u kojem možemo

smjestiti navigaciju, tekst, slike ili u kome ćemo

napravit druge divove. Sam po sebi ništa ne znači, ali

stvari se mijenjaju kad mu pridružimo CSS klasu ili ID.

Prvo kreiramo u tagu za omotač stranice. U

taj prostor ćemo staviti sve elemente stranice:

zaglavlje (header), podnožje (footer), te sav sadržaj

između toga.

Osnovni dijelovi stranice

Z A G L A V L J E

S A D R Ž A J

P O D N O Ž J E ( F O O T E R )

Komentar u CSS-u

Možemo ubacivati komentare unutar CSS-a zaobjašnjenje koda, koji nam može pomoći kad kasnijeuređujemo kod.

Počinje sa otvorenim komentar tagom “/*” a završava sa svojim zatvorenim tagov “*/”

p { color: black; /* Ovo je komentar */text-align: center;

}

Margin atribut

Sa margin atributom podešavamo udaljenost HTML elementa od drugih elemenata.

p { margin: 12px 15px 20px 30px; }

margin-right: auto;margin-left: auto;

Padding i Border

Padding-om se podešava udaljenost od okvira elementado sadržaja unutar njega.

p { padding: 10px 0px 0px 0px; }

Border se definiše kroz večinu, stil i bojup { border: veličina, stil, boja }

p { border: 1px solid #000; }

Podešavanje širine i visine elemenata

i veličine fonta

p {width: 200px;height: 200px;}

p {font-size: 20px;}

Primjer osnovnog CSS-a

Dio CSS-a

Boje u CSS-u

Primjer

Prateći CSS

Boje pozadine