Si estás construyendo un sitio web, seguramente estás empezando con HTML. Con HTML puedes añadir cabeceras, imágenes, tablas, formularios, listas y demás, pero no puedes controlar cómo van a presentarse visualmente esos elementos. Para eso utilizamos CSS.
Gracias a CSS puedes configurar cómo va a verse una página web en un navegador, incluyendo estilos, colores, añadir efectos, animaciones y más.
En este tutorial veremos cómo de fácil es añadir estilos y formatos a páginas web utilizando CSS, pero antes de ponerte a ello deberías tener al menos conocimientos básicos sobre HTML.
Cómo incluir CSS en documentos HTML
Básicamente, puedes incluir código CSS utilizando un archivo separado del archivo HTML o bien incrustado en el mismo código HTML. En total, existen tres formas de hacerlo:
- Inline – utilizando un atributo de estilo a un elemento HTML concreto de forma independiente.
- Estilos incrustados en el documento HTML o CSS interno – utilizando elementos de estilo en la cabecera de un documento HTML.
- Hojas de estilo externas – que se cargan desde un archivo CSS externo.
Veamos estos tres métodos para insertar CSS uno a uno.
Cómo añadir Estilos inline CSS a HTML
Un estilo inline implica que vas a añadir estilos CSS directamente en una etiqueta HTML. Por ejemplo:
En principio, los estilos inline se suelen evitar siempre que sea posible.
<h2 style="color: green;">Título en color verde</h2>Como puedes ver en el ejemplo anterior, el estilo CSS se está incluyendo directamente dentro de la etiqueta <h2>:
style=”color: green;”
Básicamente, estamos indicando que esta cabecera <h2> se visualize con texto en color verde, pero el resto de cabeceras h2 no van a verse afectadas por este estilo, a menos que añadas el mismo CSS en cada una de ellas.
Cómo añadir CSS interno incrustado en HTML
Esta es la técnica que suele estar más recomendada que el método anterior, porque separa el estilo CSS y el HTML en secciones diferentes, pero todo se mantiene en el mismo documento.
La diferencia con el método anterior radica sobre todo en que el estilo CSS no se incluye dentro de las etiquetas HTML. En lugar de eso, se incluyen entre etiquetas <style> y </style> que se añaden dentro de la cabecera HTML (en cualquier lugar entre <head> y </head>).
Por ejemplo:
<style>
h2 {
color: green;
}
</style>De esta manera estamos definiendo que todas las etiquetas <h2> del documento deben aparecer en color verde.
Como ves, utilizar este método ahorra tiempo y reduce sensiblemente el tamaño de los documentos HTML, ya que solo es necesario definir una sola vez los estilos CSS que van a aplicarse a varias etiquetas HTML.
Cómo añadir estilos CSS en un archivo externo
El tercer método que vamos a ver para incluir código CSS a un documento HTML es utilizando un documento externo.
Básicamente se trata de incluir todo el estilo CSS en un archivo independiente y luego llamarlo desde el archivo HTML.
Por ejemplo:
<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="estilo-externo.css">En este caso, el archivo ‘estilo-externo.css’ incluye los estilos que vamos a aplicar al documento HTML. Este archivo CSS no necesita incluir las etiquetas <style> y </style> tal como ocurría en el método que vimos anteriormente, tan solo los estilos CSS que quieras aplicar.
Las ventajas de este método son varias. Por un lado, el navegador del visitante de la web puede almacenar en la caché el archivo CSS externo y cargar tu página de manera más rápida en la siguiente ocasión.
Claro que, si el número de archivos CSS externos es alto, entonces se puede enlentecer la carga de la página, ya que el servidor donde esté alojada la web tendría que atender varias peticiones extra de archivos.
Por otro lado, el archivo HTML se reduce de tamaño y se hace más fácil de leer por parte de los buscadores, así que la página se puede hacer más amigable de cara al SEO.
En conclusión
Utilizar un método u otro para añadir estilos CSS a una página web dependerá del caso en concreto. De hecho, no es necesario que te limites a un solo método.
El método inline es ideal para incluir CSS esporádicamente en alguna etiqueta concreta, de manera aislada si se hace necesario.
Si te encuentras con varios estilos CSS para añadir a un documento HTML, entonces puedes valorar si añadirlo de manera interna o externa.
Unas pocas líneas CSS pueden añadirse de forma interna en HTML fácilmente sin necesidad de cargar un archivo externo.
Si el estilo CSS está compuesto por muchas líneas, entonces un archivo CSS externo puede ser una buena solución, pero teniendo en cuenta que un número elevado de archivos CSS para cargar en una misma página puede ser contraproducente y retardar su carga en el navegador.
