Priručnik CSS - Lekcija 1 - Povezivanje CSS stilova

26/05/2025, by Ivan

Neću objašnjavati zašto je CSS potreban. Ako ste otvorili ovaj priručnik, znači da želite da ga naučite. Sa svoje strane mogu reći da su mogućnosti CSS-a vrlo široke i da omogućavaju pravljenje šablona bilo koje složenosti. Korišćenje CSS-a podrazumeva da ćete morati da se odreknete raznih atributa tagova kao što su size, color, bgcolor, align i drugih, koji bi "smetali" CSS-u.

Postoje bar tri načina da povežete CSS sa vašim HTML fajlom. Pogledaćemo najjednostavniji, zatim drugi i pravi način.

CSS unutar taga

CSS se može dodati pomoću atributa style:

<div style="width: 200px; height: 100px;">
  Blok
</div>

Ovako postavljamo blok dimenzija 200x100 piksela. Pogledajmo kako se piše CSS. Prvo pišemo atribut style="". U navodnicima se zatim pišu CSS stilovi.

style="parametar:vrednost;parametar:vrednost;parametar:vrednost"

Pišemo stilove tako što prvo ide parametar (width, height i drugi), zatim dvotačka i vrednost parametra. Svaki parametar se odvaja tačkom-zarezom.

Sada prelazimo na drugi način pisanja CSS-a.

CSS na početku HTML dokumenta

Koristimo tag <style></style> u kojem pišemo CSS kod.

<html>
 <head>
  <title>Priručnik CSS</title>
  <style type="text/css">
  ovde pišemo css kod
  </style>
 </head>
 <body>
  <p>Učite CSS zajedno sa drupalbook.org</p>
 </body>
</html>

Tag style pišemo u <head></head> nakon taga <title>. Napišimo neki CSS kod:

<html>
 <head>
  <title>Priručnik CSS</title>
  <style type="text/css">
   body{
     background: #eeeeee; /* pozadina stranice */     
     font-size: 14px;     /* veličina fonta */
   }
   p{
     color: #ff0000; /* boja teksta */
   }
  </style>
 </head>
 <body>
  <p>Učite CSS zajedno sa drupalbook.org</p>
  <p>Drugi red, učite CSS zajedno sa drupalbook.org</p>
 </body>
</html>

Pogledajmo kako se pišu CSS selektori za tagove. Ako napišemo ime taga u CSS-u, CSS pravila će se primeniti na sve te tagove. Na primer, ako napišemo p, to znači da će pravila važiti za sve paragrafe.

Kada pišemo CSS kod, prvo navodimo tag kome dodeljujemo stilove, zatim u vitičastim zagradama pišemo CSS stilove. CSS stilovi se pišu isto kao u atributu style="":

parametar:vrednost;parametar:vrednost;parametar:vrednost

Parametar, dvotačka, vrednost, tačka-zarez, zatim opet parametar, dvotačka, vrednost, tačka-zarez... Posle poslednjeg stila može, ali ne mora, da stoji tačka-zarez, ali bolje je da je stavite.

Ubacili smo CSS stilove na dva načina, sada prelazimo na treći, najoptimalniji način.

CSS u posebnom fajlu

Ovo je najbolji način koji omogućava potpunu odvojenost CSS-a od HTML koda. Naravno, ponekad se poželi ubaciti CSS direktno u HTML, ali trebalo bi se suzdržati od toga i CSS uvek izdvajati u poseban fajl. Zašto?

Osnovna ideja CSS-a je razdvajanje sadržaja i stila. HTML nam služi za strukturu i označavanje teksta, a CSS za lepo i skladno prikazivanje tog teksta. HTML služi samo za prikaz teksta, dok CSS kontroliše dimenzije, boje, oblike, ivice i margine.

Drugo, kada su HTML i CSS u istom fajlu, kod postaje nepregledan i težak za održavanje. Treće, CSS se kešira u pregledaču, pa ako je CSS u posebnom fajlu, stranica se brže učitava jer se CSS fajl učitava samo jednom. Mislim da je sada jasno šta hoću da kažem.

CSS treba uvek izvoditi u poseban fajl! To je moja preporuka. Sada hajde da napravimo poseban CSS fajl. Za to koristimo tag <link>:

<html>
 <head>
  <title>Priručnik CSS</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>Učite CSS zajedno sa drupalbook.org</p>
  <p>Drugi red, učite CSS zajedno sa drupalbook.org</p>
 </body>
</html>

Tag <link> ima sledeće atribute:

type="text/css" - označava da je u pitanju css,

rel="stylesheet" - označava da je fajl stil,

media="all" - stil važi za sve uređaje koji pregledaju sajt,

href="styles.css" - putanja do css fajla, u našem slučaju relativna.

Verujem da smo sada razjasnili kako povezati css fajl, sada napravite fajl styles.css u istoj fascikli gde je i html fajl.

Otvori te fajl styles.css i ubacite sledeće CSS stilove:

body{
  background: #eeeeee; /* pozadina stranice */
  font-size: 14px;     /* veličina fonta */
}
p{
  color: #ff0000; /* boja teksta */
}

Sačuvajte fajl i otvorite vaš html fajl u pregledaču. Sada je css pravilno povezan putem posebnog fajla. U sledećoj lekciji ćemo detaljnije početi da proučavamo kako pisati stilove u posebnom fajlu.

Dodatni tipovi blokova (EBT) - Novo iskustvo rada sa Layout Builder-om❗

❗Dodatni tipovi pasusa (EPT) – Novo iskustvo rada sa pasusima

Priručnik CSS - Lekcija 1 - Povezivanje CSS stilova

CSS unutar taga

CSS na početku HTML dokumenta

CSS u posebnom fajlu