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?