Saltar al contenido principal

Selectores CSS y propiedades básicas

Selectores CSS y propiedades básicas

En este artículo, exploraremos los selectores CSS y las propiedades básicas que son esenciales para cualquier desarrollador web. A través de los selectores y las propiedades, podemos aplicar estilos visuales a los elementos HTML, controlando su apariencia y presentación.

Selectores CSS​

Los selectores CSS son patrones utilizados para seleccionar los elementos HTML a los que se aplicarán los estilos. Hay varios tipos de selectores que puedes utilizar:

Selectores de Tipo​

Los selectores de tipo aplican estilos a todas las etiquetas HTML de un tipo específico. Por ejemplo, para estilizar todos los párrafos <p>:

CSS
p {
  color: blue;
}

Selectores de Clase​

Los selectores de clase aplican estilos a cualquier elemento que tenga una clase específica. Para definir una clase en HTML, utilizamos el atributo class.

HTML
<p class="destacado">Este es un párrafo destacado.</p>
<p>Este es un párrafo normal.</p>
CSS
.destacado {
  color: red;
  font-weight: bold;
}

Selectores de ID​

Los selectores de ID aplican estilos a un único elemento que tiene un ID específico. Para definir un ID en HTML, utilizamos el atributo id.

HTML
<p id="unico">Este es un párrafo único.</p>
CSS
#unico {
  color: green;
  font-size: 20px;
}

Selectores de Atributo​

Los selectores de atributo aplican estilos a los elementos que tienen un atributo específico.

CSS
/* Elementos <a> con un atributo title */
a[title] {
  color: purple;
}

/* Elementos <a> con un href que coincida con "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* Elementos <a> con un href que contenga "example" */
a[href*="example"] {
  font-size: 2em;
}

/* Elementos <a> con un href que comience con "#" */
a[href^="#"] {
  color: #001978;
}

/* Elementos <a> con un href que termine en ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
a[class~="logo"] {
  padding: 2px;
}

Selectores de Descendiente​

Los selectores de descendiente aplican estilos a los elementos que son descendientes de un elemento específico.

HTML
<div class="contenedor">
  <p>Texto dentro del contenedor.</p>
</div>
<p>Texto fuera del contenedor.</p>
CSS
.contenedor p {
  color: purple;
}

Selectores de grupo​

Los selectores de grupo aplican los mismos estilos a múltiples selectores.

CSS
h1,
h2,
h3 {
  color: navy;
}

Selector universal​

Selecciona todos los elementos.

CSS
* {
  margin: 0;
  padding: 0;
}

Conclusión​

Comprender los selectores CSS y las propiedades básicas es fundamental para cualquier desarrollador web. Los selectores te permiten aplicar estilos específicos a los elementos HTML, mientras que las propiedades te permiten controlar su apariencia y presentación. Con estos conocimientos básicos, estarás bien encaminado para crear diseños web atractivos y efectivos. ¡Sigue practicando y experimentando con CSS para descubrir todo lo que puedes lograr!

Recursos
Ejercicios

💻 Mete mano al código con estos desafíos simples: