Dodajte CSS na web stranice

Objavljeno: 16.06.2007. 12:19

Postoje tri načina na koje možete dodati CSS na vaše stranice. U prva dva načina CSS i (X)HTML kod se nalaze u istoj datoteci, a treći i najbolji je - CSS u zasebnoj datoteci.

linijski (in-line) CSS
CSS unutar (X)HTML datoteke
CSS u zasebnoj datoteci

Linijski CSS

Na ovaj način dodajemo CSS izravno u (X)HTML tagove.
Preporuka je da se koristi što manje.

<p style="font-size: 12px;">Ovo je linijski CSS</p>

Možete primjetiti da na ovja način nije potrebno pisati vitičaste zagrade. CSS kod piše se unutar style atributa.

CSS unutar (X)HTML datoteke

CSS kod dodajemo unutar (X)HTML datoteke, između <head></head> tagova. Nedostatak je što se CSS treba mijenjati za svaku stranicu posebno, što nije naročito zabavno ;) Opet, preporuka je da se CSS kod nalazi u zasebno datoteci.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Moja prva web stranica</title>
<style type="text/css">
 p { 
    color: blue;
    font-size: 12px;
   }

 a { 
   color: red;
   font-size: 14px;
   }
</style>
</head>
...

CSS u zasebnoj datoteci

Preporuka je da se CSS kod nalazi u zasebnoj datoteci. Na taj način se u potpunosti odvaja sadržaj (HTML) od izgleda stranice (CSS). Na ovaj način jednu CSS datoteku možete koristiti na više stranica, što olakšava održvanje stranica. Ako poželite promijeniti izgled web stranica sve što je potrebno je izmijeniti CSS.

Ovaj tekst upišite u novu datoteku i spremite ga kao stil.css. Kasnije ćemo ga pozvati u (X)HTML dokumentu.

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

 a { 
   color: red;
   font-size: 14px;
   }

U (X)HTML kod moramo dodati referencu na vanjsku CSS datoteku.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Moja prva web stranica</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>

Postoje još neki načini za dodavanje vanjske CSS datoteke, a o njima možete saznati više u nekom od sljedećih tutoriala.

tzpahebe on 14.09.2008. 07:39

vVCXFa ufmyxftkoxvq, [url=http://afjvflycnppj.com/]afjvflycnppj[/url], [link=http://htrqptaggdyd.com/]htrqptaggdyd[/link], http://nyeuuenzppke.com/

Dena on 01.03.2008. 00:29

Hvala za pomć !

Dena on 29.02.2008. 23:53

Hvala za pomć !

matej eugen on 06.10.2007. 20:49

super page