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:
<h4 style="color:#ff1111;">Exemplu h4</h4>
Exemplu h4
<html>
<head>
<title>titlu</title>
<style type="text/css">
<!--
h2 {color:blue; text-decoration:underline;}
-->
</style>
</head>
<body>
</body>
</html>
a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}
a:visited {
color:#008080;
text-decoration:none;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
a:active {
color:#b54090;
text-decoration:underline;
}
a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
p {
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}
<html>- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom adauga comanda class="cuvant", celelalte elemente nefiind afectate.
<head>
<title>Titlul</title>
<style type="text/css">
<!--
.cuvant {
color:#1111fe;
dext-decoration:underline;
}
-->
</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>
<html>- In acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul element "h2" care contine 'id="idh"'
<head>
<title>Titlul</title>
<style type="text/css">
<!--
#idh {
color:#fe1111;
dext-decoration:overline;
text-align:center;
}
-->
</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<h2>Alt text ... </h2>
</body>
</html>
| 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 |
||
O fraza <span class="cls"> cu orice text</span> si caractere.- in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta doar portiunea de text inclusa intre tag-ul "<span>".
