Formas de incluir CSS
Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales intercaladas entre las etiquetas y el contenido para modificar el aspecto de los elementos de una página web.
Esta manera de trabajar es del todo inviable si tenemos que modificar el aspecto de un sitio web mediano y muy tedioso cuando se trata de sitios pequeños. Como el diseño de los sitios web está en constante evolución, es habitual modificar cada cierto tiempo el aspecto de las páginas del sitio, trabajar de este modo suponía un enorme desperdicio de tiempo y esfuerzo.
Las soluciones que propone CSS son infinitamente mejores y, además, no "ensuciamos" el código HTML de la página.
Básicamente hay 3 formas de aplicar estilos css a una página web (sin utilizar JavaScript, claro):
- Incluir estilos "en línea"
<etiqueta style="propiedad1: valor1; ..."> </etiqueta>
- Incluir estilos "en bloque" del documento HTML
<style">
p { color: #444;};
h1 { font-style: italic; }
...
</style> - Incluir estilos "enlazando" un archivo .css que hemos creado para tal propósito
<link rel="stylesheet" href="/misEstilos.css" />
Solución 1 (la peor, debemos evitarla siempre que se pueda)
Incluir css en los elementos HTML.
Consiste en colocar un atributo style dentro del elemento HTML que necesite alguna regla CSS. Ejemplo:
Solución 2 (aceptable pero, poco adecuada)
Incluir css en una zona concreta del documento HTML.
Consiste en colocar dentro de las etiquetas de cabecera de la página head la etiqueta style, y dentro colocar las reglas CSS que se necesiten. Ejemplo:
Solución 3 (la mejor, se aconseja usar siempre este método)
Incluir todo el css en un archivo externo.
Consiste en crear un archivo, con extensión .css, y dentro ir colocando todos los selectores necesarios con las reglas css que creamos oportunas. Después lo enlazamos con el documento HTML utilizano la etiqueta link dentro de la cabecera. Ejemplo:
Y en el archivo estilos.css que está en la carpeta [css] escribimos esto:
Medios CSS
Una de las características más importantes de las hojas de estilos CSS es que permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, móviles, proyectores, etc.
Además, CSS define algunas propiedades específicamente para determinados medios, como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de voz para los medios de audio.