Existen tres formas de incluir o integrar el lenguaje de estilos dentro de un documento HTML, cualquiera de las tres formas es completamente válida, pero solamente una es la más óptima y más recomendada.
Estilos en línea
Al aplicar estilos a los elementos HTML cambia la forma en la que estos se presentan en pantalla. Los navegadores proporcionan un conjunto de estilos por defecto que en la mayoría de los casos no se ajustan a las necesidades de los diseñadores. Para cambiar esto, podemos sobreescribirlos con nuestros propios estilos utilizando deferentes técnicas. Una de estas técnicas es asignar estilos dentro del elemento como un atributo. El código que presento a continuación contiene un sencillo documento HTML que muestra el elemento <p> modificado por el atributo style con el valor font-size: 20px. Esta propiedad cambia el tamaño predeterminado del texto dentro del elemento <p> a 20px.
Usar la técnica descrita anteriormente es una buena manera de probar estilos y ver sus efectos, pero no se recomienda para un proyecto más grande. La razón es simple:con esta técnica es necesario escribir y repetir cada estilo para cada elemento, aumentando así considerablemente el tamaño del documento. De este modo se acaba haciendo imposible actualizar y mantener un sitio web.
Estilos incrustados
Mejor alternativa a la técnica anterior es la inserción de estilos en el encabezado del documento y el uso de referencias aplicarlos a los elementos HTML correctos.
El elemento <style> permite a los desarrolladores insertar los estilos CSS en una página. En las versiones anteriores de HTML era necesario especificar qué tipo de estilos se insertarían pero en HTML5 el estilo por defecto es CSS, así que no es necesario añadir ningún atributo a la etiqueta de apertura <style>.
En el ejemplo anterior no es necesario escribir el estilo dentro de cada elemento <p> del documento porque ya se ha aplicado a todos ellos. Con este método, se ha reducido código y se ha asignado el estilo deseando utilizando referencias a los elementos adecuados.
Archivos externos
La declaración de los estilos en el encabezado del documento ahorra espacio y hace que el código sea más consistente y fácil de mantener, pero se requiere una copia de los estilos en todos los documentos del sitio web. La solución a esta duplicación es mover todos los estilos en un archivo externo y utilizar el elemento <link> para insertar este archivo en cualquier documento que requiera la aplicación del estilo. Este método también permite cambiar todo el conjunto de estilos mediante la simple inserción de un archivo diferente, así como modificar o adaptar los documentos a cada circunstancia o dispositivo.
El funcionamiento de la etiqueta <link> en base a sus atributos es el siguiente:
- href: URL o dirección completa del fichero de estilos. Este fichero debe tener obligatoriamente extensión .css.
- rel: Define la relación entre el fichero CSS y el documento HTML, en este caso su valor es stylesheet, hoja de estilos.
- type: tipo MIME del fichero enlazado. El tipo MIME de una hoja de estilos es text/css.
Para ejecutar los códigos expuestos anteriormente, copie en un archivo de texto el código y ábralo en su navegador para probar su funcionamiento. tenga en cuenta que el archivo debe tener la extensión .html para abrirlo correctamente. (ejemplo miarchivo.html)
