CSS Tutorial

Što je CSS?

CSS je skraćenica za Cascading Style Sheets, to je stilski jezik koji se koristi za definiranje izgleda Web stranice i pozicioniranje njezinih elemenata dok se HTML koristi za kreiranje strukture Web stranice.

CSS se može pisati unutar samog HTML dokumenta ili se može pozvati vanjski CSS dokument koji će sadržavati CSS kod. Zbog jednostavnosti, količine dokumenata i činjenice da je ovo tutorijal za početnike mi ćemo CSS pisati unutar HTML dokumenta iako se inače za naprednije korisnike preporučuje da se piše u zasebnom dokumentu.

<style type="text/css">
Ovdje se piše sav CSS kod
</style">

Kada bismo CSS-om htjeli tekst naslova (heading 1) obojati u crnu boju i definirati veličinu fonta od 14 pixela to bismo napravili na sljedeći način. Prvo definiramo koji element (selektor) ćemo stilizirati:

<style type="text/css">
h1
</style">

Nakon toga definiramo područje unutar kojega ćemo pisati stilove za taj element. Stilovi se pišu unutar najobičnijih vitičastih zagrada:

<style type="text/css">
h1{
tu ćemo pisati stilove za h1
}
</style">

Unutar vitičastih zagrada napisati ćemo da želimo da font bude crne boje i veličine 14 px. Za one koji neznaju što je px, to je mjerna jedinica koja se koristi prilikom izrade Web stranica, 1 pixel = 0.26 mm to znači da 14 pixela = 3.70 mm.:

<style type="text/css">
h1{
color: black;
font-size: 14px;
}
</style">

Na predhodnom primjeru vidi se da se CSS stilovi se sastoje od 2 djela, svojstvo i vrijednost. Svako svojstvo ima neku vrijednost npr. u našem primjeru svojstvo color ima vrijednost black, a svojstvo font-size ima vrijednost 14px. Nakon svojstva piše se dvotočka koja odvaja svojstvo i njegovu vrijednost (color: black) a nakon vrijednosti piše se točka zarez (color: black;). Točka zarez daje nam do znanja da tu svojstvo sa svojom vrijednosti završava.

Sada ćemo na isti način stilizirati heading 2 naslov. Njega ćemo samo za primjer obojati bjelom bojom i odrediti veličinu fonta 12 pixela:

<style type="text/css">
h1{
color: black;
font-size: 14px;
}
h2{
color: white;
font-size: 12px;
}
</style">

CSS u HTML dokumentu

CSS style tagovi se pišu u headeru HTML dokumenta. Kreirat ćemo jedan prazan HTML dokument, ako neznate kako provjerite prvi dio našeg tutorijala u kojemu je sve objašnjeno: izrada Web stranica

<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Opis">
</head>
<body>
<h1>Naslov</h1>
<h2>Podnslov</h2>
</body>
</html>

Praznome HTML dokumentu dodat ćemo h1 i h2 naslove te njihove CSS stilove koje smo prethodno napisali da vam prikažemo kako CSS izgleda u svom prirodnom okruženju.

<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Opis">
<style type="text/css">
h1{
color: black;
font-size: 14px;
}
h2{
color: white;
font-size: 12px;
}
</style">
</head>
<body>
<h1>Naslov</h1>
<h2>Podnslov</h2>
</body>
</html>

Sada su oba dva naslova stilizirana CSS-om. Mi smo u primjeru koristili samo dva svojstva boju (color) i veličinu fonta (font-size), ali CSS im mnogo više svojstava kojima se može stilizirati cijela Web stranica a ne samo njen tekst.

Neka CSS svojstva koje se najčešće koriste i neke njihove vrijednosti:

SVOJSTVO PRIMJER VRIJEDNOSTI OPIS
font Arial Koji font će se koristiti
font-size 14px Veličina fonta
color black Boja fonta
font-weight bold Debljina fonta
font-style italic Kosi font
line-height 20px Visina linije teksta
letter-spacing 5px Razmak između slova
word-spacing 10px Razmak između riječi
text-aling center Horizontalno poravnanje teksta
text-decoration underline Dekoriranje teksta
white-space nowrap Kako će se postupati sa praznim prostorom unutar teksta
background-color white Boja pozadine
background-image url(/images/slika.png) Pozadinska slika
background-repeat no-repeat Ponavljanje pozadinske slike
background-position 10px 30px Pozicioniranje pozadinske slike
padding 5px 0px 10px 3px Punjenje (unutarnji razmak)
margin 5px 0px 10px 3px Margina (vanjski razmak)
border 1px Debljina okvira
border-color red Boja okvira
border-style solid Stil okvira
width 500px Širina
height 500px Visina
position relative Pozicioniranje
overflow hidden Preljevanje
float left Plutanje (lijevo ili desno)
display inline Način prikaza
visibility hidden Vidljivost
list-style-type none Stil liste

HTML klase

Naš HTML kod moramo pripremiti da bi što lakše unutar njega mogli integrirati CSS stilove. Pripremu HTML-a ćemo izvršiti tako da ćemo svim HTML tagovima dodjelit određene klase. HTML klase koriste se da bi se uz pomoć njih HTML elementimd dodijelio nekakav stil. U nastavku ćemo prikazati primjer kako se dodjeljuju HTML klase i kako se definiraju njihovi stilovi:

