CSS (Cascading Style Sheets) es el lenguaje que se utiliza para describir la presentación de un documento escrito en HTML o XML. Mientras que HTML se encarga de la estructura y el contenido de una página web, CSS es responsable de su apariencia, incluyendo colores, fuentes, espaciado y la disposición de los elementos. Con CSS, podemos crear diseños visuales que sean coherentes y atractivos.

¿Por qué es importante CSS?

Sin CSS, los sitios web se verían muy básicos, como simples documentos de texto sin estilo. CSS nos permite agregar un toque visual que mejora la experiencia del usuario y hace que los sitios web sean mucho más profesionales y accesibles. La separación de HTML y CSS también facilita el mantenimiento del código, permitiendo a los desarrolladores cambiar el diseño sin modificar el contenido estructural.

Esta imagen muestra una página web sin CSS comparada con una página estilizada con CSS.

Sintaxis básica de CSS

Una regla CSS tiene dos partes principales: el selector y la declaración. El selector indica qué elementos HTML se van a afectar, y la declaración describe qué estilo aplicar a esos elementos.

css

Selectores

Los selectores son la parte de una regla CSS que define a qué elementos HTML se aplicarán los estilos. Algunos de los selectores más comunes incluyen:

• Selector de tipo: Selecciona elementos HTML según su nombre de etiqueta.

  css
  

  "Este es un selector de tipo que selecciona todos los elementos de párrafo, es decir, los elementos p, y les aplica un color verde al texto."

• Selector de clase: Se refiere a elementos con una clase específica.

  css
  

  "En este caso, usamos un selector de clase. El punto antes de la palabra button indica que estamos seleccionando todos los elementos con la clase button, y les aplicamos un color de fondo rojo."

• Selector de ID: Apunta a un solo elemento que tiene un ID único.

  css
  

  "Este es un selector de ID, representado por el símbolo de numeral antes del nombre header. Aquí seleccionamos un elemento único que tiene ese ID y le aplicamos un color de fondo gris."

Esta imagen muestro selectores CSS aplicados

Propiedades y valores

Cada declaración CSS se compone de una propiedad y un valor. La propiedad indica qué aspecto del elemento queremos cambiar, como el color, el tamaño de la fuente o el ancho del borde. El valor define cómo queremos que cambie esa propiedad.

css

Cómo incluir CSS en un documento HTML

Hay varias maneras de incluir CSS en un documento HTML. Las más comunes son:

1. CSS en línea: Usando el atributo style directamente en el elemento HTML.

   html
   

   "Este es un ejemplo de CSS en línea, donde aplicamos el estilo directamente al elemento h1 dentro del propio HTML. El color del texto se establece a rojo."

2. CSS interno: Definiendo un bloque de estilos dentro del archivo HTML.

   html
   

   "Aquí usamos CSS interno. Definimos un bloque de estilos dentro del archivo HTML, dentro de la etiqueta style. El color del h1 se establece en verde."

3. CSS externo: Colocando las reglas CSS en un archivo separado con extensión .css.

   html
   

   "Por último, este es un ejemplo de cómo enlazar un archivo CSS externo. Usamos la etiqueta link para enlazar el archivo styles.css, que contiene todas nuestras reglas de estilo."

Descripcion de CSS en línea, interno y externo

El flujo del estilo en CSS

CSS sigue una serie de reglas para determinar qué estilos aplicar cuando varios estilos entran en conflicto. Estos son algunos de los conceptos clave:

• Cascada: CSS se basa en la idea de que los estilos se aplican en un orden jerárquico. Si hay conflictos entre dos reglas, se aplicará la regla más específica o aquella que aparece más tarde.

• Especificidad: Cada tipo de selector tiene un nivel de importancia diferente. Los selectores de ID tienen mayor prioridad que los selectores de clase, y los selectores de clase tienen mayor prioridad que los selectores de tipo.

• Herencia: Algunas propiedades, como el color del texto, se heredan automáticamente de los elementos padres, mientras que otras, como el margen, no se heredan.

css

Conclusión

En este capítulo, hemos aprendido los fundamentos de CSS, cómo funciona su sintaxis y las formas en que podemos aplicarlo a un documento HTML. Ahora tenemos una idea clara de cómo CSS mejora la apariencia de las páginas web. En el siguiente capítulo, profundizaremos en los selectores y aprenderemos más sobre cómo aplicar estilos de manera efectiva a diferentes partes de una página web.