Slika 1. Definisanje eksternog .css fajla /EXTERNAL CSS/

Da bi koristili eksterni css /EXTERNAL CSS/ mora se navesti u HEAD dijelu HTML fajla koji CSS fajl se koristi.

Oznake:
Path - Putanja (direktorije - podirektorije) gdje se nalazi .css fajl
File - Ime .css fajla.
.css - Ekstenzija .css fajla

Aktivnost / Naredba

Kod u HEAD fajla:
<style>
.... kod ....
</style>

CSS fajl - CSS kod

Ime fajla

Ispis na ekranu

Boja pozadine dokumenta /PAGE BACKGROUND COLOR/ >>

Boja pozadine dokumenta je crvena /RED/.

body { background-color:red; }

<style>
body { background-color:red; }
</style>

>>

body { background-color:red; }

link: 10_BODY_red.css

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Boja pozadine dokumenta je crvena /RED/.

body { background-color:#FFFF00; }

<style>
body { background-color:#FFFF00; }
</style>

>>

body { background-color:#FFFF00; }

link: 10_BODY_FFFF00.css

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Boja teksta dokumenta /PAGE TEXT COLOR/ >>

Boja teksta dokumenta crvena /RED/.

body { color:red; }

<style>
body { color:red; }
</style>

>>

body { color:red; }

link: 10_BODY_text_red.css

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Boja teksta dokumenta žuta /YELLOW/.

body { color:#FFFF00; }

<style>
body { color:#FFFF00; }
</style>

>>

body { color:#FFFF00; }

Fajl: 10_BODY_text_FFFF00.css

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Boja teksta dokumenta /PAGE TEXT COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/ >>

Boja teksta dokumenta žuta /YELLOW/ a pozadine crvena /RED/.

body { background-color:red; color:yellow; }

<style>
body { background-color:red; color:yellow; }
</style>

>>

body { background-color:red; color:yellow; }

link: 10_BODY_red_yellow.css

LUPUS IN FABULA.

Mi o vuku vuk na vrata.

Margine /MARGINS/ >>

Margine veličine 35 px oko paragrafa.

p { margin: 35px; }

<style>
p { margin: 35px; }
</style>

>>

p { margin: 35px; }

Fajl: 10_MARGIN_paragraph35.css

Pojedinačne margine:
margin-top: Margina vrha;
margin-right: - Desna margina;
margin-bottom: Margina dna;
margin-left: Lijeva margina;

p {margin-top: 10px;
    margin-right: 35px;
    margin-bottom: 20px;
    margin-left: 15px;
}

<style>
p {margin-top: 10px;
    margin-right: 35px;
    margin-bottom: 20px;
    margin-left: 15px;
}
</style>

>>

p {margin-top: 10px;
    margin-right: 35px;
    margin-bottom: 20px;
    margin-left: 15px;}
}

Fajl: 10_MARGIN_paragraph_different_01.css

Uvlačenje teksta /INDENT/ { text-indent: } >>

Uvlačenje teksta.

p { text-indent: 55px; }

<style>
p { text-indent: 55px; }
</style>

>>

p { text-indent: 55px; }

Fajl: 10_INDENT_55.css

Naslov

Kulturni;

Uvlačenje teksta i promjena fonta.

p { text-indent: 25px;
font-family:Comic Sans MS; }

<style>
p { text-indent: 25px;
font-family:Comic Sans MS; }
</style>

>>

p { text-indent: 25px;
font-family:Comic Sans MS; }

Fajl: 10_INDENT_55_font.css

Bez pomjeranja

Nije podebljan

Kulturni

Numerisana lista /ORDERED LIST - OL & LI/ >>

Alfabetski redoslijed - velika slova /UPPER CASE/ (A, B, C, D)

list-style-type: upper-alpha

<style>
ol { list-style-type: upper-alpha; }
</style>

>>

ol { list-style-type: upper-alpha; }

Fajl: 20_OL_upper_alpha.css

A. voda
B. sok
C. kafa
D. mlijeko

Alfabetski redoslijed - mala slova /LOWER CASE/ (a, b, c, d)

list-style-type: upper-alpha

<style>
ol { list-style-type: lower-alpha; }
</style>

>>

ol { list-style-type: lower-alpha; }

Fajl: 20_OL_lower_alpha.css

a voda
b. sok
c. kafa
d. mlijeko

Alfabetski redoslijed - mala slova /LOWER CASE/ (a, b, c, d)

list-style-type: upper-roman

<style>
ol { list-style-type: upper-roman; }
</style>

>>

ol { list-style-type: upper-roman; }

Fajl: 20_OL_upper_roman.css

  I. voda
 II. sok
III. kafa
IV. mlijeko

Redoslijed rimski brojevi mala slova /ROMAN NUMBERS/, LOWERCASE (i, ii, iii, iv)

list-style-type: lower-roman

<style>
ol { list-style-type: lower-roman; }
</style>

>>

ol { list-style-type: lower-roman; }

Fajl: 20_OL_lower_roman.css

   i. voda
 ii. sok
iii. kafa
 iv. mlijeko

Nenumerisana lista /UNORDERED LIST - UL & LI/ >>

Ispunjen krug /DISK - A FILLED CIRCLE/ u nenumerisanoj listi /UNORDERED LIST/.

list-style-type: disc

<style>
ol { list-style-type: disc; }
</style>

>>

ol { list-style-type: disc; }

Fajl: 20_UL_disc.css

• jedan
• dva
• tri

Prazan krug /CIRCLE - AN UNFILLED CIRCLE/ u nenumerisanoj listi /UNORDERED LIST/.

list-style-type: circle

<style>
ol { list-style-type: circle; }
</style>

>>

ol { list-style-type: circle; }

Fajl: 20_UL_circle.css

• jedan
• dva
• tri

Ispunjen krug /DISK - A FILLED CIRCLE/ u nenumerisanoj listi /UNORDERED LIST/.

list-style-type: square

<style>
ol { list-style-type: square; }
</style>

>>

ol { list-style-type: square; }

Fajl: 20_UL_square.css

• jedan
• dva
• tri