<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="utf-8">
<title>Naslov</title>
<meta name="description" content="Opis">
<style type="text/css">
.glavni-naslov{
color: black;
font-size: 14px;
}
.podnaslov{
color: white;
font-size: 12px;
}
</style">
</head>
<body>
<h1 class="glavni-naslov">Naslov</h1>
<h2 class="podnaslov">Podnslov</h2>
</body>
</html>

Stiliziranje Web stranice CSS-om

Nakon završetka prvog djela tutoriala izrada web stranica, krećemo na drugi dio u kojemu ćemo stilizirati HTML strukturu Web stranice.

<style type="text/css">
body, html{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-color:white;
min-width:291px;
}
</style">
  • Kao što se <p> tag odnosi samo na paragraph, tagovi body i html odnose se na cijelo Web sjedište. Unutar ova dva taga unjet ćemo svojstva I njihove vrijednosti koje će se odnositi na cijlo Web sjedište
  • Svaki preglednik (browser) Web stranicama dodaje razmak na rubovima kojega smo uklonili postavljanjem vrijednosti margin i padding na nulu.
  • Definirali smo font koji će se koristiti na cijeloj Web stranici.
  • Boja pozadine koje će se koristiti na cijeloj Web stranici.
  • Pošto se naša Web stranica prilagođava veličini različitih ekrana postavili smo njenu minimalnu širinu. Širinu smo ograničili jer ispod te širine naša Web stranice nebi dobro izgledala.
<style type="text/css">
body, html{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-color:white;
min-width:291px;
}
a{
color:#e4f5fd;
}
</style">

Kao što znamo linkovi se pišu na sljedeći način <a href="#">link</a>. Kada u CSS-u navedemo svojstvo a znači da ćemo njime stilizirati sve linkove. Sada smo sve linkove obojali navedenom bojom. Ovaj kod #e4f5fd; zove se RGB kod, pojednostavljeno to znači da svaka boja koja postoji ima svoj kod, npr. crna boja je #000000; bijela boja je #FFFFFF; crvena boja je #FF0000; itd. RGB kodove svih postojećih boja možete saznati na sljedećoj Web stranici: RGB Color Codes Chart.

<style type="text/css">
body, html{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-color:white;
min-width:291px;
}
a{
color:#e4f5fd;
}
a:hover{
text-decoration:none;
}
</style">

hover označava stanje kada netko pokazivačem miša pređe preko određenoga elementa (eng. hover = hrv. lebdjeti). a:hover označava stanje kada netko pokazivačem pređe preko nekoga linka. Znači kada netko pređe mišem preko linka ukloniti će se njegovo podcrtavanje. To je standardni efekt koji se koristi zbog bolje preglednosti. Evo primjer kako to funkcionira, pređite mišem preko ovoga linka: primjer hover efekta

<style type="text/css">
body, html{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-color:white;
min-width:291px;
}
a{
color:#e4f5fd;
}
a:hover{
text-decoration:none;
}
p{
color:#525252;
}
</style">

Ovo vrijedi za sve paragrafe na Web stranici. Ovim stilom definirali smo boju teksta koji se javlja u paragrafima

<style type="text/css">
body, html{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
background-color:white;
min-width:291px;
}
a{
color:#e4f5fd;
}
a:hover{
text-decoration:none;
}
p{
color:#525252;
}
.menu{
height:50px;
width:100%;
margin:0px auto;
position:relative;
z-index:9999;
color:black;
box-shadow:0px 0px 5px 5px #3d78b3;
background-color:#3d78b3;
}
</style">

Redom ćemo objasniti što smo sada stilizirali u menu klasi.

  • height:50px; Odredili smo visinu ovog područja
  • width:100%; Odredili smo širinu područja
  • margin:0px auto; Vrijednost margine smo definirali na ovaj način nebili centrirali cjeli menu na sredinu ekrana. Prva vrijednost se odnosi na vertikalnu marginu, druga na hosrizontalnu. Postavljanjem horizontalne margina na vrijednost auto centrirali smo taj element na sredinu.
  • position:relative; Relativno pozicioniranje na Web stranici
  • z-index:9999; Elementi koji imaju z-index vrijednot npr. 15, prikazivat će is ispod elemenata sa z-index vrijednosti od npr. 16. Postavljanjem z-index vrijednosti na 9999 očito je da želimo da se ovaj element pokazuje iznad svih ostalih.
  • color:black; Boja teksta unutar ovog elemenata biti će crna
  • box-shadow:0px 0px 5px 5px #3d78b3; Ovo svojstvo definira sjenu elementa. Svojstvo ima 5 vrijednosti, prve četri su u pixelima a jedna je boja. Prva vrijednost označava vertikalno pozicioniranje sjene, druga horizontalno. Treća vrijednost označava koliko će sjena biti raširena. Četvrta vrijednost označava količinu zamagljenosti sjene a zadnja vrijednost je boja sjene.
  • background-color:#3d78b3; Definirali smo boju pozadine.

Dali smo vam neke osnovne primjere CSS stiliziranja da bi shvatili na koji način funkcioniraju i kako ih se treba koristiti u kombinaciji sa HTML strukturom stranice. Sada ostaje na vama da samostalno eksperimentirate i dizajnirate CSS prema vašim željama i potrebama. Da biste nastavili svoju CSS edukaciju predlažemo jedan od najboljih resursa za učenje, gdje uz praktične primjere možete i samostalno isprobavati vlastite CSS kodove: CSS Tutorial. Sretno :)