Stilovi

Primer 1
<FONT face="Arial" size="5" color="#FF00FF" > Izdvojen tekst </FONT>

Primer 2
<strong style="color:black;background-color:#00CED1"> Izdvojen tekst </strong>

I HTML (poput aplikacija za pripremu štampe) podržava koncept stila i šablona. Stil definiše dizajn i raspored informacija za dokumente: podešavanje margina, proreda, boja, fontova, poravnanja, precizna kontrola pojavljivanja elemenata u HTML dokumentu,...

Odvajanjem forme prikaza od sadržaja
• smanjuje se potreba za uvođenjem nestandardnih elemenata koji obezbeđuju precizniji izgled ili kontrolišu raspored unutar sadržaja dokumenta
• oznake i kontrole ne moraju biti direktno umetnute u HTML, jer je to sada pitanje stila
• autori i korisnici mogu da utiču na predstavljanje dokumenata, jer je obezbeđena zajednička definicija za dobijanje finalnog dokumenta, a pri tom se ne gubi nezavisnost od softvera i uređaja

Složen tag <style> je deo HEAD sekcije.

Primeri formiranja spiska pravila stila za određeni HTML dokument

Svako pravilo je izraz koji definiše šta će se stilizovati i kako će se stilovi prikazati. Stil strana se sastoji iz liste pravila koju browser konsultuje da bi odredio kako da izgleda ili zvuči strana.

Osnovni delovi jednog pravila su: SELEKTOR i DEKLARACIJE.

Deklaracija se sastoji od karakteristike i vrednosti karakteristike.
Forma: selektor {karakteristika: vrednost ;}

Selektorski deo govori koji deo HTML dokumenta je pokriven pravilom stila.

Deklaracije pravila se smeštaju unutar vitičastih zagrada, a karakteristika i njena vrednost su razdvojene dvotačkom. Iza vrednosti se stavlja tačka-zarez.

<style>
H1 { color: blue; }
</style>

Primer kombinovanih pravila

<style>
p { color: blue; }
p { font-size: large; }
</style>

Ova pravila se mogu kôdirati i kao:

<style> p { color: blue; font-size: large } </style>

Primer kombinovanih pravila koji imaju iste deklaracije, a različite selektore

<style>
p { color: blue; }
address { color: blue; }
</style>

Ova pravila se mogu kôdirati i kao:

<style> p, address { color: blue; } </style>

Ovo pravilo se interpretira kao: sadržaj unutar P i ADDRESS tagova prikazati kao plavi tekst.

Karakteristike fontova

<style>    
H1 { color: goldenrod;         
        font-size: 36pt;         
        font-family: Arial;         
        font-style: italic;         
       font-weight: bold }
</style>

Karakteristike pozadine

<style>
    BODY { background: midnightblue;  color: lime }
</style>

Karakteristike margina

<style>
    BLOCKQUOTE { 
           margin-top: 1em;         
           margin-right: 0em;
           margin-bottom: 1em;
           margin-left: 0em;
           font-style: italic }</style>

em space ili em razmak je jedinica mere u tipografiji za razmak širine kao kod određenog slova mereno tipografskim tačkama. Za mnoge fontove radi se o širini velikog slova M i odatle potiče ime ovog znaka.

Korišćenje klasa elemenata

  <P class=zaseban>Neki izdvojen 
tekst
kao pasus dokumenta.

<style>
  p.zaseban {
             padding-left: 0.2em;
             border-left: solid;
             border-top: none;
             border-bottom: none;
             border-left-width: thin;
             border-color: #ff0099; 
                   }
</style>

Uključivanje gotovih stilskih listova

<link rel="stylesheet" href="nekistil.css">

Element <LINK> je prost (nema zatvarajući komplement). Uključuje se unutar sekcije HEAD. Namena ovog taga je da uključi informacije o povezivanju tekućeg HTML dokumenta sa drugim dokumentima i resursima. Atributi: HREF, REL, MEDIA, REV, TYPE, TARGET.
Atribut HREF ima vrednost URL-a odredišta veze. Atribut REL ukazuje na tip veze. Na primer rel="stylesheet" obaveštava browser da dokument na koji se odnozi veza jeste strana sa stilovima.

PRIMER UKLJUČIVANJA SPOLJNOG CSS-a:

<link type="text/css" href="http://WebPutanja/stylesheet.css">