CSS osnove: Vodič za početnike

CSS radi zajedno sa HTML-om kako bi kreirao vizuelno privlačne i korisnički prijatne sajtove. On kontroliše raspored, tipografiju i responzivnost.

Razumevanje selektora, atributa i sistema rasporeda kao što su Flexbox i Grid je ključno za svakog web developera.

Ovaj članak pruža jasan uvod sa primerima za početnike.

CSS selektori

Selektori su obrasci koji ciljaju HTML elemente. Primeri su selektori elemenata (p), klase (.class) i ID selektori (#id).

p { color: blue; }
.highlight { background: yellow; }
#main { width: 80%; }

CSS podržava više tipova selektora: grupisanje (h1, h2), potomci (div p) i deca (div > p).

h1, h2 { font-family: Arial; }
div p { color: red; }
div > p { color: green; }

CSS se može primeniti inline, u <style> tagu ili preko eksternog fajla.

<p style="color:red;">Inline</p>
<style>p { color: blue; }</style>
<link rel="stylesheet" href="style.css">

CSS kontroliše izgled teksta: font, veličinu, debljinu, boju, poravnanje i razmak.

p {
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: justify;
  line-height: 1.5;
}

CSS podržava jedinice poput px, %, em, rem, vh i vw za definisanje dimenzija.

div {
  width: 50%;
  height: 200px;
  padding: 2em;
}

Flexbox je jednodimenzionalni sistem rasporeda za postavljanje elemenata u redove ili kolone.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item { flex: 1; }

Grid je dvodimenzionalni sistem rasporeda za kreiranje složenih struktura stranice sa redovima i kolonama.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
.grid-item {
  background: lightblue;
  padding: 20px;
}