CSS sintaksa : CSS Syntax

Selektori : Selectors

Sintaksa CSS-a se razlikuje od sintakse HTML-a. Sastoji se samo od tri dijela:


selektor {
	svojstvo: vrijednost;
}

Selektor je html element kojem želimo dodijeliti vrijednost svojstva. Svojstvo je točno predefinirana oznaka koja govori koje svojstvo mijenjamo a vrijednost je stil koji dodjeljujemo svojstvu.

Svaki selektor može imati više svojstava. Svojstvo i vrijednost su odvojeni dvotočkom i nalaze se unutar vitičastih zagrada. Iza vrijednosti svojstva nalazi se graničnik točka-zarez koji odvaja svojstva.

Višestruke vrijednosti jednog svojstva odvojene su zarezom, a ako vrijednost svojstva ima više od jedne riječi stavljamo je unutar dvostrukih navodnika.

Slijedeći primjer određuje dva svojstva: font veličine 14px i vrijednosti vrste fonta odvojene zarezom. Možemo vidjeti da se naziv fonta "Times New Roman" sastoji od više riječi i zato se nalazi unutar dvostrukih navodnika.


body {
  font-size: 14px;
  font-family: "Times New Roman", Times, serif;
}

Web dizajn i zarada? Naravno!

Nasljeđivanje : Inheritance

Kada umećemo jedan html element unutar drugoga postupak nazivamo ugnježđivanje. Ugniježđeni element može nasljediti svojstva dodijeljena elementu roditelju. Nasljeđivanje se ne će dogoditi ako mi unutar ugniježđenog elementa promijenimo to svojstvo.

U slijedećem primjeru veličinu fonta dodijeljenu elementu <body> bit će naslijeđena u svem tekstu cijelog html dokumenta (web stranice). Izuzetak je tekst ugniježđenog elementa naslova <h1> koji će biti veličine 28px, a sav tekst odlomaka <p> će biti ispisan slovima veličine 16px. Tekst koji se ne nalazi u naslovima <h1> ili odlomcima <p> će naslijediti svojstvo veličine fonta elementa <body>.


body {
	font-size: 14px;
}
h1 {
	font-size: 28px;
}
p {
	font-size: 16px;
}

Postoje svojstva čija se vrijednost ne nasljeđuje u ugniježđenim elementima. Primjer je postavljanje vrijednosti margine u elementu <body>


body {
	margin: 0;
}

Grupiranje selektora

Želimo li istovremeno odrediti svojstva za više elemenata navodimo ih jedan iza drugoga odvojenih zarezom.

Primjer dodjeljivanja svojstva plave boje teksta za elemente <h1> do <h6> istovremeno:


h1, h2, h3, h4, h5, h6 {
	color: blue;
}

Komentari : Comment tags

Komentari služe opisivanju dijelova koda u CSS datoteci. Oni nam služe radi kasnijeg lakšeg prisjećanja i razumijevanja zadaća pojedinih dijelova koda. Web preglednici zanemaruju komentare prilikom prikazivanja web stranice.

Komentar počinje sa znakovima /* a završava s */

Primjer:


/* Ovo je komentar u jednom retku */

Primjer komentara koji se proteže kroz više redaka:

/* Ovo je komentar u CSS-u
koji se proteže kroz dva retka */