Što je vanjski stil?

Vanjska tablica stilova definira kako web stranica izgleda. Tablicom stilova možete odrediti stvari poput veličine, boje i fonta teksta, boje gumba ili položaja izbornika i bočnih traka.

Kôd koji se koristi u vanjskoj tabeli stilova

Postoje dvije vrste koda koje se koriste za stvaranje osnovne web stranice:

• Jezik označavanja hiperteksta (HTML): Definira sadržaj web stranice. Sadrži stvarni tekst s oznakom koja identificira jesu li dijelovi teksta odlomci, naslovi ili popisi. Sadrži i veze do slika koje se pojavljuju na stranici te hiperveze do vanjskih stranica.
• Kaskadni listovi stilova (CSS): Jezik kodiranja koji se koristi za određivanje načina prikazivanja sadržaja. Definira kako se prikazuje svaka vrsta tekstualnog elementa i može različito prikazati istu vrstu elementa ako pripadaju različitim klasama ili imaju drugačiji id. To omogućuje da se stvari poput izbornika i popisa ponašaju vrlo različito u glavnom tekstu web stranice.

Općenito je odvajanje stila od sadržaja dobra ideja jer vam omogućuje da se usredotočite na jednu po jednu stvar. To postaje još važnije u timu, omogućavajući stručnjacima za sadržaj i prezentaciju da rade neovisno od ostalih. Što je možda još važnije, omogućuje i jedinstveni set stilskih uputa koji se jednoliko primjenjuje na cijelom web mjestu.

Vizualna prezentacija web stranice tada se može promijeniti iz jednog lista stilova bez uređivanja svake web stranice pojedinačno. Za veće složene web stranice mogu se koristiti brojni listovi stilova za kontrolu teksta, izbornika i podjela unutar stranica. Ova kolekcija stilskih listova može se nazvati "temom".

Korištenje vanjskog CSS-a za povezivanje HTML-a s CSS-om

Moguće je CSS stil uključiti izravno u HTML web stranice, koristeći CSS za zasebno oblikovanje svakog odlomka i naslova na drugačiji način. Ova vrsta inline styling općenito nije dobra ideja jer gubite sve prednosti razdvajanja stila od sadržaja. Ono što je najvažnije, gubite mogućnost dosljednog ažuriranja cijelog web mjesta iz jedne datoteke.

Ispravan način primjene stila na web mjestu je stvaranje jedne vanjske datoteke s tablicama stilova za svaku vrstu stila koji želite primijeniti, a zatim navedite te datoteke iz svake HTML datoteke. Na primjer, možda imate sljedeće vanjske tablice stilova:

• tekst.css
• meniji.css
• raspored.css

Možete izvršiti promjene u CSS kodu unutar tih vanjskih tablica stilova bez mijenjanja njihovih imena datoteka, što znači da reference na te datoteke, unutar HTML-a svih vaših web stranica, neće biti promijenio.

Primjeri HTML-a i CSS-a

Vrlo jednostavna HTML stranica može sadržavati sljedeći kôd:

 Sve o meni!

Ova stranica govori o meni i zašto sam super.

Na ovu stranicu može se povezati jednostavan vanjski stil, dodavanjem sljedećeg koda ispod.

type = "tekst / css"
href = "myStyle.css" />

Izradite drugu tekstualnu datoteku nazvanu myStyle.css, koja se nalazi u istoj mapi kao i index.html koja sadrži sljedeći kôd:

h1 {
boja: # FF7643;
font-face: Arial '
}
p {
boja: crvena;
veličina slova: 1,5em;
}