CSS: Uso de CSS en HTML
El lenguaje de estilos CSS no está directamente relacionado con HTML. Es necesario indicar al navegador desde dónde descargar e interpretar los estilos. Para ello, existen tres formas:
- Especificar los estilos como valor del atributo
style
. Esta forma se conoce como "en línea" (inline), lo que significa que se escribe la regla en una sola línea utilizando el atributostyle
. - Utilizar la etiqueta especial
<style>
, que se coloca en la secciónhead
. El navegador procesará todo lo que esté escrito dentro de esta etiqueta como el código CSS. - Enlazar un archivo separado con los estilos. En este caso, se crea un archivo con extensión
.css
, donde se especifican las reglas CSS. Para enlazar el archivo se utiliza la etiqueta meta<link>
.
En esta lección, veremos el principio de la escritura en línea de estilos utilizando el atributo style
. Independientemente de la forma que elijas para enlazar los estilos, la sintaxis de las reglas sigue siendo la misma: nombre-propiedad: valor;
. Es importante no olvidar agregar el símbolo ;
después del valor de la propiedad. De esta manera, el navegador podrá separar las reglas entre sí.
Una de las principales formas de "probar" los estilos es trabajar con texto. CSS permite dar formato al texto de muchas maneras: aumentar el tamaño de la fuente, definir el estilo, la negrita, etc. Todas las reglas básicas para trabajar con texto se estudiarán a lo largo del curso.
Vamos a aprender cómo cambiar el tamaño de la fuente. El tamaño se puede modificar utilizando la propiedad font-size
, cuyo valor es un número seguido de una unidad de medida. Intentaremos hacer que el texto tenga un tamaño de 32 píxeles. La unidad de medida píxel se indica utilizando la abreviatura px
. Se explicarán en detalle las diferentes unidades de medida y cómo funcionan en las próximas lecciones.
<p style="font-size: 32px;">Texto grande</p>
Texto grande
Tarea
Agrega la etiqueta <p></p>
al editor y, utilizando el atributo style
, establece el tamaño de la fuente en 12 píxeles.
¿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.