Hola a todos, hoy os explicaré las formas de incluir CSS en un documento HTML de 3 formas sencillas. También lo veremos en ejemplo simples.
– 1ª forma: incluir CSS en el propio documento HTML
Mediante la etiqueta <style> dentro de la cabecera del documento. Dentro de <style> ponemos los estilos que queramos incluir en el documento HTML. Es importante incluir el atributo type=»text/css».
Es usado para definir estilos especificos en una determinada página HTML. Su desventaja es a la hora de modificar los estilos, ya que debemos cambiar los estilos de todas las páginas donde lo hayamos incluido de esta manera.
Veamos un ejemplo:
– 2ª forma: definir CSS en un archivo externo
Los estilos se incluyen en un archivo con extensión .css que las páginas HTML enlazan mediante la etiqueta <link>. Los atributos que deben incluir son:
- rel: indica el tipo de relación que tiene el recurso enlazado y la página HTML. En CSS, se usa stylesheet.
- type: indica el tipo de recurso enlazado. En CSS, es text/css.
- href: indica la URL del archivo CSS que contiene los estilos. La URL puede ser relativa o absoluta.
- media: indica el medio en el que se van a aplicar los estilos del archivo CSS. En principio, para este ejemplo no es importante, lo normal es poner all.
Veamos un ejemplo:
Haremos un archivo aparte del documento HTML, con una extensión .css.
Como vemos, al final de la etiqueta link la cerramos.
Este método es el más recomendado, ya que en un solo archivo podemos incluir una multitud de páginas HTML.
– 3ª forma: incluir CSS en los elementos HTML
Se utiliza la etiqueta <style> como atributo de la etiqueta que queremos personalizar.
Veamos un ejemplo:
Este método se usa muy poco, solo es recomendado si queremos dar un formato muy especifico.
Espero que os sea de ayuda.
Deja una respuesta