Formas de incluir CSS en un documento HTML

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:

codigo css desde documento html

ejemplo css desde documento html

– 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.

codigo estilos css

codigo html

Como vemos, al final de la etiqueta link la cerramos. 

ejemplo css desde documento html

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:

 codigo html elementos

ejemplo css desde documento html

Este método se usa muy poco, solo es recomendado si queremos dar un formato muy especifico.

Espero que os sea de ayuda.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *