Introducción a CSS: selectores, propiedades y valores

CSS, que significa hojas de estilo en cascada, es un lenguaje de estilo utilizado para describir la apariencia de un documento escrito en HTML. CSS describe cómo se deben mostrar los elementos HTML. Esto puede controlar el diseño de varias páginas web a la vez. CSS le permite aplicar estilos a páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que se utilice para estructurar el documento.

Selectores CSS

Los selectores CSS son la parte de CSS que selecciona el elemento HTML al que desea aplicar estilo. Existen varios tipos de selectores en CSS, incluidos selectores de tipo, clase, ID, atributos, entre otros.

• Selectores de tipo: selecciona elementos según el nombre del elemento HTML. Por ejemplo, el selector de tipo p seleccionará todos los párrafos.
• Selectores de clase: selecciona elementos según el atributo de clase. Por ejemplo, el selector de clases .intro seleccionará todos los elementos con class="intro".
• Selectores de ID: seleccione un elemento según el atributo de ID. Por ejemplo, el selector de ID #firstname seleccionará el elemento con id="firstname".
• Selectores de atributos: selecciona elementos en función de un atributo o valor de atributo. Por ejemplo, el selector de atributos [target="_blank"] seleccionará todos los elementos con target="_blank".

Propiedades CSS

Las propiedades CSS son lo que desea aplicar estilo en el elemento seleccionado. Por ejemplo, es posible que desee cambiar el color, la fuente, el tamaño, el margen, el relleno, el fondo, el borde y muchas otras propiedades de los elementos HTML. Cada propiedad tiene un valor específico.

Por ejemplo, la propiedad color controla el color del texto. Entonces, si quieres que el texto de todos los párrafos sea rojo, usarías el siguiente código CSS:

PAG {
  color rojo;
}

Valores CSS

Los valores CSS son los ajustes que realizas a las propiedades. En el ejemplo anterior, red es el valor de la propiedad color. Los valores pueden ser palabras clave como red, números como 12px, porcentajes como 50% o una variedad de otras unidades de medida. .

Los valores también pueden ser más complejos, como url("image.jpg") para la propiedad imagen de fondo, o rgba(255 , 0 , 0, 0.3) para un color semitransparente.

En resumen, CSS es un lenguaje potente que permite a los desarrolladores controlar con precisión cómo se muestran los elementos HTML en la pantalla. Comprender los selectores, las propiedades y los valores de CSS es clave para convertirse en un desarrollador front-end eficaz.