V urejevalniku Notepad++  si najprej pripravimo strukturo, ki jo bomo potrebovali.

Na začetek dokumenta vstavimo deklaracijo DOCTYPE, da se bo spletna stran v vseh brskalnikih prikazovala enako.

V znački style bomo najprej določili ozadje spletne strani in pa tip pisave.

body {
background-color:#C0C0C0;
font-family: Calibri;
}

Ozadje bo svetlo sive barve, pisava pa Calibri.

Zdaj ustvarimo div z imenom glavni-del,  v katerem se bo nahajal prostor za logotip, navigacijo in tekstovni del.

#glavni-del {
margin:auto;
width:970px;
padding:10px;
background-color:#787878;
}

Stran postavimo na sredino, ji določimo širino 970px, vsi elementi, ki jih bo vseboval glavni del, bodo odmaknjeni od roba tega dela vsaj 10px. Izberemo še barvo ozadja glavnega dela.

Ta del, ki smo ga ustvarili v znački style, moramo vnesti še v telo kode (body).

Ta del še ne bo viden, saj mu zgoraj nismo določili višine, ta pa se bo spreminjala glede na velikost vsebine.

Na podoben način kot glavni del, bomo ustvarili prostor za logotip.

#logo {
width:300px;
height:100px;
padding-top:20px;
text-align:center;
background-color:#585858;
color:#FFFFFF;
}

Prostoru določimo širino 300px in višino 100px. Tekst bo od vrha dela odmaknjen za 20px ter poravnan na sredino. Ozadje bo nekoliko temnejše sive barve, barva pisave pa bo bela.

V telo kode vstavimo del logo. Tokrat ga vstavimo v div, ki smo ga ustvarili v 4. In 5. koraku, torej v div glavni-del.

Dodali smo mu še besedilo, označeno kot glavni naslov.
Če zdaj odpremo stran, bi že morali imeti obliko kakršno vidite tukaj.

Zdaj je na vrsti navigacija.

#navigacija {
float:right;
margin-top:-50px;
width:570px;
height:20px
padding:15px;
background-color:#585858;
}

Postavimo jo na desno stran glavnega dela, jo dvignemo za 50px, nastavimo širino in višino. Tekst bo od roba navigacije odmaknjen vsaj 15 px, ozadje pa bo temno-sivo.

V telesu kode nastavimo kodo div-a navigacija pod kodo div-a logo.

Trenutno stanje

Povezavam v navigaciji, ki jih pa še ni, bomo najprej določili razmik in poravnavo, v naslednjem koraku pa jih bomo dodali kot bloke.

#navigacija li {
float:left;
width:100px;
display:block;
}

Vnose v znački li (list item) bomo poravnali od leve proti desni, med njimi nastavili prazen prostor, ki bo velik 100px ter vnose postavili v bloke.

Sedaj so na vrsti vnosi v znački li (list item), ki jih bomo dodali v div navigacija.
Dodamo 5 povezav.

• Domov

• Novice

• Galerija

• Forum

• Kontakt

Trenutno stanje

Ker povezave še ne zgledajo dobre, jih bomo malo spremenili s tem, da ustvarimo dva razreda.

.razred-navigacija a:link {
color:#C9C9C9;
text-decoration:none;
}

.razred-navigacija a:hover {
color:#FFFFFF;
text-decoration:underline;
}

V prvem razredu ustvarimo lastnosti za povezavo, ki ni prekrita z miškinim kazalcem. Barva je malo temnejša od bele, povezava pa ni podčrtana, ni ležeča in ni odebeljena.
V drugem razredu ustvarimo lastnosti za povezavo, ko bo na njej miškin kazalec. Barva se spremeni na belo, povezava pa se podčrta.

V tem koraku dodamo v v div navigacija razred, ki smo ga pravkar izdelali. Povezave morajo biti znotraj razreda!


POVEZAVE

Če grete zdaj z miško preko povezav, opazite, da se te spreminjajo.

Trenutno stanje

Izdelajmo še del, v katerem se bo nahajala vsebina spletne strani.

#vsebina {
width:950px;
margin-top:20px;
padding:10px;
background-color:#585858;
color:#FFFFFF;
clear:both;
}

Nastavimo širino 950px, ta del bom odmaknjen 20px nižje od dela logo in navigacija, tekst bo od vsakega roba tega dela odmaknjen vsaj 10px, barva ozadja bo ista kakor v delih logo in navigacija, barva pisave bo bela. Na koncu še za vsak slučaj uporabimo clear, da se vsebina slučajno nebi znašla za deloma logo in navigacija.

Na koncu dodamo div vsebina še v div glavni-del, pod navigacijo in v njega napišemo nekaj teksta.

Tako, ustvarili smo spletno stran s slogi CSS.