Rad sa CSS-om


Početak rada sa CSS-om

U ovome ćete kursu saznati kako je jednostavno dodavati informacije o stilu i oblikovanju na web stranice pomoću CSS-a. Ali, prije nego što započnemo, uverite se da imate neko radno znanje HTML-a. Ako tek počinjete u svijetu web razvoja, počnite učiti odavde » Kurs HTML5. Bez dodatnog divljanja, započnimo s kaskadnim tabelama stilova (CSS).



Uključivanje CSS u HTML dokumente

CSS se može kreirat kao poseban dokument ili biti ugrađen u sam HTML dokument. Postoje tri načina uključivanja CSS-a u HTML dokument:

  • Inline stilovi - Upotreba atributa stila u početnoj oznaci HTML-a.
  • Ugrađeni stilovi - Upotreba elementa <style> u glavi dio dokumenta <head>.
  • Vanjski stilovi - Korištenje <link> elementa, usmjerava na vanjsku CSS datoteku.

U ovoj ćemo lekciji pokriti ove tri metode za umetanje CSS-a jedan po jedan.



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. Svaki par "svojstvo: vrijednost" ("property: value") odvojen je tačka-zarezom (;), baš kao što biste napisali u ugrađenim ili vanjskim stilovima. Ali treba biti sve u jednom redu, tj. nema prekida linije nakon zarezom, kao što je prikazano u sljedećem primjeru:

<h1 style="color:red; font-size:30px;">Ovo je naslov</h1>
<p style="color:green; font-size:22px;">Ovo je paragraf.</p>
<div style="color:blue; font-size:14px;">Ovo je neki sadržaj.</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title>Primjer CSS Inline stila</title>
</head>
<body>
  <h1 style="color:red; font-size:30px;">Ovo je naslov</h1>
        <p style="color:green; font-size:22px;">Ovo je paragraf.</p>
        <div style="color:blue; font-size:14px;">Ovo je neki sadržaj.</div></div>
</body>
</html>                            

Korištenje inline stilova uglavnom se smatra lošom praksom. Kako su pravila stila ugrađena izravno u HTML tag, to uzrokuje da se prezentacija miješa sa sadržajem dokumenta, zbog čega je kod teško održavati i negira svrhu korištenja CSS-a.



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 taga <style>. Možete definisati bilo koji broj <style> elemenata u HTML dokumentu, ali oni se moraju pojaviti između taga <head> i </head>. Pogledajmo primjer:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Moj HTML dokument</title>
    <style>
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>Ovo je naslov.</h1>
    <p>Ovo je neki tekst (paragraf).</p>
</body>
</html>


Eksterni stilovi

Eksteri stil idealan je kada se stil primijenjuje na mnogim web stranice. Eksterni stil sadrži sva pravila stila u zasebnom dokumentu koji možete povezati iz bilo kog HTML dokumenta na vašem web sajtu. Eksterni stilovi tabela su najfleksibilniji, jer pomoću eksternog stila možete promijeniti izgled čitave web stranice promjenom samo jednog fajla. Eksterne stilove možete priložiti na dva načina - povezivanjem i uvozom.



Povezivanje eksternih stilova

Prije povezivanja prvo moramo stvoriti neki stil. Otvorite vaš omiljeni uređivač koda i stvorimo novu datoteku. Sada unesite sljedeći CSS kod u ovu datoteku i spremite je kao "style.css".

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h1 {
    color: orange;
}

Vanjski stil može se povezati s HTML dokumentom pomoću taga <link>. Tag <link> ide unutar dijela taga <head>, kao što možete vidjeti u sljedećem primjeru:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Moj HTML dokument</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Ovo je naslov</h1>
    <p>Ovo je neki tekst (paragraf).</p>
</body>
</html>


Uvezeni stilovi

Pravilo @import je još jedan način učitavanja stilova. Izjava @import upućuje pretraživaču da učita vanjski stil i koristi njegove stilove. Možete ga koristiti na dva načina. Najjednostavnije je unutar zaglavlja vašeg dokumenta. Imajte na umu da su ostala CSS pravila možda još uvijek uključena u element <style>. Evo primjera:

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title>Primjer uvoza CSS</title>
    <style>
        @import url("/examples/css/style.css");
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim CSS3 i HTML5 uz IT TUTORIJALE!</p>
</body>
</html>                            

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;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Primjer CSS @import pravila</title>
    <style>
        @import url("/examples/css/layout.css");
        @import url("/examples/css/color.css");
        body {
            color:blue;
            font-size:14px;
        }
    </style>
</head>
<body>
    <div>
    <h1>IT TUTORIJALI</h1>
      <p>Stil izgleda ovog HTML elementa definisan je u 'layout.css', a boje u 'color.css'.</p>
    </div>
</body>
</html>