CSS je jezik slogovnih predlog, s katerim določamo videz in razporeditev elementov v spletnih dokumentih. HTML določa strukturo in pomen vsebine, CSS pa določa, kako naj se ta vsebina prikaže v brskalniku.
S pomočjo CSS lahko določamo barve, pisave, robove, odmike, razmike, ozadja, poravnavo in postavitev elementov. Tako lahko isto vsebino prikažemo na različne načine, ne da bi morali spreminjati osnovno HTML-zgradbo dokumenta.
Pomni: HTML določa strukturo vsebine, CSS pa njen videz. To ločevanje omogoča preglednejšo kodo in lažje vzdrževanje spletnih strani.
Osnovna pravila
CSS temelji na slogovnih pravilih. Vsako pravilo je sestavljeno iz dveh osnovnih delov:
- selektor določa, na katere elemente se pravilo nanaša,
- blok deklaracij vsebuje lastnosti in njihove vrednosti.
p {
color: green;
font-size: 18px;
}V tem primeru selektor p izbere vse odstavke, deklaraciji pa določita zeleno barvo besedila in velikost pisave 18 pik.
Ena CSS-deklaracija je sestavljena iz lastnosti in vrednosti. Med njima stoji dvopičje, posamezne deklaracije pa navadno ločimo s podpičjem.
Primerjava med HTML in CSS
Pri izdelavi spletne strani imata HTML in CSS različni nalogi.
| HTML | CSS |
|---|---|
|
|
Pozor: CSS ni namenjen določanju pomena vsebine. Če želimo pravilno opisati naslov, odstavek ali seznam, moramo uporabiti ustrezne HTML-oznake.
Zakaj uporabljamo zunanjo slogovno datoteko
Pri večstranskem spletišču je zelo koristno, da slogovna pravila shranimo v zunanjo datoteko CSS. Tako lahko isto slogovno datoteko povežemo z več HTML-stranmi in dosežemo enoten videz celotnega spletišča.
<link rel="stylesheet" href="slog.css">Če pozneje spremenimo datoteko slog.css, se sprememba prikaže na vseh straneh, ki so povezane s to datoteko. To močno poenostavi urejanje in vzdrževanje.
Razvoj CSS
V zgodnejšem obdobju razvoja spleta so se za vplivanje na videz pogosto uporabljale predstavitvene HTML-oznake, na primer <font>. Tak način je bil nepregleden in težaven za vzdrževanje. CSS je prinesel jasnejšo ločitev med vsebino in predstavitvijo ter s tem preglednejšo zgradbo spletnih dokumentov.
Priporočila
- Za strukturo dokumenta uporabljaj HTML, za videz pa CSS.
- Pri več straneh uporabi zunanjo slogovno datoteko.
- Slogovna pravila zapisuj pregledno in dosledno.
- Uporabljaj smiselne selektorje in se izogibaj nepotrebnemu ponavljanju slogov.
Pogoste napake
- Mešanje vsebinske strukture in oblikovanja.
- Uporaba predstavitvenih HTML-oznak namesto slogov CSS.
- Nepravilno zapisane deklaracije, na primer manjkajoče dvopičje ali podpičje.
- Preveliko ponavljanje enakih pravil na več mestih.
Če je CSS-pravilo zapisano napačno, ga brskalnik lahko prezre. Zato je pomembno, da so selektor, zaviti oklepaji, lastnosti in vrednosti zapisani natančno.