Cascading Style Sheets

CSSStilski jezik. Određuje kako će HTML prikazivati.

HTML i CSS-a

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

Ovo je inline CSS

2) Interni - koristimo HTML element , koji postaje sadržajHTML elementa . Unutar elementa style moramo dodati iatribut 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 eksternomfajlu, 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 unijeti 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 definirati (body, font, h1, p, img...)Property = opcija, odnosno atribut koji želimo promijenitiValue = vrijednost koju može poprimiti opcija

Grupno dodjeljivanje deklaracije

Mogućnost grupiranja

Selektori se mogu međusobno grupirati 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 definira 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đer 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 do kumentu 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.

Definiranje 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 za objašnjenje koda, koji nam može pomoći kad kasnije uređujemo kod.

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

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

}

Margin atribut

S 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 elementa do sadržaja unutar njega.

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

Border se definira kroz veličinu, stil i bojup { border: veličina, stil, boja }

p { border: 1px solid #000; }

Podešavanje širine i visine elemenatai veličine fonta

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

p {font-size: 20px;}

Primjer osnovnog CSS-a

Dio CSS-a

Boje u CSS-u

Prateći CSS

Boje pozadine