Rad sa CSS-om


Početak rada sa CSS-om

U ovome kursu ćete saznati kako je jednostavno dodavati informacije o stilu i oblikovati web stranice pomoću CSS-a. Ali, prije nego što započnemo, morate imate neko znanje iz HTML-a. Ako tek ulazite u svijet web develepmenta, počnite učiti od kursa » HTML5.



Uključivanje CSS-a u HTML dokument

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četnom elementu HTML-a.
  • Ugrađeni stilovi - Upotreba elementa <style> u glavnom dijelu dokumenta <head>.
  • Vanjski stilovi - Korištenje <link> elementa, usmjerava na vanjsku (eksternu) CSS datoteku.

U ovoj ćemo lekciji pokriti ove tri metode za postavljanje 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 elementa. Može se dodati 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 direktno 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 tagova <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 (vanjski) 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 novi fajl. Sada unesite sljedeći CSS kod u ovaj fajl i spremite ga 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>. Pogledajmo primjer:

<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>