Când am început site-ul nostru de testare, am început să folosim etichete HTML oriunde am putut pentru a oferi structură conținutului nostru cu etichete de titlu. Am făcut acest lucru înțelegând că mai târziu vom redefini acele etichete, astfel încât titlurile noastre să arate așa cum ne-am dorit. A venit momentul. Pentru a începe cu câteva elemente de bază, putem folosi ceea ce am învățat deja schimbând culoarea textului și a fundalului pentru etichetele noastre de titlu:

<style>
h1{
color:red;
background-color:yellow;
}
</style>
<h1>This is an H1 heading</h1>

<style>
h1{
color:red;
background-color:yellow;
font-variant:small-caps;
}
</style>
<h1>This is an H1 heading</h1>

This is an H1 heading

De asemenea, putem ajusta familia și dimensiunea fonturilor. Veți observa că niciuna dintre aceste modificări nu afectează nimic în afara titlurilor noastre. Deși este posibil să vedeți exemple care folosesc termenii cheie pentru dimensiune, de la „foarte foarte mic” (xx-small) la „foarte foarte mare” (xx-large), este o idee bună să fiți întotdeauna cât mai specific posibil, deoarece termenii cheie pot fi tratați diferit între browsere. În schimb, exemplele noastre vor folosi dimensiuni de fonturi fixe și bazate pe procente. Pentru a face acest lucru, vom face conținutul nostru h1 în cursive și vom reduce dimensiunea la 18 pixeli înălțime:

<style>
h1{
color:red;
background-color:yellow;
font-style:italic;
font-size:20px;
}
</style>
<h1>This is an H1 heading</h1>

This is an H1 heading

Acestea sunt doar câteva exemple ale puterii complete a fontului prin CSS. Unele metode „mai speciale” includ efecte precum scrierea cu majuscule, în timp ce micșorează textul dvs. (majuscule mici):

<style>
h1{
color:red;
background-color:yellow;
font-variant:small-caps;
}
</style>
<h1>This is an H1 heading</h1>

THIS IS AN H1 HEADING

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu