Umetanje css stilova u html : Online tečaj (css) : Bartol plus

Lekcija 1: Uvod u css, selektori i boje

Uvod u css [css] Umetanje css stilova u html kôd [css] Osnovni css selektori [css] Kombinirani css selektori [css] Css boja teksta i pozadine [css] Vježba 1.1: Osnovni css selektori Vježba 1.2: Kombinirani css selektori Vježba 1.3: Css promjena boje teksta i pozadine

Za umetanje css stilova možemo koristiti:

Linijski css (engl. inline) - dodavanjem css stilova u pojedini html element.

Unutarnji css (engl. internal) - dodavanjem stilskih pravila unutar <style> elementa u <head> elementu.

Vanjski css (engl. external) - pomoću odvojene .css datoteke.

čisto kôdiranje

Čisto kôdiranje u web dizajnu, pretpostavlja odvajanje sadržaja (u html dokumentu), izgleda (unutar odvojene .css datoteke) i ponašanja (unutar odvojene .js datoteke).

1. Linijski css (engl. inline)

Ovaj način primjenjuje css oblikovanja samo na odabrani html element. Koristeći ga, svakom html elementu dodajemo njegove css stilove, bez korištenja selektora.

Ovaj način povezivanja se ne preporučuje, jer svakom html elementu trebate stilove dodavati pojedinačno. Održavanje web sjedišta u kojem koristimo samo linijski css je prilično zahtjevno i nezahvalno.

Ovaj način treba izbjegavati (osim za svrhu učenja i izobrazbe).

U slijedećem primjeru mijenjamo izgled pojedinih html elemenata pomoću linijskog css-a. Koristimo slijedeća css svojstva: background-color, font-family, font-weight, color i font-size.

Linijski css

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Linijski css</title>
</head>
<body style="background-color: lavender; font-family: 'Segoe UI', Tahoma, Verdana;">
  <h1 style="font-weight:100; color: purple;">Pokušajmo zajedno:</h1>
  <p style="font-size: 14px; font-weight:900;">Podebljan tekst odlomka.</p>
</body>
</html>

Prednosti korištenja linijskog css-a:

Jednostavno i brzo umetanje css stilova u pojedine html elemente na web stranici.

Koristimo ga za testiranje ili pretpregled promjena i brzo ispravljanje uočenih nedostataka.

Nedostatci korištenja linijskog CSS-a:

Dodavanje css stilova pojedinim html elementima je vremenski zahtjevno.

Održavanje izgleda web sjedišta s više web stranica je nezahvalno.

2. Unutarnji css

Za uporabu unutarnjeg css-a potrebno je dodati <style> element unutar <head> dijela svake stranice web sjedišta. Ovaj način je učinkovit za oblikovanje samo jedne web stranice.

Korištenje unutarnjeg css-a unutar višestraničnog web sjedišta se ne preporučuje jer je potrebno oblikovati css stilska pravila unutar svake web stranice.

Unutarnji css u primjerima

Radi jednostavnosti preuzimanja gotovih primjera, u člancima i vježbama koristimo unutarnji css. Na taj način je izbjegnuta mogućnost grješke pri povezivanju html kôda s vanjskom .css datotekom. Ovo je važno za početnike. Kako budete napredovali, prebacit ćete se na uporabu vanjske .css datoteke.

U slijedećem primjeru oblikujemo web stranicu pomoću unutarnjeg css-a, s istim oblikovanjima kao u prethodnom primjeru.

Unutarnji css

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Unutarnji css</title>
  <style type="text/css" >
body {
  background-color: lavender;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
  color: purple; 
  font-weight: 100;
  text-align: center;
}
p {
  font-size: 14px;
  font-weight: 900;
}
  </style>
</head>
<body>
  <h1>Pokušajmo zajedno:</h1>
  <p>Podebljan tekst odlomka.</p>
</body>
</html>

Prednosti korištenja unutarnjeg css-a:

Možemo koristiti sve vrste osnovnih i kombiniranih selektora.

Budući su css stilska pravila unutar web stranice, nema potrebe za učitavanjem više datoteka.

Nedostatci korištenja unutarnjeg css-a:

Kod web sjedišta s više web stranica nezahvalno je održavanje.

Potrebno je mijenjati ista stilska pravila na svakoj pojedinoj web stranici.

3. Vanjska css datoteka

U ovom načinu koristimo vanjsku .css datoteku za pohranu css stilskih pravila na web sjedištu. Vanjsku .css datoteku povezujemo s html datotekom pomoću <link> elementa. <link> element umećemo unutar <head> dijela web stranice.

Primjer html kôda za povezivanje s css datotekom stil.css. Ona se treba nalaziti u istoj mapi kao i .html datoteka):

<link href="stil.css" rel="stylesheet" />

Korištenje vanjske .css datoteke omogućava brže oblikovanje i održavanje web sjedišta. Promjenom samo jedne .css datoteke možemo promijeniti izgled cijelog web sjedišta.

Sljedeći primjer je web stranica koja koristi oblikovanje unutar vanjske .css datoteke.

Ispod poveznice na html dokument nalazi se poveznica na vanjsku .css datoteku. Potrebno je obje datoteke preuzeti i spremiti unutar iste mape kako bi primjer radio.

Vanjska datoteka [html dokument]

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Unutarnji css</title>
  <link href="stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>Pokušajmo zajedno:</h1>
  <p>Podebljan tekst odlomka.</p>
</body>
</html>

I datoteku stil.css je potrebno preuzeti na vaše računalo:

Stil [stil.css]

body {
  background-color: lavender;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
  
h1 {
  color: purple;
  font-weight:100;
  text-align: center;
}

p {
  font-size: 14px;
  font-weight: 900;
}

Prednosti korištenja vanjske .css datoteke:

Održavanje izgleda web sjedišta je jednostavnije, jer nema potrebe za dodavanje/promjenu istih oblikovanja unutar više html datoteka.

Budući da je dizajn web sjedišta jedinstven, možemo koristiti istu .css datoteku za više web stranica.

Nedostatci korištenja vanjske .css datoteke:

Izgled web stranice ne će biti ispravno prikazan, dok se vanjska .css datoteka ne učita.

Možda će vas zanimati?

Prethodi Uvod u css Slijedi Osnovni css selektori

Vježba 1.1: Osnovni css selektori

Umetanje CSS stilova u html kôd

Css stilove možemo umetnuti uporabom linijskog (engl. inline) ili unutarnjeg (engl. internal) oblikovanja, a možemo korisiti i vanjsku .css datoteku (engl. external).