Dodavanje CSS-a

U prijašnjem postu, napravili smo našu prvu stranicu, no ona izgleda jako jednostavno i nema boja!  U ovom postu ćemo dodati malo boja u našu prvu stranicu i malo ćemo ju urediti. Pa, počnimo! 


Prijašnji kod:

<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<!-- Maknuli smo <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Da bismo dodjelili stil nekom elementu, moramo mu staviti atribut style sa nekom vrijednosti. U ovom primjeru ćemo uediti malo prvo naslov ili h1 tag. Za početak ćemo promijeniti boju, font i veličinu. To ćemo napraviti tako da mu dodamo idući atribut sa vrijednosima style="color: purple; font-size: 30px; font-family: Arial, Helvetica, sans-serif;". Naravno moramo spremiti te promjene. Kratica je držanje tipke Ctrl i pritisak slova s (Ctrl+S). Na kraju naš kod treba izgledati kao kod ispod.

<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Naziv stranice</title>
</head>
<body>
<h1 style="color: purple; font-size: 30px; font-family: Arial, Helvetica, sans-serif;">Hello World!</h1>
</body>
</html>

Ovako bi trebalo izgledati u web pregledniku sa promjenama koje smo spremili.

Kako izgleda promijena nakon spremanja.

Kako CSS radi

Atribut style zapravo označava da h1 tagu ili h1 elementu želimo dodati nekakav CSS stil. On u sebi ima tri CSS properties-a ili svojstva, a to su: color, font-size i font-family. Svaki CSS property ili svako svojstvo u sebi ima nekakvu vrijednost ili value. Tako property color ima value purple. U CSS-u property se piše kao neka vrijednost, ako trebaju biti dvije riječi, onda ih ne razdvajamo nego samo između njih stavljamo -. Kada smo gotovi sa nazivom vrijednosti stavljamo : da kažemo web pregledniku da je to kraj property-a i da sada gleda njegovu vrijednost ili value. U ovom slučaju value je purple i kada smo gotovi sa postavljanjem value-a, na kraju stavljamo ; tako da web preglednik zna da je kraj vrijednosti tog property-a. Nakon toga možemo stavljati dalje nekakva svojstva i njihove vrijednosti ako trebamo. Nema ograničen broj property-a koji možemo staviti, tako da možemo staviti deset ili više ako želimo.

Analiza našeg CSS-a

Nakon što znamo koliko-toliko kako CSS radi, vrijeme je da objasnimo njihova svojstva i vrijednosti. 

Svojstvo ili property color postavlja boju teksta. Vrijednost ili value je purple i postavlja boju teksta u ljubičastu. Sve vrijednosti boja se pišu na engleskom jeziku.

Property font-size postavlja veličinu teksta. Kako su to zapravo dvije riječi, između njih stavljamo - i pišemo ih spojenima. Value smo stavili da bude 30px, što znači veličina slova je 30 pixela na našem ekranu. Veličine se mogu prikazati u drugim mjernim jedinicama, ali to ćemo naučiti kasnije.

Ostaje nam još samo font-family za objasniti. Svrha mu je postaviti nekakav font. Vrijedi isto pravilo kao i za font-size, a to je piše se spojeno sa minusom između riječi. Property ima nekoliko value-a ili vrijednosti. To je zato što provjerava prvo imamo li font Arial instaliran na našem računalu, ako nema pokušati će dohvatiti font Helvetica, ako nema ni taj instaliran na našem računalu, ponovno će pokušati dohvatiti idući font. Ako imamo instaliran Arial font onda će to preglednik vidjeti i neće dalje gledati iduće fontove. Ukratko, web preglednik će prikazati samo font koji imamo instaliran na našem operacijskom sustavu. Ako koristimo Windows sustav, možemo staviti font da bude Segoe, ali taj font nije instaliran na Mac i Linux sustavima. Prema tome željeni font će vidjeti samo oni koji koriste Windows-e. Zato stavljamo neki zamjenski font, da preglednik prikaže neki sličan font primarnom fontu koju želimo koristiti.

Ukratko

  • CSS ima property/svojstvo koje u sebi ima nekakav value/vrijednost
  • Property/svojstvo može imati u sebi više value-a/vrijednosti
  • U CSS-u property/svojstvo i njegov value/vrijednost se ne stavljaju u duple navodnike
  • Ako property/svojstvo u sebi ima dvije riječi, piše se spojeno sa - između
  • Property/svojstvo i value/vrijednost pišu se na engleskom jeziku

 Zadatak

Trebamo smanjiti veličinu slova na 14 pixela i staviti boju da bude plava.

Hint

  1. Gledamo font-size,  veličina slovu izražavamo u jedinici px.
  2. Gledamo color i plava se na engleskom piše blue.

U idućem postu ćemo vidjeti kako možemo lijepše napisati CSS i dodati još koji HTML element.

Primjedbe

Objavi komentar