Priručnik CSS - Lekcija 2 - Počinjemo sa korišćenjem CSS-a. CSS svojstva background, color.

26/05/2025, by Ivan

Zdravo svima. Dakle, u prethodnoj lekciji sam napravio dva fajla: html i css. Evo njihovog koda:

index.html:

<html>
 <head>
  <title>Priručnik CSS</title>
  <link type="text/css" rel="stylesheet" media="all" href="style.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>

style.css:

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

U ovoj lekciji nastavljamo sa učenjem CSS-a i dajemo boje i stil našem šablonu. Počinjemo sa svojstvom background koje smo već dodelili body tagu:

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

Vidite da smo dobili sivu pozadinu stranice:

CSS

Prvo da razjasnimo CSS sintaksu u fajlu. Svako css svojstvo počinje selektorom kome se svojstva dodeljuju, na primer selektori body, p, .class, #id. Možete primetiti da selektor može imati tačku ili znak tarabe (#). Tačka se koristi za tagove (jedan ili više) određenih klasa, a taraba za tag sa određenim id-jem. Evo primera:

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

Dodat sam blok sa klasom green i id blue, sada ću napisati css za njih:

body{
  background: #eeeeee; /* pozadina stranice */
  font-size: 14px;     /* veličina fonta */
}
 
.green{
  color: #00ff00; /* boja teksta */
} 
 
#blue{
  color: #0000ff; /* boja teksta */
}

CSS green color

Kao što vidite, bez tačke ili tarabe pišemo css za tag body, isto tako za ostale tagove kao što su p, span, ul, li i slično. Sa tačkom pišemo css za tagove sa određenom klasom, a sa tarabom za tag sa određenim id-jem. Preporučujem da ovo zapamtite za budućnost:

Tačka - za klase

Taraba (#) - za id

Bez tačke i tarabe - za tagove bez klasa i id-jeva

Nakon što napišemo tag, klasu ili id, css pišemo unutar vitičastih zagrada {} :

body{ /* tag */
   
}
 
.green{ /* klasa */
 
} 
 
#blue{ /* id */
 
}

Kao što znate iz mog kratkog kursa HTML, class i id su univerzalni atributi HTML tagova, što znači da se mogu dodati bilo kom tagu. Tako možemo različitim tagovima p, span, li dodeljivati različite css stilove.

Sada u vitičastim zagradama pišemo CSS svojstva. Počinjemo sa jednostavnim color. Color definiše boju teksta, prvo se napiše ime svojstva, pa posle dvotačke vrednost. Za color možemo pisati i numerički i rečima:

.green{
  color: #00ff00; /* boja teksta */
} 
 
#blue{
  color: #0000ff; /* boja teksta */
}
 
/* isto tako */
 
.green{
  color: green; /* boja teksta */
} 
 
#blue{
  color: blue; /* boja teksta */
}

Kada pišemo u numeričkom obliku, to su 6 heksadecimalnih cifara sa početnim znakom tarabe (#), gde prve dve cifre označavaju koliko je crvene u boji, sledeće dve koliko je zelene, a poslednje dve koliko je plave. Ovo je RGB sistem (Red - crvena, Green - zelena, Blue - plava). Heksadecimalni brojevi idu od 0 do 9 i od A do F (posle 9 ide A, ne 10). Photoshop može pomoći u odabiru boje. Izaberite boju u paleti:

colorpicker

Sada kada znate kako odabrati boju za svojstvo color, možete izabrati i boju za background. Hajde da promenimo boju pozadine i učinimo tekst čitljivijim:

body{
  background: #fafafa; /* pozadina stranice */
  color: #333; /* boja celokupnog teksta na stranici */
}
 
.green{
   /* boja teksta */
} 
 
#blue{
   /* boja teksta */
}

Kada pišete više CSS svojstava, koristite tačku-zarez da označite kraj svakog svojstva. Sada je stranica mnogo čitljivija:

HTML CSS

Dodaćemo još malo zelene i plave boje:

index.html:

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

i style.css:

body{
  background: #fafafa; /* pozadina stranice */
  color: #333;
}
 
.green{
  color: #26e921; /* boja teksta */
} 
 
#blue{
  color: #0f15f3; /* boja teksta */
}

HTML CSS

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

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

Priručnik CSS - Lekcija 2 - Počinjemo sa korišćenjem CSS-a. CSS svojstva background, color.