CSS: Hojas de estilo en cascada
En el curso dedicado al lenguaje de marcado HTML, se estudiaron varios elementos que, por defecto, tienen estilos aplicados: los párrafos tenían sangría, los enlaces tenían un color diferente, los títulos diferían en el tamaño de letra, etc. Como desarrollador, puedes cambiar estos estilos y agregar unos completamente nuevos. ¿Agregar un fondo al texto? ¿Cambiar el tamaño de los elementos? ¿Crear animaciones? Todo esto se puede hacer con CSS (Hojas de estilo en cascada), un lenguaje que define cómo se verán los elementos HTML en el navegador.
El curso de CSS es una continuación lógica del curso de HTML. Muchas etiquetas y conceptos que se encontrarán durante el curso ya fueron explicados.
El siguiente ejemplo muestra cómo se ve el texto sin usar CSS personalizado (es decir, se aplican los estilos que el navegador "define") y cómo se puede estilizar el documento utilizando CSS.
Ejemplo de texto con estilo estandartizado
Párrafos
Los párrafos se crean utilizando la etiqueta de apertura y cierre <p>, dentro de la cual se coloca una pequeña parte de texto. Por ejemplo:
<p>Primer párrafo</p>
<p>Segundo párrafo</p>Ejemplo de texto con estilo personalizado
Párrafos
Los párrafos se crean utilizando la etiqueta de apertura y cierre <p>, dentro de la cual se coloca una pequeña parte de texto. Por ejemplo:
<p>Primer párrafo</p>
<p>Segundo párrafo</p>Ahora el texto es más legible y se puede diferenciar rápidamente los ejemplos de código de las descripciones. En el curso se explicarán las reglas básicas de CSS para trabajar con texto y bloques, lo que permitirá dar formato al texto y estructurar visualmente la información.
Tarea
Copia el código en el editor. Intenta reemplazar los diferentes valores para ver cómo funciona el editor. Los tests esperan una copia completa del código a continuación.
<p style="font-size: 25px;">Primer cambio de estilo utilizando CSS</p>
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.