Aplicar selectores básicos de CSS en el desarrollo web

Introducción

En este laboratorio, los estudiantes explorarán los selectores CSS fundamentales utilizados en el desarrollo web, centrándose en técnicas prácticas para dar estilo a los elementos de una página web. El laboratorio ofrece un enfoque práctico para comprender cómo funcionan diferentes selectores CSS, comenzando con los selectores de etiqueta básicos y avanzando progresivamente hacia métodos de selección más específicos, como los selectores de clase y de ID.

Los participantes aprenderán a crear un archivo HTML, aplicar selectores de etiqueta para dar estilo uniformemente a los elementos, implementar selectores de clase para dar estilo a objetivos específicos y utilizar selectores de ID para modificar individualmente elementos de manera única. El laboratorio también cubre conceptos importantes como las prioridades de los selectores CSS y el uso de la regla!important, lo que permite a los estudiantes desarrollar una comprensión integral de cómo controlar y personalizar efectivamente el diseño de una página web a través de técnicas de estilo CSS.

Crear un archivo HTML y aplicar un selector de etiqueta

En este paso, aprenderás a crear un archivo HTML y aplicar selectores de etiqueta básicos en CSS. Los selectores de etiqueta son una forma fundamental de dar estilo a los elementos HTML al especificar sus nombres de etiqueta.

Primero, creemos un archivo HTML en el directorio del proyecto. Abra el WebIDE y vaya al directorio ~/proyecto. Cree un nuevo archivo llamado index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de selector de etiqueta CSS</title>
    <style>
      /* Aquí agregaremos CSS */
    </style>
  </head>
  <body>
    <h1>Bienvenido a los selectores CSS</h1>
    <p>Este es un párrafo sobre los selectores de etiqueta CSS.</p>
    <div>Este es un elemento div.</div>
  </body>
</html>

Ahora, apliquemos un selector de etiqueta para dar estilo a nuestros elementos HTML. Agregue el siguiente CSS dentro de la etiqueta <style>:

/* Selector de etiqueta para h1 */
h1 {
  color: blue;
  text-align: center;
}

/* Selector de etiqueta para p */
p {
  font-size: 16px;
  color: green;
}

/* Selector de etiqueta para div */
div {
  background-color: lightgray;
  padding: 10px;
}

Cuando guarde y abra este archivo en un navegador, verá:

El elemento <h1> será azul y centrado
El elemento <p> tendrá un color verde y un tamaño de fuente de 16px
El elemento <div> tendrá un fondo gris claro con relleno

Salida de ejemplo en el navegador:

Título "Bienvenido a los selectores CSS" azul y centrado
Texto del párrafo verde
Div gris claro con relleno

Implementar selectores de clase para dar estilo a elementos

En este paso, aprenderás a usar selectores de clase en CSS para dar estilo a múltiples elementos con un atributo de clase compartido. Los selectores de clase ofrecen más flexibilidad en comparación con los selectores de etiqueta al permitirte aplicar estilos a grupos específicos de elementos.

Abra el archivo index.html del paso anterior en el WebIDE. Modifique el HTML para incluir atributos de clase:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de selector de clase CSS</title>
    <style>
      /* Aquí agregaremos selectores de clase */
    </style>
  </head>
  <body>
    <h1 class="main-title">Bienvenido a los selectores de clase CSS</h1>
    <p class="highlight">Este es un párrafo resaltado.</p>
    <p>Este es un párrafo normal.</p>
    <div class="highlight">Este es un div resaltado.</div>
  </body>
</html>

Ahora, agregue selectores de clase a su CSS para dar estilo a elementos con clases específicas:

/* Selector de clase para.highlight */
.highlight {
  background-color: yellow;
  color: black;
  font-weight: bold;
  padding: 5px;
}

/* Selector de clase para.main-title */
.main-title {
  color: blue;
  text-align: center;
  font-size: 24px;
}

Cuando guarde y abra este archivo en un navegador, verá:

Los elementos con la clase highlight tendrán un fondo amarillo
El título principal será azul y centrado
Solo los elementos con la clase highlight tendrán un estilo especial

Salida de ejemplo en el navegador:

Título principal azul y centrado
Párrafo y div resaltados en amarillo
El párrafo normal permanece sin estilo

Usar selectores de ID para enfocar elementos únicos

En este paso, aprenderás sobre los selectores de ID, que se utilizan para dar estilo a un elemento único en una página web. A diferencia de los selectores de clase que se pueden aplicar a múltiples elementos, un selector de ID se dirige a un elemento específico e individual.

Abra el archivo index.html del paso anterior en el WebIDE. Modifique el HTML para incluir un atributo de ID:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de selector de ID CSS</title>
    <style>
      /* Aquí agregaremos selectores de ID */
    </style>
  </head>
  <body>
    <h1 class="main-title">Bienvenido a los selectores de ID CSS</h1>
    <p class="highlight">Este es un párrafo resaltado.</p>
    <p id="special-paragraph">Este es un párrafo único con un ID.</p>
    <div class="highlight" id="main-content">
      Este es un div resaltado con un ID.
    </div>
  </body>
