HTML - Hoja de estilo

Las hojas de estilo en cascada (CSS) describen cómo se presentan los documentos en pantallas, en forma impresa o quizás cómo se pronuncian. El W3C ha promovido activamente el uso de hojas de estilo en la Web desde que se fundó el consorcio en 1994.

Las hojas de estilo en cascada (CSS) proporcionan alternativas fáciles y efectivas para especificar varios atributos para las etiquetas HTML. Con CSS, puede especificar varias propiedades de estilo para un elemento HTML determinado. Cada propiedad tiene un nombre y un valor, separados por dos puntos (:). Cada declaración de propiedad está separada por un punto y coma (;).

Ejemplo

Primero consideremos un ejemplo de documento HTML que hace uso de la etiqueta <font> y atributos asociados para especificar el color del texto y el tamaño de fuente:

Note- La etiqueta de fuente en desuso y se supone que se eliminará en una versión futura de HTML. Por lo tanto, no deben usarse en su lugar, se sugiere usar estilos CSS para manipular sus fuentes. Pero aún con el propósito de aprender, este capítulo trabajará con un ejemplo usando la etiqueta de fuente.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Podemos reescribir el ejemplo anterior con la ayuda de la hoja de estilo de la siguiente manera:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Esto producirá el siguiente resultado:

Puede utilizar CSS de tres formas en su documento HTML:

  • External Style Sheet - Defina las reglas de la hoja de estilo en un archivo .css separado y luego incluya ese archivo en su documento HTML usando la etiqueta HTML <link>.

  • Internal Style Sheet - Defina las reglas de la hoja de estilo en la sección de encabezado del documento HTML usando la etiqueta <style>.

  • Inline Style Sheet - Defina las reglas de la hoja de estilo directamente junto con los elementos HTML utilizando style atributo.

Veamos los tres casos uno por uno con la ayuda de ejemplos adecuados.

Hoja de estilo externa

Si necesita utilizar su hoja de estilo en varias páginas, siempre se recomienda definir una hoja de estilo común en un archivo separado. Un archivo de hoja de estilo en cascada tendrá la extensión.css y se incluirá en archivos HTML mediante la etiqueta <link>.

Ejemplo

Considere que definimos un archivo de hoja de estilo style.css que tiene las siguientes reglas:

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Aquí definimos tres reglas CSS que serán aplicables a tres clases diferentes definidas para las etiquetas HTML. Le sugiero que no se preocupe por cómo se definen estas reglas porque las aprenderá mientras estudia CSS. Ahora hagamos uso del archivo CSS externo anterior en nuestro siguiente documento HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Esto producirá el siguiente resultado:

Hoja de estilo interna

Si desea aplicar las reglas de la hoja de estilo a un único documento, puede incluir esas reglas en la sección de encabezado del documento HTML utilizando la etiqueta <style>.

Las reglas definidas en la hoja de estilo interna anulan las reglas definidas en un archivo CSS externo.

Ejemplo

Reescribamos el ejemplo anterior una vez más, pero aquí escribiremos las reglas de la hoja de estilo en el mismo documento HTML usando la etiqueta <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Esto producirá el siguiente resultado:

Hoja de estilo en línea

Puede aplicar las reglas de la hoja de estilo directamente a cualquier elemento HTML utilizando styleatributo de la etiqueta relevante. Esto debe hacerse solo cuando esté interesado en realizar un cambio particular en cualquier elemento HTML únicamente.

Las reglas definidas en línea con el elemento anulan las reglas definidas en un archivo CSS externo, así como las reglas definidas en el elemento <style>.

Ejemplo

Reescribamos el ejemplo anterior una vez más, pero aquí escribiremos las reglas de la hoja de estilo junto con los elementos HTML usando style atributo de esos elementos.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Esto producirá el siguiente resultado: