HTML i CSS : HTML and CSS

Povezivanje s CSS-om : Ways to Apply CSS


  • Interni stilovi
  • Vanjsko povezivanje
  • Stilovi u HTML elementu

Interni stilovi : Internal Styles

Korištenjem internih stilova umećemo css svojstva unutar datoteke na koju primjenjujemo ta svojstva. Svojstva definirana na jednoj web stranici ne mogu se bez ponovnog upisivanja koristiti na nekoj drugoj web stranici istog web sjedišta.

Opis svojstava se nalazi između početne i završne oznake <style> elementa. <style> element mora se nalaziti unutar <head> dijela web stranice.

Primjer dodavanja svojstva color i font-size za element <p> korištenjem internog umetanja stila:

<html>
<head>
  <style>
    p { color: blue; font-size:14px; }
  </style>
</head>
...

CSS i web dizajn? Svakako!

Vanjsko povezivanje : External Style Sheets

Koristeći vanjsko povezivanje css svojstva se nalaze u vanjskoj .css datoteci. Kod ovog povezivanja možemo primijeniti ista css svojstva na više web stranica istog web sjedišta.

Povezivanje s vanjskom datotekom obavlja se korištenjem <link /> elementa kojeg trebamo umetnuti između početne i završne oznake <head> elementa.

Primjer povezivanja html dokumenta s vanjskom css datotekom (u ovom primjeru datoteka u kojoj su opisana css svojstva zove se stil.css):

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

Stilovi u HTML elementima : Inline styles

Stilove možemo umetnuti i unutar pojedinih html elemenata dodavanjem svojstvu style željene vrijednosti. Vrijednost svojstva style html elementa može sadržavati jedno ili više CSS svojstava.

Radi odvajanja sadržaja web stranice od izgleda predlaže se koristiti stilove u html elementima samo kada je to nužno potrebno.

Primjer dodavanja css svojstva color i font-size html elementu odlomka:

<p style="color:blue; font-size:14px;">
Ova slova su plave boje veličine slova 14px.
</p>

Gornji primjer u web pregledniku ima slijedeći izgled:

Ova slova su plave boje veličine slova 14px.