Fundamentos de Selectores CSS

Introducción

¡Bienvenido al laboratorio de Fundamentos de Selectores CSS! Cascading Style Sheets (CSS) es una tecnología fundamental de la World Wide Web, utilizada para describir la presentación de un documento escrito en un lenguaje de marcado como HTML.

Los selectores CSS son patrones que se utilizan para seleccionar y dar estilo a los elementos HTML que deseas. Dominar los selectores es una habilidad fundamental para cualquier desarrollador web. En este laboratorio, aprenderás a utilizar los tipos más comunes de selectores CSS para dar estilo a una página web sencilla.

Practicarás:

• Selector de Elemento: Selecciona elementos por su nombre de etiqueta (tag name).
• Selector de Clase: Selecciona elementos con un atributo class específico.
• Selector de ID: Selecciona un único elemento con un atributo id específico.
• Selector de Agrupación: Aplica los mismos estilos a múltiples selectores.
• Selector de Descendiente: Selecciona elementos que son descendientes de otro elemento.

El entorno del laboratorio ha sido preconfigurado con un archivo index.html. Tu tarea es escribir código CSS en el archivo styles.css para dar estilo a la página. Puedes previsualizar tus cambios en tiempo real cambiando a la pestaña Web 8080 en la esquina superior izquierda de la interfaz.

Usar selector de elemento para la etiqueta p

En este paso, utilizarás un selector de elemento para aplicar un estilo a todos los elementos <p> (párrafo) de la página. Los selectores de elemento son el tipo más básico de selector; seleccionan elementos HTML basándose en su nombre de etiqueta (tag name).

Primero, localiza el archivo styles.css en el explorador de archivos en el lado izquierdo de tu WebIDE. Haz clic en él para abrirlo en el editor.

Ahora, añade el siguiente código CSS al archivo styles.css. Esta regla seleccionará todos los elementos <p> y cambiará el color de su texto a azul.

p {
  color: blue;
}

Después de añadir el código, guarda el archivo (puedes usar Ctrl+S o Cmd+S). Para ver el efecto, haz clic en la pestaña Web 8080. Deberías ver que el texto de los tres párrafos de la página se ha vuelto azul.

Aplicar selector de clase con .nombreclase

En este paso, aprenderás a usar un selector de clase. Los selectores de clase son más específicos que los selectores de elemento. Seleccionan elementos basándose en el valor de su atributo class. Un selector de clase se escribe con un punto (.) seguido del nombre de la clase.

En tu archivo index.html, uno de los párrafos tiene el atributo class="highlight". Nos dirigiremos a este párrafo específico.

Añade la siguiente regla CSS a tu archivo styles.css. Esto seleccionará cualquier elemento con la clase highlight y le dará un fondo amarillo.

.highlight {
  background-color: yellow;
}

Guarda el archivo styles.css y cambia a la pestaña Web 8080 para ver tus cambios. Notarás que solo el párrafo con el texto "This is a special paragraph with a class" ahora tiene un fondo amarillo, mientras que los otros párrafos no se ven afectados.

Implementar selector de ID con #nombreid

En este paso, utilizaremos un selector de ID. Los selectores de ID son aún más específicos que los selectores de clase. Se utilizan para seleccionar un único elemento con un atributo id específico. Un selector de ID se escribe con un carácter de almohadilla (#) seguido del ID del elemento. Recuerda, un ID debe ser único dentro de una sola página HTML.

El elemento <h1> en index.html tiene un id="main-title". Vamos a darle estilo.

Añade la siguiente regla CSS a tu archivo styles.css. Esta regla aumentará el tamaño de la fuente del título principal y añadirá una línea sólida negra debajo de él.

#main-title {
  font-size: 32px;
  border-bottom: 2px solid black;
}

Guarda el archivo y revisa la pestaña Web 8080. Deberías ver que el título principal "Welcome to Our Page" es ahora más grande y tiene una línea debajo. Este estilo solo se aplica al elemento con el ID main-title.

Combinar selectores usando coma para agrupar

En este paso, aprenderás a aplicar los mismos estilos a múltiples selectores sin repetir el código. El selector de agrupación te permite hacer esto separando cada selector con una coma.

Digamos que queremos aplicar la misma fuente tanto a los elementos <h1> como a los <h2> de nuestra página. En lugar de escribir dos reglas separadas, podemos agruparlas.

Añade la siguiente regla CSS a tu archivo styles.css.

h1,
h2 {
  font-family: Arial, sans-serif;
}

Esta regla le indica al navegador que aplique la font-family especificada a todos los elementos <h1> Y a todos los elementos <h2>.

Guarda el archivo y actualiza la pestaña Web 8080. Observa cómo la fuente tanto de "Welcome to Our Page" como de "About CSS" ha cambiado.

Añadir selector descendiente como div p

En este paso, utilizarás un selector descendiente. Este selector coincide con todos los elementos que son descendientes de un elemento especificado. Un selector descendiente se crea listando dos o más selectores separados por un espacio.

Nuestro index.html tiene un elemento <p> dentro de un <div>. Queremos dar estilo solo a este párrafo específico, no a los otros párrafos de la página.

Añade la siguiente regla CSS a tu archivo styles.css. El selector div p seleccionará cualquier elemento <p> que esté ubicado en cualquier lugar dentro de un elemento <div>.

div p {
  font-style: italic;
}

Después de guardar el archivo, ve a la pestaña Web 8080. Verás que solo el párrafo "This paragraph is inside a div..." ahora está en cursiva. Los otros dos párrafos permanecen sin cambios porque no son descendientes de un <div>.

Resumen

¡Felicitaciones por completar el laboratorio! Has aprendido y aplicado con éxito los selectores CSS fundamentales para dar estilo a una página web.

En este laboratorio, practicaste:

• Selector de Elemento (p): Para dar estilo a todos los elementos de un cierto tipo.
• Selector de Clase (.highlight): Para dar estilo a elementos específicos que comparten una clase.
• Selector de ID (#main-title): Para dar estilo a un único elemento.
• Selector de Agrupación (h1, h2): Para aplicar los mismos estilos a múltiples elementos de manera eficiente.
• Selector Descendiente (div p): Para dar estilo a elementos basándose en su posición dentro de otro elemento.

Estos selectores son los bloques de construcción para crear diseños de páginas web complejos y hermosos. Ahora puedes usarlos para controlar con precisión la apariencia de tus documentos HTML.