Ova stranica objašnjava kako promijeniti font i boju teksta na web stranici.
Kaskadne tablice stilova, koje su uvedene s HTML5, prikladan su način za konfiguriranje fontova web stranica.
Prethodna tehnika korištenja svojstva umetnutog stila ili oznake fonta se više ne preporučuje i treba je izbjegavati.
Korištenje CSS-a za jednu aplikaciju
Konfigurirajte svojstva oznake elementa ako želite promijeniti lice fonta i boju za jednu riječ, izraz ili odlomak na web stranici.
Lice i boju fonta možete definirati s fontom-porodicom, bojom i veličinom fonta koristeći svojstvo style, kao što je prikazano u prikazanom primjeru.
<p style="font-family:Roboto; color:Orange; font-size: 20px;">Ovaj tekst ima font Roboto, narandžasti je i 20px.</p>Korištenje CSS-a za jednu ili više stranica
Za jednu stranicu možete koristiti prilagođeni font
Možete koristiti kôd između kartica u odjeljku zaglavlja vaše web stranice za promjenu izgleda vašeg sadržaja u različitim komponentama.
Sljedeći plavi okvir uključuje uzorak koda koji će, kada se izvrši, promijeniti font u Roboto i pocrvenjeti ga.
Klasi smo dali ime “prilagodjeno”, kao što vidite.
<style type="text/css">
.prilagodjeno {
font-family: Roboto;
color: red;
font-size:20px;
}
</style>Ovaj stil se tada može primijeniti na većinu komponenti na vašoj web stranici dajući im klasu “prilagodjeno”.
Dva reda koda i njihovi rezultati prikazani su u sljedećem okviru.
Prilagođeni font za mnoge stranice
Uvoz vanjske CSS datoteke može biti vrlo koristan jer omogućava korisnicima da mijenjaju nekoliko stranica odjednom.
Primjer u sljedećem odjeljku objašnjava kako napraviti osnovnu CSS datoteku koja mijenja font i boju većine komponenti.
Ova datoteka može biti uključena na nekoliko web stranica, ako ne i na cijelu web stranicu.
Koristeći bilo koji osnovni uređivač teksta, spremanje sljedećeg teksta kao .css datoteke pripremit će ga za uvoz.
@charset "utf-8";
.roboto {
font-family: Roboto;
color: #005CB9;
}Nakon što spremite prethodni sadržaj u .css datoteku (nazvaćemo je osnovni.css), možete se povezati s njom sa bilo koje druge web stranice s retkom poput ovog ispod.
<link rel="stylesheet" Type="text/css" href="http://www.example.com/osnovni.css">Korištenje oznake fonta
Unatoč tome što je zastario, HTML <font> oznaka se i dalje može koristiti i potrebna je nekim web uslugama.
Svojstvo lica, koje opisuje font koji se koristi, mora biti uključeno prilikom korištenja oznake FONT.
U donjem uzorku korišteni su font Roboto i heksadecimalni kod boje #005CB9, koji je tamno plave boje.
<font color="#005CB9" face="roboto" size="5">Poseban primjer fonta.</font>