Saltar la navegación

✔️ Autoevaluación

Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

Prerrequisitos: Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
Objetivo: Utilizar algún CSS y probar conocimiento recién adquirido.

Punto de partida

Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

  1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
  2. Da al encabezado un border-bottom de 10px con puntos (dotted), que use el color CSS purple.
  3. Coloca en cursiva el <h2>.
  4. Al ul utilizado para los detalles de contacto un background-color #eeeeee, y un border de 5px solid purple. Usa algo de padding para empujar el texto lejos del borde.
  5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.

Deberías conseguir algo parecido a esta página:

Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

Compartir

Si deseas compartir tu trabajo:

  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.

Recapitulación

Felicitaciones por completar este módulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.