title | slug |
---|---|
Usa tu nuevo conocimiento |
Learn/CSS/First_steps/Styling_a_biography_page |
{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
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. |
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.
Note
Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.
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:
- {{cssxref("font-family")}}
- {{cssxref("color")}}
- {{cssxref("border-bottom")}}
- {{cssxref("font-weight")}}
- {{cssxref("font-size")}}
- {{cssxref("text-decoration")}}
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.
- Coloca en rosado el nivel
<h1>
, usando el color CSShotpink
. - Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (
dotted
), que use el color CSSpurple
. - Coloca en cursiva el
<h2>
. - Al
ul
utilizado para los detalles de contacto un {{cssxref("background-color")}}#eeeeee
, y un {{cssxref("border")}} de5px solid purple
. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde. - 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.
{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}}
Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:
-
Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
-
Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir:
- Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
- Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
- Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
- Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
Felicitaciones por completar este primer modulo!. 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.
{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}