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>

...

Rad sa HTML i CSS-om ume nekad zaista dugo da potraje, ali tu su naravno alati koji koji će vam pomoći da uštedite svoje dragoceno vreme sa specifičnim funkcijama. Ja vam preporučujem sledeće alate koje pretežno koristim, ako vi korisite nešto što nisam napisao slobodno dodajte.

1. Grid designer
Kao što samo ime kaže online alat za brzo kreiranje rešetki za vaše  šablone. Olakšava brže definisanje formata širine, broj kolona, jednostavno postavite tipografiju i izvezize celu stvar.

2. CSS Menu Maker
Kreirajte i prilagodite CSS menije, horizontalno ili vertikalno potpuno besplatno! Odličan online alat.

3. PSDtoCSS online
Pretvorite vaše .psd fajlove u XHTML-CSS šablon. Potreban je samo upload i onda možete preuzeti vaš šablon u .zip arhivi. Zaista korisno.

4. CSS Super Scrub
Smanjuje veličinu vaših CSS datoteka u nekoliko klikova.

5.  CSS Color Editor
Jednostavno zamenite boje iz svoje CSS datoteke, sve što trebate uraditi jeste da aploudujete fajl, zameniti boje i generisati novu CSS datoteku koju možete preuzeti.