CSS za početnike – umetanje CSS koda

Postoje tri metoda za ubacivanje CSS koda u HTML.

• Inline
• Internal
• External

Inline metodom CSS kod postavljamo direktno u HTML koristeći style atribut. To izgleda ovako:

Ovaj kod ce nam odredjeni paragraf  ispisati crvenim fontom. Ja vam lično savetujem da ovaj metod ne koristite ili ga koristite kada vam CSS fajl nije zahtevan. Najbolje je CSS napraviti u externalnoj datoteci odakle se poziva iz HTML fajla. Dakle ovaj metodom CSS atribute postavljate odredjenim delovima stranice.

Internal metod ili umetnuti, njega primenjujemo najčešće kada želimo da zadamo CSS na celu stranu, style tagom obeležavamo CSS na stranici. To bi izgledalo ovako:

<span class="doctype">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</span>

&lt;<span class="tag">html</span>&gt;

&lt;<span class="tag">head</span>&gt;

&lt;<span class="tag">title</span>&gt;Naziv stranice&lt;/<span class="tag">title</span>&gt;

<strong>&lt;<span class="tag">style </span><span class="attribute">type</span>=<span class="string">"text/css"</span>&gt;</strong>

        <strong>p {</strong>

                <strong>color: red;</strong>

        <strong>}</strong>



        <strong>a {</strong>

                <strong>color: blue;</strong>

        <strong>}</strong>

<strong>&lt;/<span class="tag">style</span>&gt;</strong>

...

Ovaj kod će sve paragrafe na stranici ispisati crvenom bojom i sve linkove ispisati u plavoj boji. Kao što ste primetili princip je sličan Inline metodu .

External metod se koristi uglavnom kada se radi sa više stranica, i uzima se odvojeni CSS fajl. Kod bi izgledao ovako:

<strong><span class="selector">p </span>{</strong>

        <strong><span class="property">color</span>: red;</strong>

<strong>}</strong>



<strong><span class="selector">a </span>{</strong>

        <strong><span class="property">color</span>: blue;</strong>

<strong>}</strong>

Hvaj kod sačuvajte kao web.css i linkujte ga iz HTML koda ovako:

<span class="doctype">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</span>

&lt;<span class="tag">html</span>&gt;

&lt;<span class="tag">head</span>&gt;

        &lt;<span class="tag">title</span>&gt;CSS Example&lt;/<span class="tag">title</span>&gt;

        <strong>&lt;<span class="tag">link </span><span class="attribute">rel</span>=<span class="string">"stylesheet"</span> <span class="attribute">type</span>=<span class="string">"text/css"</span> <span class="attribute">href</span>=<span class="string">"web.css"</span> /&gt;</strong>

...