HTML - povezivanje s CSS-om

Povezivanje HTML-a i CSS-a

    

  1. Interno povezivanje
    2. 

  2. Vanjsko povezivanje (odvojena datoteka)
    3. 

  3. Umetanje CSS-a unutar samog HTML elementa
    4.

Dodjeljivanja CSS svojstava

    

  1. Standardna svojstva preglednika
    2. 

  2. Vanjska CSS svojstva
    3. 

  3. Interna CSS svojstva
    4. 

  4. Stil unutar samog HTML elementa
    5.

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?

← →