Existen tres técnicas para incorporar estilos CSS en un documento:
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>
A considerar...
- 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 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 y luego usar referencias para afectar los elementos HTML.
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>A considerar:
- Esta técnica ahorra espacio
- Vuelve al código más consistente y actualizable
- Lo malo.... 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 archivo externo y luego utilizar el elemento <link> rel="stylesheet" href="mis_estilos.css"> 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>A considerar...
- Técnica ampliamente adoptada por desarrolladores y diseñadores
- La etiqueta link que referencia al fichero CSS debe ser incluida en cada página web del sitio.