8.6. Introducción a CSS: selectores, propiedades y valores

CSS, u hojas de estilo en cascada, es un lenguaje de estilo utilizado para describir la presentación de un documento escrito en HTML. Se utiliza para controlar el diseño de varias páginas a la vez, lo que le permite cambiar el diseño de un sitio web completo con solo modificar un archivo. En nuestro camino para convertirnos en desarrolladores front-end competentes, es fundamental comprender cómo utilizar y comprender las propiedades de CSS.

Selectores CSS

Los selectores CSS son los elementos que definen a qué elementos HTML se aplicará el estilo. Se pueden dividir en cinco categorías: selectores de tipo, selectores de descendientes, selectores de clases, selectores de ID y selectores de atributos.

Selectores de tipo

Los selectores de tipo seleccionan elementos según el nombre del elemento HTML. Por ejemplo, si queremos seleccionar todos los párrafos de una página y cambiar el color del texto a rojo, podemos usar el siguiente código:

PAG {
    color rojo;
}

Selectores de descendientes

Los selectores de descendientes seleccionan elementos que son descendientes de un elemento específico. Por ejemplo, si queremos seleccionar sólo párrafos que están dentro de un div, podemos usar el siguiente código:

div p {
    color rojo;
}

Selectores de clases

Los selectores de clases seleccionan elementos según su clase. Por ejemplo, si queremos seleccionar todos los elementos con la clase "texto rojo" y cambiar el color del texto a rojo, podemos usar el siguiente código:

.texto rojo {
    color rojo;
}

Selectores de ID

Los selectores de ID seleccionan un elemento según su ID. Por ejemplo, si queremos seleccionar el elemento con el ID "mi-párrafo" y cambiar el color del texto a rojo, podemos usar el siguiente código:

#mi-párrafo {
    color rojo;
}

Selectores de atributos

Los selectores de atributos seleccionan elementos basándose en un atributo y valor específicos. Por ejemplo, si queremos seleccionar todos los enlaces que apuntan a "https://www.google.com" y cambiar el color del texto a rojo, podemos usar el siguiente código:

a[href="https://www.google.com"] {
    color rojo;
}

Propiedades y valores CSS

Las propiedades CSS son los estilos que desea cambiar y los valores CSS son los estilos que desea aplicar. Por ejemplo, si queremos cambiar el color del texto de un párrafo a rojo, "color" es la propiedad que queremos cambiar y "rojo" es el valor que queremos aplicar.

Hay muchas propiedades diferentes que puedes cambiar, incluido el color de fondo, el tamaño de fuente, el margen, el relleno, el borde, etc. Cada propiedad tiene un conjunto específico de valores que se pueden aplicar.

Por ejemplo, si queremos cambiar el tamaño de fuente de un párrafo a 16 píxeles, podemos usar el siguiente código:

PAG {
    tamaño de fuente: 16px;
}

Si queremos cambiar el color de fondo de un div a azul, podemos usar el siguiente código:

div {
    color de fondo: azul;
}

Es importante recordar que el orden de los estilos en tu CSS puede afectar el resultado final. Si tiene estilos en conflicto para el mismo elemento, prevalecerá el último estilo en su CSS.

Comprender cómo utilizar y comprender las propiedades CSS es una habilidad esencial para cualquier desarrollador front-end. Espero que esta guía haya ayudado a aclarar algunos de los conceptos básicos.