Ejercicio: Selectores

Completado

En el ejercicio anterior, aplicó estilo a elementos como html y h1. Con frecuencia, tiene que ser un poco más específico en la aplicación del estilo.

En este ejercicio, establecerá el estilo de las secciones de redes sociales y experiencia y vínculos en la página.

Aplicación de estilo a clases e identificadores

Empiece estableciendo el estilo para las secciones de redes sociales y experiencia.

1. Vuelva a la ventana vscode.dev que usó en el ejercicio anterior.

2. Dentro de index.html, observe el section elemento con el identificador de las redes sociales en la línea 10; aplique estilo a esta sección para establecer el color en azul.

3. Al final de style.css, agregue el siguiente CSS para establecer el color del elemento social-media:

   #social-media {
       color: blue;
   }
   

4. La página se actualiza, estableciendo el contenido en la sección de redes sociales en azul.

5. Dentro de index.html, observe las dos secciones en las líneas 28 y 32 con la clase experiencia; aplique estilo a estas secciones para poner la fuente en cursiva.

6. Al final de style.css, agregue el siguiente CSS para modificar la fuente de los elementos con la clase experiencia:

   .experience {
       font-style: italic;
   }
   

7. La página se actualiza, estableciendo que la fuente en experiencia aparezca en cursiva.

Uso de seudoclases para establecer el estilo de vínculo

Muchos desarrolladores web cambian el color y el estilo de los hipervínculos en una página. Establezca el color de los vínculos en verde y resalte los vínculos cuando un usuario mantenga el puntero sobre ellos.

1. Al final de style.css, agregue el siguiente CSS para establecer que los vínculos siempre sean verdes:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. La página se actualiza para mostrar los vínculos en verde.

3. Agregue el siguiente CSS al final de style.css para resaltar los vínculos cuando se mantiene el puntero sobre ellos:

   a:hover {
       background-color: yellow;
   }
   

4. Mantenga el puntero sobre los vínculos de la página y observe que los vínculos están resaltados.

Revisar

En la captura de pantalla siguiente se muestran los resultados del CSS que aplicó. Ha usado clases, identificadores y seudoclases para aplicar estilos a elementos específicos y grupos lógicos de elementos.