Capítulo 45 Introducción a estilos CSS.

CSS (Hojas de estilo en cascada) es el lenguaje en el que se especifica la apariencia de la página o del sitio web; a través de CSS se agregan estilos de forma selectiva a los elementos del documento html. Por otra parte, Javascript es el lenguaje de programación que agrega interactividad y elementos dinámicos al documento.

El estilo que se muestra en un documento HTML lo determina el lenguaje CSS, esto es, un lenguaje basado en reglas que se aplica a un grupo de etiquetas.

Formas de añadir estilos

Para colocar elementos de estilo en un documento HTML como colores, tipos de letra, tamaño de letra, bordes, entre otros, es posible hacerlo de 3 maneras. Usando el lenguaje CSS inline, hacerlo de forma incrustada, o externa.

CSS ‘en línea’: A través del atributo style se añaden características de estilo, al interior de cada elemento.

 <h1 style="color: red;">Título en rojo</h1>
 <p style="color: green;font-size:20px; width:15cm">
   No escogía, pues, orientaciones ni modos de pensar, antes dejaba que las orientaciones y modos
   de pensar viniesen a su encuentro, del mismo modo que no elegía el corte de sus sombreros o
   levitas, sino que se limitaba a aceptar la moda corriente. Como vivía en sociedad y se hallaba en esa
   edad en que ya se necesita tener opiniones, acogía las ajenas que le convenían.<p>
 <h1> Título sin atributo style </h1>
 <p>Todas las familias felices se parecen unas a otras; pero cada familia infeliz tiene un motivo especial para sentirse desgraciada. </p>

Título en rojo

No escogía, pues, orientaciones ni modos de pensar, antes dejaba que las orientaciones y modos de pensar viniesen a su encuentro, del mismo modo que no elegía el corte de sus sombreros o levitas, sino que se limitaba a aceptar la moda corriente. Como vivía en sociedad y se hallaba en esa edad en que ya se necesita tener opiniones, acogía las ajenas que le convenían.

Título sin atributo style

Todas las familias felices se parecen unas a otras; pero cada familia infeliz tiene un motivo especial para sentirse desgraciada.

Aquí se observa que en el primer título y párrafo fueron asignados estilos propios como el color, tamaño de fuente y ancho del párrafo; y en un segundo título y el posterior párrafo no se les asignó una regla de estilo, por lo que se visualizan con las especificaciones por defecto de HTML. De este modo, por medio del atributo style se otorgan estilos y sus especificaciones (o reglas) dadas al nivel de cada elemento.

CSS incrustado: Al contrario del modo ‘en línea’, el CSS incrustado crea los estilos dentro del head usando la etiqueta style, y especificando al interior de ésta el estilo para cada selector. Un selector en el lenguaje CSS corresponde al tipo de elemento al que aplicará la regla CSS. La sintaxis de las reglas CSS está dada por:

Como se puede observar cada propiedad y su valor están separados por ‘;’ del siguiente par. Esto se hace al interior de la etiqueta style, y para cada tipo de selector que se desee establecer un estilo. Una vez se ha declarado cada estilo deseado en el head, las etiquetas en el body que pertenecen a ese selector, tendrán el estilo definido. En el siguiente ejemplo se observa un estilo establecido para los elementos body, p, h1 y h2.

<!DOCTYPE html>
<HTML>
 <head>
   <title> Ejemplo 2</title>
   <style>
     body {background-color: rgb(80, 130, 100);}
     h1   {color: yellow;}
     p    {color: darkblue;
           font-family: verdana;
           font-size: 40}
     h2   {color: white;}
   </style>
 </head>
 <body>
   <h1> Ejemplo 2 html</h1>
   <h2> Aurora boreal </h2>
   <img src="https://img.freepik.com/foto-gratis/montana-nevada-aurora-boreal_406225-35.jpg?size=626&ext=jpg&ga=GA1.2.1488226238.1664122110"width="350"border="5">
   <p>Las auroras se producen cuando el viento solar hace presión contra la magnetosfera <br>
     (la zona del espacio controlada por el campo magnético de la Tierra) y empuja las <br>
      partículas cargadas (los electrones) hacia la atmósfera a altas velocidades. <a href="https://www.icelandair.com/es-es/northern-lights/">[Fuente]</a> </p>
 </body>
</HTML>

CSS externo: Se crea un archivo .CSS y se incluye al interior de la etiqueta head, usando el elemento link, que en este contexto enlaza el archivo con su hoja de estilos. Sus atributos principales son rel, que indica la relación entre el documento actual y el enlazado, y href que indica la url del enlace. Las declaraciones en el archivo .CSS se hacen de la misma forma que en el CSS incrustado, sin usar la etiqueta style.

A continuación vemos el código en el archivo .css:

body {background-color: rgb(80, 130, 100);}
h1   {color: yellow;}
p    {color: darkblue;
     font-family: verdana;
     font-size: 40}
h2   {color: white;}

Y en el archivo .html, con el mismo contenido del ejemplo anterior:

<!DOCTYPE html>
<HTML>
 <head>
   <title> Ejemplo 2</title>
   <link rel="stylesheet" href="plantilla.css">
 </head>
 <body>
   <h1> Ejemplo 2 html</h1>
   <h2> Aurora boreal </h2>
   <img src="https://img.freepik.com/foto-gratis/montana-nevada-aurora-boreal_406225-35.jpg?size=626&ext=jpg&ga=GA1.2.1488226238.1664122110"width="350"border="5">
   <p>Las auroras se producen cuando el viento solar hace presión contra la magnetosfera <br>
     (la zona del espacio controlada por el campo magnético de la Tierra) y empuja las <br>
      partículas cargadas (los electrones) hacia la atmósfera a altas velocidades. <a href="https://www.icelandair.com/es-es/northern-lights/">[Fuente]</a> </p>
 </body>
</HTML>

Obsérvese la sencillez del archivo .css, y cómo el atributo href de la etiqueta link remite al nobre del archivo .css, que usualmente tiene el nombre style.css, pero no necesariamente debe ser así.

El resultado del ejemplo es:

Generalmente se utiliza el manejo de estilos CSS externo debido a su flexibilidad a la hora de escoger un estilo para aplicar al documento, y no se recomienda el modo inline, ya que dificulta la legibilidad, organización y mantenimiento del código.