Cu HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets - CSS). Acestea ajuta la afisarea grafica si incadrarea continutului in pagina. Pana la acea data, forma, culoarea si marimea textului puteau fi date cu instructiunea "font" si cu atributele sale: "face", "color", "size".
Modelele de stiluri pot fi aplicate aproape oricarei etichete HTML, folosind proprietati si valori specifice codului CSS, unele din ele sunt prezentate in tabelul de jos al paginii. Modelele de stiluri pot fi aplicate in mai multe moduri:
- Pentru adaugarea unui STYLE intern la un element se foloseste atributul style urmat de proprietati si valori, folosind urmatoarea sintaxa:
<element style="proprietate:valoare; proprietate:valoare;"></element>
Exemplu:
In pagina va apare
- In acest caz se adauga in sectiunea HEAD a documentului HTML urmatoarea sintaxa <style type="text/css"> ... </style>. Aceasta spune browser-ului ca sunt adaugate elemente de stil CSS.
- Aceasta metoda este utila cand se doreste folosirea acelorasi stiluri pentru mai multe elemente din pagina astfel sunt scrise o singura data si nu la fiecare element.
- Proprietatile si valorile de sti CSS se introdul in acest element STYLE, dupa cum puteti vedea in exemplul urmator:
- Conform acestui cod, toate textele "h2" din pagina vor avea culoarea albastra si vor fi subliniate.
- Se foloseste (optional) "<!-- ... -->" pentru browserele care nu recunosc elementul "<style>" si astfel il ignora.
- Aici proprietatile si valorile pentru diverse stiluri sunt specificate intr-un fisier extern special, de obicei cu extensia "css" (pe care il putem construi cu un editor de simplu texte gen Notepad).
- Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi coduri de stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise o singura data. In plus ajuta la micsorarea ca marime (in bytes) a documentului HTML care astfel se incarca mai repede.
- In fisierul extern CSS se scriu direct elementele cu proprietatile si valorile dorite, NU se mai adauga eticheta "style". Exemplu de model pentru creare unui fisier ".css" :
Se scrie intr-o pagina noua, deschisa cu NotePad, urmatoarele, si se salveaza fisierul cu extensia ".css"
Pentru a adauga acest stil CSS intr-o pagina web, adaugati in sectiunea HEAD a documentului HTML care va folosi acel fisier cu stiluri, (intre <head> ... </head>) urmatoarea comanda:
- unde la "href" se scrie calea si numele fisierului css folosit.
Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure etichete HTML, iar altul sa poata fi aplicat mai multor etichete HTML de tipuri diferite. Pentru aceasta se foloseste atributul id sau class in interiorul etichetelor HTML la care vrem sa aplicam un anumit stil. Diferenta dintre id si class este faptul ca se poate folosi acelasi atribut "class" pentru mai multe elemente HTML, pe cand acelasi "id" se foloseste numai pentru un singur element HTML.
Exemplu pentru "class"
In pagina va arata asa:
Text ...
Alt text ...
- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom adauga comanda class="cuvant", celelalte elemente nefiind afectate.
Important: selectorul (aici "cuvant") in STYLE trebuie sa inceapa cu punct (.)
Exemplu pentru "id"
In pagina va arata asa:
- In acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul element "h2" care contine 'id="idh"'
Important: Pentru stilurile definite de ID, selectorul (aici "idh") trebuie sa inceapa cu #.
Incercati singuri aceste exemple pentru a vedea rezultatul.In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi modificate cu STYLE:
| Atribut | Descriere | Valori |
| background | imagini sau culori de fundal | URL-ul (imaginii) sau culori date prin nume sau valoare RGB |
| Color | culoarea textului | nume sau valoare RGB |
| font-family | tipul fontului | Numele fontului sau al familiei de fonturi |
| font-size | dimensiunea fontului | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| font-style | text cursiv | normal, italic |
| font-weight | grosimea fontului | extra-light, light, demi-light, medium, demi-bold, bold, extra-bold |
| line-height | distanta dintre liniile de baza ale randurilor | data in puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%) |
| margin-left | distanta fata de marginea din stanga a paginii | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| margin-right | distanta fata de marginea din dreapta a paginii | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| margin-top | distanta fata de textul precedent sau fata de marginea de sus a paginii | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| text-align | alinierea textului | left(stanga), center(centru), right(dreapta), justify |
| text-decoration | evidentierea textului | none(nimic), underline(subliniat), italic(cursiv), line-through(taiat) |
| text-indent | distanta primului rand fata de marginea din stanga | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| border-style | tipul chenarului | none, groove, dotted, dashed, solid, double, ridge, inset, outset |
| border-width | grosimea chenarului | data in puncte(pt), inch(in), centimetri(cm), pixeli(px) |
| border-color | culoarea chenarului | nume sau valoare RGB |
| 72 pt=1 inch = 25,4 mm; un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea superioara a literei N sau h si partea inferioara a literei y sau j |
||
- Pentru aplicarea unui stil css asupra unei portiuni dintr-un text, se foloseste eticheta <span> </span>, ca in exemplu urmator:
- in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta doar portiunea de text inclusa intre tag-ul "<span>".