CSS, ili Cascading Style Sheets, kritična je komponenta web razvoja koja programerima omogućuje kontrolu izgleda HTML elemenata na stranici. Jedna od najčešćih upotreba CSS-a je promjena vrste, veličine i boje fonta na web stranici. U ovom eseju istražit ćemo kako koristiti CSS za promjenu vrste, veličine i boje fonta na stranici te dati neke primjere koda.
Promjena vrste fonta
Promjena vrste fonta na web stranici jednostavna je pomoću CSS-a. Da biste to učinili, možete koristiti svojstvo font-family. Ovo svojstvo definira vrstu fonta koju želite koristiti za određeni HTML element. Možete navesti naziv obitelji fonta ili URL datoteke fonta. Evo primjera kako promijeniti vrstu fonta cijelog teksta na stranici u “Arial”:
body {
font-family: Arial, sans-serif;
}
U ovom smo primjeru svojstvo obitelji fontova elementa body postavili na “Arial, sans-serif”. Zamjena “sans-serif” osigurava da će se umjesto njega koristiti sans-serif font ako Arial nije dostupan na korisničkom sustavu.
Promjena veličine fonta
Promjena veličine fonta još je jedna uobičajena uporaba CSS-a. Svojstvo veličine fonta omogućuje vam postavljanje veličine teksta za određeni HTML element. Evo primjera kako promijeniti veličinu fonta cijelog teksta na stranici na 16 piksela:
body {
font-size: 16px;
}
U ovom smo primjeru svojstvo veličine fonta elementa tijela postavili na “16px”.
Promjena boje fonta
Promjena boje fonta također je jednostavan postupak pomoću CSS-a. Svojstvo boje omogućuje vam postavljanje boje teksta za određeni HTML element. Evo primjera kako promijeniti boju fonta cijelog teksta na stranici u crvenu:
body {
color: red;
}
U ovom primjeru postavili smo svojstvo boje elementa tijela na “crveno”.
Kombiniranje promjena fonta
Možete kombinirati promjene fonta pomoću CSS-a kako biste stvorili jedinstveni stil za svoju web stranicu. Evo primjera kako promijeniti vrstu fonta, veličinu i boju cijelog teksta na stranici:
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: red;
}
U ovom smo primjeru kombinirali svojstva obitelji fonta, veličine fonta i boje elementa tijela kako bismo stvorili jedinstveni stil za našu web stranicu.
Korištenje klasa i ID-ova
Osim promjene vrste fonta, veličine i boje cjelokupnog teksta na stranici, te promjene možete primijeniti i na određene HTML elemente pomoću klasa i ID-ova. Klase i ID-ovi omogućuju ciljanje određenih HTML elemenata na stranici i primjenu jedinstvenih stilova na njih.
Ovdje je primjer kako koristiti klasu za promjenu vrste fonta, veličine i boje određenog odlomka:
<p class=”glc-paragraph”>Ovo je paragraf.</p>
.glc-paragraph {
font-family: Arial, sans-serif;
font-size: 16px;
color: red;
}
U ovom smo primjeru dodali klasu “glc-paragraph” elementu odlomka i upotrijebili CSS za promjenu vrste fonta, veličine i boje tog elementa.
Evo primjera kako koristiti ID za promjenu vrste fonta, veličine i boje određenog naslova:
<h1 id=”glc-heading”>Ovo je Naslov.</h1>
#glc-heading {
font-family: Arial, sans-serif;
font-size: 24px;
color: blue;
}
U ovom smo primjeru elementu naslova dodali ID “glc-heading”.