</html>

Ahora, agregue selectores de ID a su CSS para dar estilo a elementos específicos:

/* Selector de ID para #special-paragraph */
#special-paragraph {
  color: purple;
  font-style: italic;
  border-bottom: 2px solid green;
}

/* Selector de ID para #main-content */
#main-content {
  background-color: lightblue;
  padding: 10px;
  font-weight: bold;
}

Cuando guarde y abra este archivo en un navegador, verá:

El párrafo con el ID special-paragraph será morado, en cursiva y con un borde inferior verde
El div con el ID main-content tendrá un fondo azul claro y texto en negrita

Salida de ejemplo en el navegador:

Estilo único para el párrafo con un ID
Estilo distinto para el div con un ID
Otros elementos conservan su estilo anterior

Comprender las prioridades de los selectores CSS

En este paso, aprenderás sobre la especificidad de los selectores CSS y cómo se priorizan diferentes tipos de selectores al dar estilo a los elementos. Comprender las prioridades de los selectores te ayuda a controlar qué estilos se aplican cuando múltiples selectores apuntan al mismo elemento.

Abra el archivo index.html del paso anterior en el WebIDE. Actualice el HTML y el CSS para demostrar las prioridades de los selectores:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Prioridades de los selectores CSS</title>
    <style>
      /* Aquí demostraremos las prioridades de los selectores */
    </style>
  </head>
  <body>
    <div id="priority-demo" class="highlight">
      <p>Comprendiendo las prioridades de los selectores CSS</p>
    </div>
  </body>
</html>

Ahora, agregue CSS para mostrar cómo se priorizan diferentes selectores:

/* Selector de etiqueta (prioridad más baja) */
p {
  color: green;
  font-size: 16px;
}

/* Selector de clase (prioridad media) */
.highlight {
  color: blue;
  border: 2px solid gray;
}

/* Selector de ID (prioridad más alta) */
#priority-demo {
  color: red;
  font-weight: bold;
}

/* Los estilos en línea tendrían la prioridad más alta (no se muestra en este ejemplo) */

Jerarquía de prioridad de los selectores (de la más baja a la más alta):

Selectores de etiqueta
Selectores de clase
Selectores de ID
Estilos en línea (no se demuestra en este ejemplo)

Cuando guarde y abra este archivo en un navegador, verá:

El texto del párrafo será rojo (del selector de ID)
El div tendrá un borde gris (del selector de clase)
La fuente será en negrita (del selector de ID)

Salida de ejemplo en el navegador:

Texto rojo y en negrita para el párrafo
Borde gris alrededor del div
Demuestra cómo los selectores más específicos anulan a los menos específicos

Explorar la regla!important en el estilo CSS

En este paso, aprenderás sobre la regla !important en CSS, que es una forma poderosa de anular todas las demás reglas de estilo. Aunque se debe utilizar con moderación, puede ser útil en situaciones específicas.

Abra el archivo index.html del paso anterior en el WebIDE. Actualice el HTML para demostrar la regla !important:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Regla!important de CSS</title>
    <style>
      /* Aquí demostraremos la regla!important */
    </style>
  </head>
  <body>
    <div id="important-demo" class="highlight">
      <p>Comprendiendo la regla!important de CSS</p>
    </div>
  </body>
</html>

Ahora, agregue CSS para mostrar cómo la regla !important anula otros selectores:

/* Selector normal de etiqueta */
p {
  color: green;
  font-size: 16px;
}

/* Selector de clase */
.highlight {
  color: blue;
  border: 2px solid gray;
}

/* Selector de ID */
#important-demo {
  color: red;
}

/* Regla!important (prioridad más alta) */
p {
  color: purple !important;
  font-weight: bold !important;
}

Puntos claves sobre la regla !important:

Anula todas las demás prioridades de selectores
Utilícela con mucha moderación y solo cuando sea absolutamente necesario
Puede dificultar la mantenibilidad del CSS si se utiliza con exceso

Cuando guarde y abra este archivo en un navegador, verá:

El texto del párrafo será morado y en negrita
La regla !important tiene prioridad sobre otros selectores

Salida de ejemplo en el navegador:

Texto morado y en negrita para el párrafo
Demuestra cómo !important anula otras reglas de estilo

Resumen

En este laboratorio, los participantes exploraron técnicas fundamentales de selectores CSS para el desarrollo web, comenzando con selectores básicos de etiqueta para dar estilo a elementos HTML como encabezados, párrafos y contenedores div. Al aplicar propiedades de color, alineación, tamaño de fuente y fondo, los aprendices adquirieron experiencia práctica en la selección de elementos HTML específicos utilizando sus nombres de etiqueta.

El laboratorio presentó progresivamente métodos de selector más avanzados, demostrando cómo los selectores de clase pueden proporcionar mayor flexibilidad en el estilo al permitir un estilo dirigido en múltiples elementos. A través de ejercicios prácticos, los participantes aprendieron a crear y aplicar estilos CSS dinámicamente, comprendiendo los principios básicos de la jerarquía de selectores y la importancia de la selección precisa de elementos en el diseño web.