Aplicando Hojas de Estilos
Existen tres formas de aplicar hojas de estilo: hojas de estilo locales, hojas de estilo internas y hojas de estilo externas.
Hojas de estilo locales
Aplicamos un estilo a una etiqueta en el propio código html. Esto lo conseguimos utilizando el atributo style.
<etiqueta style="atributo: valor; atributo2: valor2" > texto </etiqueta>
Ejemplo:
<p style="color: red; font: 14pt 'Times New Roman', Arial">Párrafo rojo</p>
En el ejemplo anterior la hoja de estilo hace que el párrafo sea de color rojo con tamaño de fuente 14 y letra Times New Roman o Arial si el sistema no tuviese la primera tipografía.
Estas hojas de estilo se pueden utilizar para ver el resultado de aplicar una hoja de estilos a un elemento concreto, muchas veces para hacer pruebas de diseño. Es recomendable sacar estas hojas de estilo a las hojas de estilo internas o externas ya que hacen que muchas veces el código sea redundante.
Hojas de estilo internas
Estas hojas de estilo aplican hojas de estilo a una página web. Esto lo conseguimos utilizando la etiqueta style dentro de la etiqueta head.
<head>< <style> selector { abributo1: valor1, atributo2:valor2 };selector2 { abributo3: valor4, atributo2:valor5 }; </style>
</head>Ejemplo:
<head>
<style>
p { color: red; font-family: 'Arial'; font-size: 15pt;}
</style>
</head>
<body>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
</body>
En el ejemplo anterior vamos a hacer que todos los párrafos de nuestra página web sean de color rojo, con tamaño de letra 15 y fuente Arial.
Las hojas de estilo internas tienen sentido cuando vamos a aplicar una hoja de estilos en una única página.
Hojas de estilo externas
Aplicamos un estilo a una etiqueta en el propio código html. Esto lo conseguimos
Ejemplo:
contenido del html:
<head>
<link rel="stylesheet" type="text/css" src=" estilo.css " />
</head>
<body>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
</body>
Contenido del fichero estilo.css :
p { color: red; font-family: 'Arial'; font-size: 15pt;}
Si queremos aplicarla las hojas de estilo en un proyecto web, donde la mayoría de las páginas tengan un mismo diseño utilizaremos hojas de estilo externas.
Sintaxis
selector { atributo1: valor1, atributo2:valor2; ...};
En el ejemplo anterior:
p { color: red; font-family: 'Arial'; font-size: 15pt;}
Esta hoja de estilos va a tener tres atributos con sus correspondientes valores:
p: el selector es la etiqueta p.
color: es el atributo 1.
red: es el valor del atributo 1. Color rojo.
font-family: el es atributo 2. La familia de la foto.
Arial: el valor del atributo 2. Tipo de fuente Arial.
font-size: Es el tercer atributo e indica el tamaño de la la fuente.
15pt: Es el valor del tercer atributo. El tamaño de la fuente es de 15 puntos.