Sve što je potrebno za isprobavanje navedenih primjera je preuzeti (engl. download) kôd s web stranice i otvoriti ga u web pregledniku. Brzo i učinkovito učite na primjerima!
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
CSS ili engleski Cascade Style Sheets služi vizualnom oblikovanje web stranice. Umijeće izrade – dizajniranja web stranice - znači umijeće vizualnog oblikovanja. Svaki html element bilo tekstni, bilo slikovni, bilo strukturni može se vizualno oblikovati pomoću css stila.
Za umetanje css stilova u ovom tečaju koristit ćemo interni css stil koji umećemo unutar html dokumenta. Sve što je potrebno za isprobavanje navedenih primjera je preuzimanje html i css kôda. Nakon toga možete html dokument otvoriti u web pregledniku.
Drugim riječima ne ćemo se pridržavati - zbog opravdanih razloga jednostavnosti – pravila odvajanja sadržaja stranice (html) od njegovog izgleda (css). Kao što je već rečeno ovo nije dobar način kodiranja ali je za početnike dobar. Kada svladate osnove kodiranja u html-u i css-u moći ćete prijeći na odvajanje html dokumenta od css stilova.
Za pravilno kôdiranje css oblikovanja preporučuje se korištenje vanjske .css datoteke. Prednost vanjske .css datoteke je njegova jedinstvenost za sve stranice web sjedišta. Povezivanje s .css datotekom potrebno je obaviti unutar <head> elementa unutar html dokumenta.
Css datoteka ima nastavak .css. Css datoteka se mora nalaziti u istoj mapi, ili podmapi gdje je html datoteka pohranjena (ako ne navodimo cijelu putanju css datoteke).
Unutar <head> elemenata koristimo element <link> kako bismo povezali html dokument i css datoteku. Za povezivanje s css datotekom koristimo href svojstvo čijoj vrijednosti dodjeljujemo relativnu ili apsolutnu putanju do css datoteke i njezin naziv. Potrebno je još svojstvu rel dodijeliti vrijednost stylesheet.
Slijedeći primjer povezuje oblikovanja iz css datoteke moderno.css s .html datotekom u kojoj smo učitali istu:
<head>
<link rel="stylesheet" href="moderno.css" />
</head>Kako bi povezivanje s css datotekom bilo uspješno potrebno je relativnu putanju css datoteke uskladiti s mjestom gdje se nalazi html dokument. Ako se css datoteka nalazi u podmapi stil moramo svojstvu href dodati naziv podmape npr. "href=stil/moderno.css".