Evo pošto ovakvog tutoriala na forumu nema odlučio sam ga napraviti! 
Moglo bi sticky. 
UVOD
CSS je skraćenica od Cascading Style Sheets. Style (stil) definira kako prikazati HTML elemente. CSS vam može uštedjeti mnogo vremena i uz to poboljšati izgled i funkcionalnost vaših web stranica.
Style možemo pisati unutar <head> i </head> tagova ili u eksternim style stranicama. Češće korištena varijanta je pisanje CSS-a u eksternim stranicama. Ali mi ćemo prvo koristiti unutar <head> i </head> tagova radi lakšeg učenja, a kasnije ću vam objasniti kako se prebaciti na eksterni način rada. Ako želite imati CSS unutar head tagova, napišite ovo između <head> i </head>
<style type="text/css">
</style>
Između toga pišete vaš CSS kod. Npr. kao najjednostavniji primjer koristit ćemo ovo. Između dodajte ovaj kod:
body{color: red;}
S ovime ste promijenili boju teksta u crveno na cijeloj stranici. Sada probajte nešto napisati na vašu web stranicu. Gdje god nešto probate napisati bit će napisano crvenom bojom. To je bio najjednostavniji primjer. Evo sada primjer kako vam CSS može olakšati posao. Između <style type="text/css"> i </style> napišite sljedeće:
#primjer{
background-color:#003366;
padding: 20px;
border: 1px;
color: #FFFFFF;
height: 200px;
width: 400px;
}
i zatim između <body> i </body> upišite:
<div id="primjer"> CSS tutorial </div>
VRSTE STILOVA
Postoje interni, externi inline CSS style.
Interni style
- Piše se u head dijelu stranice. Evo primjera:
<html>
<head>
<style type="text/css">
.tablica {
background-color: #006699;
color: #FFFFFF;
font-family: Tahoma; }
</style>
</head>
<body>
<div class="tablica"> Tutorijali.Net </div>
</body>
</html>
Eksterni style
- Ovaj način je najčešći. Piše su u externom fajlu. Otvorite notepad i napišite isto kao gore.
.tablica {
background-color: #006699;
color: #FFFFFF;
font-family: Tahoma; }
Imenujte taj fajl npr. style.css
Sada u HTML fajlu moramo povezati taj externi CSS Style sa našom stranicom. To ćete napraviti tako da dodate ovu liniju koda u head dijelu stranice:
<link href="style.css" rel="stylesheet" type="text/css" />
HINT: ako ćete tako povezati onda style.css mora biti u istom folderu u kojem je i stanica s kojom se povezuje inače morate ispred style.css dodati putanju do fajla.
Inline style
- Inline style se koristi na sljedeći način:
<td style="background: blue; color: white;">Plava pozadina sa bijelim tekstom.</td>
BACKGROUND
Background color
Sa Backgroundom color možete promijeniti boju pozadinu bilo kojem elementu. Napravimo jedan css style za pozadinu koji ćemo primjeniti na raznim elementima.
.pozadina {
background-color: #006699;
}
Evo primjera kako to možete iskoristiti:
<table class="pozadina"></table>
<td class="pozadina"> </td>
<p class="pozadina">
Background Image
CSS ima mogućnost da umjesto boje postavite neku sliku kao pozadinu. Evo primjera:
.pozadina {
background-image: url(neka-slika.jpg);
}
ili sa punim pathom do slike npr.
.pozadina {
background-image: url(http://www.krizevci.hr/joomladir/images/stories/google.jpg);
}
FONTOVI
Definiranje fontova
Za prvi primjer koristit ćemo bojanje fonta po veličini fonta. Boju možemo promijeniti na sljedeće načine:
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
Ako vam to bude u style sheetu onda ćete kod h4, h5, i h6 fonta imati različite boje.
Font family
Evo kako možete promijeniti vrstu fonta:
h4 { font-family: Verdana; }
h5 ( font-family: Arial; }
h6 { font-family: Tahoma; }
Naravno ne morate postaviti h4, h5 i slično, možete i za određenu tablicu, npr:
.nekatablica {
font-family: Verdana;
}
Font size
Veličinu fonta možete odrediti u postotcima i pixelima. Npr.
.nekatablica {
font-size: 120%;
}
.drugatablica {
font-size: 10px; }
}
Font style
Font style odnosno nakošeni, podebljani ili normalni font definirate ovako:
.tablica {
font-style: italic;
}
.tablica2 {
font-style: oblique;
}
.tablica3 {
font-style: normal;
}
Font Variant
Ako napišete npr:
.nekatablica {
font-variant: small-caps;
}
Dobti ćete "mala - velika slova" odnosno caps lock slova ali manja nego normalno.
IZRADA MENIJA POMOĆU LISTE
Ovo napišite između <head> i </head>:
<style type="text/css">
#lista li
{
display: inline;
padding-right: 20px;
font-weight: bold;
}
#lista a:hover {
color: #FF9933;
}
</style>
Znači definirali smo CSS-om kako da se prikazuje lista pod ID-om "lista".
Sa
display: inline;
smo naredili da se lista pod ID-om "lista" prikaže horizontalno.
Sa
padding-right: 20px;
smo odmakuli desno svaki stavak u listi da nebi bili sljepljeni jedan na drugi.
Sa
font-weight: bold;
smo naravno definirali da nam tekst bude Bold.
I na kraju smo samo još dodali #lista a:hover odnosno kako će se ponašati linkovi kada se pređe strelicom miša preko njih.
To je sve što se tiče CSS dijela. Sada još moramo napraviti listu. Napravimo onda najprije jedan <div> u kojem ćemo držati naš menu odnosno listu i zatim unutar tog div-a napravimo listu koja će nam služiti kao menu.
<div>
<ul id="lista">
<li><a href="bla1.html">Link 1</a></li>
<li><a href="bla2.html">Link 2</a></li>
<li><a href="bla3.html">Link 3</a></li>
<li><a href="bla4.html">Link 4</a></li>
<li><a href="bla5.html">Link 5</a></li>
</ul>
</div>
Vidite da smo listi dali id "lista". Znači da će se ta lista prikazat onako kako smo odredili CSS-om.
OVERFLOW TEKSTA
Overflow Teksta Unutar Div-a
Pravimo div #overflwed
<style type="text/css">
#overflwed {
width: 400px; /* definiramo sirinu div-a*/
height:200px; /* definiramo visinu div-a*/
border-bottom:1px solid silver; /* donji rub*/
border-top: 1px solid silver; /* gornji rub*/
margin:0 auto; /* centriramo div na sredinu stranice*/
overflow: scroll; /*Omogucavamo overflow */
overflow-x:hidden;/* Sakrivamo kliznu traku po x-osi*/
}
Opis imate poslije svake linije koda
Uredjujemo paragraf i Zatvaramo </style>
p {
margin-left:5px;
color:blue;
font-family: tahoma;
font-size:10px;
}
</style>
Ubacujemo ga u html
<div id="overflwed">
<p>Ovaj kod objasnjava kako napraviti div,koji ce ako se upise previse teksta sam od sebe napraviti scroll.
Klizne trake se naravno mogu modificirati,moze im se mjenjati boja,ali to je podrzano samo u Internet Exploreru.
Dok u Firefoxu ne radi,iako je Firefox trenutno na mnogo boljem glasu.Sad cu upisati mnogo slova tek toliko da vidite,kako ce se napraviti scroll!
-<br>-<br>
-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>
By:Goran
</p>
</div>
Cijeli kod od <div id="overflwed"> do </div> morate ubaciti u body dio.
Hvala na čitanju i sretno!
