HTML - Stil (Styles)

Stilizovanje HTML elemenata

HTML je prilično ograničen kada je u pitanju prezentacija web stranice. Prvobitno je zamišljen kao jednostavan način predstavljanja informacija. CSS (Cascading Style Sheets) predstavljen je u decembru 1996. godine od strane World Wide Web Consortium (W3C) kako bi pružio bolji način za stilizovanje HTML elemenata. Sa CSS-om postaje vrlo lako odrediti stvari poput, veličine i slova za fontove, boje teksta i pozadine, poravnanja teksta i slika, količine prostora između elemenata, izgleda elemente i puno ostalih elemenata.


Dodavanje stilova u HTML elemente

Informacije o stilu mogu se prikazati kao zaseban dokument ili biti ugrađene u sam HTML dokument. Ovo su tri načina implementacije stilova u HTML dokument.

  • Inline stilovi - Upotreba atributa stila u početnom HTML taga.
  • Ugrađeni stil - Korištenje <style> taga u glavnom dijela dokumenta <head>.
  • Eksterni stila - Korištenje <link> taga, usmjeravate na eksterni CSS fajl.

Inline stilovi

Inline stilovi koriste se za primjenu jedinstvenih pravila stila na element stavljanjem CSS pravila direktno u početni tag. Može se priključiti na element pomoću atributa style. Atribut style uključuje niz CSS parova, svojstava i vrijednosti. Svako property: value odvojeno je tačka-zarezom (;), baš kao što biste napisali u ugrađenom ili eksternom stilu, ali to treba biti sve u jednom redu, tj. nema prekida linija nakon tačka-zareza. Sljedeći primjer pokazuje kako postaviti boju i veličinu teksta: 

<h1 style="color:red; font-size:30px;">Ovo je naslov</h1>
<p style="color:green; font-size:18px;">Ovo je paragraf.</p>
<div style="color:green; font-size:18px;">Ovo je tekst.</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Korištenje Inline Styles u HTML</title>
</head>
<body>
    <h1 style="color:red; font-size:30px;">Ovo je naslov</h1>
    <p style="color:green; font-size:18px;">Ovo je paragraf.</p>
    <div style="color:green; font-size:18px;">Ovo je tekst.</div>
</body>
</html>

Korištenje inline stilova uglavnom se smatra lošom praksom. Budući da su pravila stila ugrađena direktno u html tag. To uzrokuje da se prezentacija miješa sa sadržajem dokumenta, što ažuriranje ili održavanje web stranice veoma otežava.


Ugrađeni stilovi

Ugrađeni ili interni stilovi utiču samo na dokument u koji su ugrađeni. Ugrađeni stilovi definisani su u dijelu taga <head> HTML dokumenta pomoću oznake <style>. Možete definisatu bilo koji broj <style> elemenata unutar taga <head>. 

<head>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: blue; }
        p { color: red; }
    </style>
</head>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Korištenje ugrađenog stila u HTML</title>
    <style type="text/css">
        body { background-color: YellowGreen; }
        h1 { color: blue; }
        p { color: red; }
    </style>
</head>
<body>
  <h1>Ovo je naslov</h1>
  <p>Ovo je paragraf.</p>
</body>
</html>

Eksterni (vanjski) stil

Eksterni stil idealan je kada se stil primijuje na više stranica. Eksterni stil sadrži sva pravila stila u zasebnom dokumentu koji možete povezati s bilo kojim HTML dokumentom na vašoj web stranici. Eksterni stilovi tabele su najfleksibilnije, jer pomoću eksternog stila možete promijeniti izgled čitave web stranice ažuriranjem samo jedne datoteke (fajla). Eksterne stilske tabele možete priložiti na dva načina - povezivanjem i uvozom:


Povezivanje eksternih (vanjskih) stilova

Eksterni stil može se povezati s HTML dokumentom pomoću oznake <link>. Oznaka <link> ide unutar taga <head>, kao što je prikazano u sljedećem primjeru: 

<head>
    <link rel="stylesheet" href="css/style.css">
</head>

Uvoz eksternih (vanjskih) stilova

Pravilo @import još je jedan način učitavanja eksternih stilova. Izjava @import upućuje pretraživač da učita eksterni stil i koristi njegove stilove. Možete ga koristiti na dva načina. Najjednostavniji način je upotreba unutar elementa <style> u dijelu taga <head>. Imajte na umu da su ostala CSS pravila možda još uvijek uključena u element <style>. 

<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

Slično tome, možete koristiti @import pravilo da uvezete stil unutar druge liste stilova. 

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}