HTML - povezivanje s CSS-om

Povezivanje HTML-a i CSS-a


  1. Interno povezivanje
  2. Vanjsko povezivanje (odvojena datoteka)
  3. Umetanje CSS-a unutar samog HTML elementa

Dodjeljivanja CSS svojstava


  1. Standardna svojstva preglednika
  2. Vanjska CSS svojstva
  3. Interna CSS svojstva
  4. Stil unutar samog HTML elementa

1. Interno povezivanje

<head>
    <style>
      h1 { background-color: yellow; }
      p { color: blue; }
    </style>
  </head>
  <body>
    <h1>Ovaj naslov je žute pozadine</h1>
    <p>Tekst ovog odlomka je plave boje</p>
  </body>

2. Vanjsko povezivanje


Zahtjeva posebnu .css datoteku u koju pohranjujemo CSS svojstva.

<link rel="stylesheet" href="stil.css" />

h1 {
  background-color: yellow;
}
p {
  color: blue; 
}

Primjer vanjskog povezivanja


<html>
  <head>
  <link rel="stylesheet" href="stil.css" />
  </head>
  <body>
    <h1>Ovaj naslov je žute boje</h1>
    <p>Tekst ovog odlomka je plave boje</p>
  </body>
</html>

3. Unutar HTML elementa


Za korištenje CSS svojstava unutar samog HTML elementa moramo koristiti svojstvo style.

Dodavanjem vrijednosti svojstvu style možemo definirati bilo koja CSS svojstva.

<p style="color:blue; font-size: 16px;"> Odlomak teksta plave boje veličine 16px </p>

Razlika u povezivanju


Vanjsko povezivanje:
jednostavnije i omogućava brže održavanje stranice.
promjene na cijelom web sjedištu možemo napraviti unutar samo jedne .css datoteke


Umetanjem svojstava CSS-a unutar samog HTML elementa:
gube se prednosti "neovisnosti" CSS-a od sadržaja web stranice



Hvala na pozornosti!


Pitanja?