En el apartado de "Anatomía de un Estilo CSS" dijimos que las reglas CSS las podemos definir en un fichero, al cual llamaremos fichero CSS. No obstante, esta no es la única forma de definir nuestros estilos e incluirlos en el documento HTML. Aquí vamos a revisar tres técnicas para incorporar estilos CSS en un documento HTML:
En Línea
Esta técnica asigna los estilos dentro de las etiquetas por medio del atributo style.
Ejemplo:
<p style=”font-size: 20px”>Mi texto</p>
Aplicar esta técnica tiene ciertas consideraciones:
- Es usual utilizar esta técnica cuando se quiere probar rápidamente los estilos.
- Inconveniente: difícil aplicar estilos a todo un documento. Pensemos en un momento... ¿Qué pasaría si teniendo definido todos los <p> del documento con un font-size de 40px, queremos cambiar a 20px? Con probabilidad, nos tocaría cambiar el estilo en cada <p> del documento, uno por uno.
Interna
A diferencia de la técnica "en-línea", la técnica de estilos embebidos consiste en insertar los estilos en la cabecera del documento, esto es, dentro de la etiqueta <head> del documento HTML abrimos y cerramos la etiqueta <style> y dentro de ella escribimos nuestras reglas de estilo.
Ejemplo (Los estilos están aplicados en la línea 5 a 7).
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<style>
p { font-size: 20px }
</style>
</head>
<body>
<p> Este es un parrafo</p>
</body>
</html>Aplicar esta técnica tiene ciertas consideraciones:
- Esta técnica ahorra espacio ya que se puede aplicar un estilo a diferentes elementos HTML. No como la técnica "en línea" donde tienes que definir un mismo estilo en cada elemento HTML que quieres afectar.
- Vuelve al código más consistente y actualizable en comparación con la técnica "en línea".
- Lo malo es que si tenemos un sitio con varias páginas....nos toca copiar manualmente los estilos en todas las hojas del sitio.
Externa
La idea de esta técnica es mover todos los estilos a un fichero externo (fichero CSS) y luego utilizar el elemento <link> rel="stylesheet" href="mis_estilos.css"> en la cabecera del documento HTML para decir al navegador que cargue los estilos del fichero mis_estilos.css.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p>Mi texto</p>
</body>
</html>Usar esta técnica tiene las siguientes consideraciones:
- Esta técnica es ampliamente adoptada por desarrolladores y diseñadores por su versatilidad y mantenibilidad.
- Si tenemos varias páginas de un sitio web, la etiqueta link que referencia al fichero CSS debe ser incluida en cada página web del sitio.