CSS TUTORIJALI

Uvod i prvi primjer CSS je skraćenica od Cascading Style Sheets. Style (stil) definise 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 u <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 u head tagovima, 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. Đe god da nešto napište 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"> E - Learning </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"> E-Learning </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 što 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>


Inline CSS

Kreiranje obojenog text box-a

Od Marta 2008, Wikispace omogućava upotrebu CSS tagova u tekstu. Span tag može se modifikovati i koristiti kao <div> tag pomoću parametra display: block. Pomoću Text Editor-a unesite sledeći CSS kod:
 <span style="display: block; width: 90%; margin: 10px auto 10px 30px;
  border: 1px solid #9999aa; padding: 10px; background-color: #ffffdd;">
( Napomena: CSS kod je napisan u dvije linije da bi se omogućilo njegovo prikazivanje na wiki strani. Kada unosite CSS kod na svoju wiki stranu, potrebno je da sav kod bude u jednoj liniji.)

Na kraju unesite CSS tag
</span>
Tekst koji želite da prikažete u okviru text box-a unesite između početnog i završnog taga.
Ovo je obojeni text box kreiran pomoću CSS-a.

Dodavanje CSS-a pomoću opcije Other HTML

Kreiranje text box-a sa zaobljenim ivicama


HTML kod i CSS pravila unosite u wiki stranu klikom na ikonu Embed Widget u Editoru. Zatim izaberite opciju Other HTML i u text box unesite svoj kod.

Primjer:
Da biste pogledali kod za ovaj primjer, pređite u Edit mod. Zatim kliknite na widget box i izaberite Edit Widget.



CSS Page includes

JavaScript wrappers


Kada želite više puta da koristite iste CSS tagove na različitim wiki stranama, najjednostavnije rješenje je da kreirate dvije posebne wiki strane, od kojih će jedna sadržati početni CSS tag a druga završni CSS tag. Nakon što kreirate ove dvije wiki strane, pomoću include page možete ih koristiti na bilo kojoj wiki strani.

Primjer: Kreiranje žutog text boxa
1. Kreirajte wiki stranu u koju ćete unijeti početni tag. Stranu nazovite CSS_zuti_box_open. U Text Editoru kliknite na Embed Widget i izaberite opciju Other HTML. U text box unesite sledeći kod:
<script language="JavaScript">
  document.write('<div style="width: 90%; margin: 10px auto 10px 30px;
border: 1px solid #9999aa; padding: 10px; background-color: #ffffdd;">')
</script>
(Napomena: Kod je napisan u dvije linije da bi bio prikazan na wiki strani. Morate unijeti sav kod document.write u jednoj liniji !)

2. Kreirajte wiki stranu u koju ćete unijeti završni tag. Nazovite je CSS_zuti_box_close. U Text Editoru kliknite na Embed Widget i izaberite opciju Other HTML. U text box unesite sledeći kod:
<script language="JavaScript">
  document.write('</div>')
</script>

3. Nakon što ste kreirali dvije posebne wiki strane, jednusa početnim i drugu sa završnim tagom,, pomoću include page možete ih koristiti na bilo kojoj wiki strani za kreiranje žutog text box-a. Tekst koji želite da prikažete u text box-u unosite direktno na wiki stranu u koju uključujete (pomoću include page) dvije prethodno kreirane wiki strane.
[[include page="**CSS_zuti_box_open**"]]
Ovo je tekst u žutom text box-u.
[[include page="**CSS_zuti_box_close**"]]