Antes de comenzar hay que aclarar que hay varias maneras de aplicar estilos con css, que son, dentro de una etiqueta html, en la cabecera de la misma página donde esta el código html o en una página aparte, de momento vamos a ver como aplicarlo dentro de una etiqueta, después en la misma página html, para finalmente hacerlo en un archivo css aparte, que és de entre las tres practicas la más recomendada y utilizada con diferencia.

Aplicar estilo dentro de una etiqueta

Si queremos aplicar estilo dentro de una etiqueta debemos utilizar el atributo style seguido de el signo igual = y las comillas de apertura y cierre " " como ya hemos visto en varias ocasiones con otros atributos.

<div style="aquí va el código css"></div>

Aplicar estilo en el documento html

Para aplicar estilo en el documento html, primero hay que crear un par de etiquetas <style>, las cuales contendrán dentro todo el código css, esto es para decirle al navegador que vamos a trabajar con css, además de eso, estas etiquetas deben ir siempre, y repito siempre, en la cabecera de la página web, ya que de lo contrario no funcionará.

<head>
  <style>
  	... Código css va aquí.
  </style>
</head>

Aplicar estilo en un archivo css aparte

Para aplicar estilo en un documento css aparte, hay que utilizar la etiqueta <link> e indicarle la ruta del archivo mediante el atributo <href>. Esta etiqueta requiere otros atributos que explicaremos más adelante, que son type, rel y media, de momento acuerdate de la etiqueta <link> y su atributo href con la ruta al archivo css. La estructura es la siguiente.

<link rel="stylesheet" type="text/css" href="estilo/estilo.css" media="screen" />
Lo más aconsejable es usar siempre un archivo css aparte, ademas de ser mas limpio y ordenado el codigo tiene ventajas, como que puedes reutilizar el codigo css generado en otras páginas web de tu misma web sin necesidad de reescribirlo, tan solo enlazarlo con la etiqueta <link>, por si esto fuera poco, con solo cambiar una parte del código se cambiará en todas las páginas a las que hayas enlazado, como ves la mejor manera es enlazarlo a un archivo css externo, por eso lo mejor es centrarse en la última y solo ver por encima las otras dos.

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.