CSS(Cascading Style Sheets) temeljna je komponenta web razvoja koja igra ključnu ulogu u kontroli vizualnog izgleda HTML elemenata na vašoj web stranici. Pruža moćan skup pravila i svojstava koja definiraju kako se elementi prikazuju, formatiraju i pozicioniraju, što vam omogućuje da prilagodite izgled i dojam svojih web stranica.
Počnimo s razumijevanjem koncepta selektora
Birači se koriste za ciljanje određenih HTML elemenata za stiliziranje. Jedan od najosnovnijih selektora je selektor elementa, koji odabire sve instance određenog HTML elementa.
Na primjer, sljedeće CSS pravilo cilja sve odlomke u dokumentu:
p {
color: blue;
}
U ovom primjeru p selektor odabire sve <p> elemente i postavlja njihovu boju teksta na plavu.
Drugi uobičajeni selektor je selektor klase
Klase se koriste za grupiranje elemenata sličnih karakteristika. Dodjeljivanjem klase HTML elementima, možete ih ciljati i stilizirati zajedno.
Evo primjera:
.blue-text {
color: blue;
}
U ovom slučaju, .blue-text birač cilja sve elemente s klasom blue-text i primjenjuje plavu boju na njihov tekst.
Osim toga, ID selektor vam omogućuje da ciljate određeni element prema njegovom jedinstvenom identifikatoru. ID obično se dodjeljuju pojedinačnim elementima na stranici.
Evo primjera:
#header {
background-color: gray;
}
U ovom primjeru #header selektor odabire element s ID header i na njega primjenjuje sivu boju pozadine.
Prelazeći na sintaksu CSS-a, svako CSS pravilo sastoji se od selektora i bloka deklaracije
Deklaracijski blok je u vitičastim zagradama {} i sadrži jednu ili više deklaracija. Deklaracije se sastoje od svojstva i njegove odgovarajuće vrijednosti.
Evo primjera:
h1 {
font-size: 24px;
color: #333;
}
U ovom isječku koda h1 selektor odabire sve <h1> elemente i postavlja njihovu veličinu fonta na 24 piksela, a boju teksta na tamno sivu(#333).
Kroz ovu seriju istražit ćemo i objasniti različita CSS svojstva, selektore i njihove kombinacije, omogućujući vam stvaranje vizualno privlačnih i dobro strukturiranih web stranica. Razumijevanje CSS-a i njegove osnovne sintakse dat će vam temelj za preuzimanje kontrole nad stilskim aspektima vaših web stranica, osiguravajući jedinstveno i personalizirano korisničko iskustvo. Zaronimo i otkrijmo neograničene mogućnosti CSS-a!