Postoje tri načina za povezivanje HTML-a s CSS-om: Pomoću internih stilova, povezivanje s vanjskom .css datotekom ili umetanjem stilova u sam HTML element.
Interni stilovi
Vanjsko povezivanje
Stilovi u HTML elementu
Korištenjem internih stilova umećemo css svojstva unutar datoteke na koju primjenjujemo ta svojstva. Svojstva definirana na jednoj web stranici ne mogu se bez ponovnog upisivanja koristiti na nekoj drugoj web stranici istog web sjedišta.
Opis svojstava se nalazi između početne i završne oznake <style> elementa. <style> element mora se nalaziti unutar <head> dijela web stranice.
Primjer dodavanja svojstva color i font-size korištenjem selektora elementa <p> unutar internog umetanja stila:
<html>
<head>
<style>
p { color: blue; font-size:14px; }
</style>
</head>
...Koristeći vanjsko povezivanje css svojstva se nalaze u vanjskoj .css datoteci. Kod ovog povezivanja možemo primijeniti ista css svojstva na više web stranica istog web sjedišta.
Povezivanje s vanjskom datotekom obavlja se korištenjem <link /> elementa kojeg trebamo umetnuti između početne i završne oznake <head> elementa.
Primjer povezivanja html dokumenta s vanjskom .css datotekom (u ovom primjeru datoteka u kojoj su opisana css svojstva zove se stil.css):
<link rel="stylesheet" href="stil.css" />Stilove možemo umetnuti i unutar pojedinih html elemenata dodavanjem svojstvu style željene vrijednosti. Vrijednost svojstva style html elementa može sadržavati jedno ili više CSS svojstava.
Radi odvajanja sadržaja web stranice od izgleda predlaže se koristiti stilove u html elementima samo kada je to nužno potrebno.
Primjer dodavanja css svojstva color i font-size html elementu odlomka:
<p style="color:blue; font-size:20px;">
Slova odlomka su plave boje veličine slova 20px.
</p>Gornji primjer u web pregledniku ima slijedeći izgled:
Slova odlomka su plave boje veličine slova 20px.