Conceptos de HTML

Las propiedades relacionadas a las fuentes más importantes en CSS son:

font-family Define la fuente que se aplicará al elemento HTML. La fuentes más comunes presentes en los navegadores son: Arial, Arial Black, Courier New, Georgia, Impact, Tahoma, Times New Roman, Verdana
font-size Define el tamaño de la fuente. Entre otras medias podemos indicarla en píxeles.
font-style Podemos indicar alguno de los siguientes valores: normal, italic, oblique
font-weight Entre otros podemos indicar los siguientes valores: normal, bold, bolder,lighter

Para probar algunas de estas propiedades confeccionaremos una página que contenga un título de nivel 2 con fuente Arial, un párrafo con fuente de tipo Times New Roman de 14 píxeles en negrita y una serie de párrafos agrupados en un div con tamaño de fuente de 12 píxeles de tipo Verdana:

<!DOCTYPE html>
<html>
<head>
<title>título página</title>
</head>
<body>
<h2 style="font-family:Arial">Título principal</h2>
<p style="font-family:Times New Roman;font-size:14px;font-weight:bolder">
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
Párrafo en negrita. 
</p>
<div style="font-family:Verdana;font-size:12px">
<p>
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
Primer párrafo. 
</p>
<p>
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
Segundo párrafo.
</p>
</div>
</body>
</html>

Para el título se debe definer una fuente Arial

<h2 style="font-family:Arial">Título principal</h2>

Para el primer párrofo seguido al título se debe definir una fuente de tipo Times New Roman de 14 píxeles en negrita

<p style="font-family:Times New Roman;font-size:14px;font-weight:bolder">

Para el resto de los párrafos agruparlos en un div con tamaño de fuente de 12 píxeles de tipo Verdana

<div style="font-family:Verdana;font-size:12px">

Solo se a visto los conceptos iniciales de CSS con el objetivo de no tentarse a utilizar los elementos HTML antiguos para asignación de fuentes y colores. Para un estudio ordenado y sitemático puede desarrollar el curso CSS Ya y ver por si mismo las ventajas enormes que presentan las hojas de estilo.

Temario del Tutorial->61 - Propiedades relacionadas a las fuentes en CSS

Retornar