Introducción a CSS

1. Aparición de CSS

Cuando se hizo evidente que los navegadores se usaban no solo con fines científicos, sino también con fines entretenidos, de repente comenzó a faltar el soporte de multimedia: videos, animaciones, colores, sonidos, transparencias, etc.

Al principio se pensó agregar muchos más tags para esto, pero luego se dieron cuenta de que habría cientos de nuevos tags que complicarían demasiado el trabajo con documentos HTML. Por lo tanto, surgió la idea de separar la “apariencia del documento” (diseño) de su contenido, y así nacieron los CSS.

Cascading Style Sheets (CSS) o Hojas de Estilo en Cascada, son uno de los componentes clave del desarrollo web, encargados de la apariencia visual de las páginas web.

CSS es un conjunto de propiedades, cada una con un nombre y valor. El desarrollador web especifica estas propiedades, y el navegador es responsable de renderizarlas. Estas propiedades se pueden aplicar prácticamente a cualquier elemento. Ejemplo de estilos CSS:

Hay menos de cien parámetros CSS (también llamados propiedades CSS). Sin embargo, estas pueden interactuar entre sí de maneras inusuales y producir efectos muy sorprendentes. En CodeGym aprenderás a trabajar con ellos y a crear verdadera magia en la página 🦄.

2. Estilos de elementos

Para cada elemento HTML, se puede especificar un estilo CSS utilizando el atributo style.

Ejemplo:

      
<p style="color: blue; font-size: 16px;">Este es un ejemplo de estilo inline.</p>
      
    

Este estilo le dice al navegador que el texto dentro del párrafo debe renderizarse en color azul y que el tamaño de la fuente debe ser de 16 píxeles de altura.

En realidad, hay dos "estilos" aquí:

• color = blue
• font-size = 16px

Simplemente están especificados en una sola línea y separados por punto y coma.

También puedes, por ejemplo, crear un rectángulo negro y escribir texto blanco en él. Este código se verá así:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Texto blanco sobre fondo negro 
</div>
      
    

3. Colores

Exploraremos los estilos CSS con más detalle cuando estudiemos HTML. Sin embargo, para que sea más interesante, hoy vamos a analizar los colores. Con CSS, puedes especificar cualquier color que una computadora pueda mostrar, ¡e incluso más!

Los colores en CSS son una parte importante de la estilización de páginas web. Permiten crear interfaces visualmente atractivas e intuitivas. Hay varios métodos para especificar colores en CSS, cada uno con sus características y aplicaciones.

1. Nombres de colores (Color Names)

CSS admite más de 140 nombres de colores estándar. Este es un método simple y claro para especificar colores.

      
<div style="color: lightblue;"> Texto color azul claro</div>
      
    

Algunos nombres de colores comunes:

2. Valores Hexadecimales (Hexadecimal Values)

Hay otra forma de especificar cualquier color: la codificación hexadecimal. Esto permite especificar 16 millones de tonos, ya que es imposible inventar nombres para tantos colores, así que se usan números.

Los valores hexadecimales se especifican usando el símbolo #, seguido de seis dígitos o letras que representan la intensidad de los colores rojo, verde y azul (RRGGBB).

      
<div style="color: #ff0000; background-color: #00ff00;"> Rojo sobre verde </div>
      
    

Verás este método para especificar colores frecuentemente en ejemplos. Volveremos a este tema cuando estudiemos CSS con mayor detalle.