Code n' Social

¿De qué trata esta lección?
En esta lección echamos un vistazo al uso del lenguaje CSS. Intentamos aplicar algunos ajustes fáciles de formato a los documentos HTML. En esta lección tratamos de insertar palabras clave de CSS en diferentes sitios: añadimos color a diferentes textos. Los colores se pueden definir con nombres o números en inglés, usamos los nombres de colores en esta lección y los números en la siguiente.

Sobre CSS:

La abreviatura CSS proviene de la frase la “Cascading Style Sheet” (hoja de estilo en cascada).
El uso de CSS es formatear documentos HTML.
El navegador utiliza el formato más cercano a la etiqueta HTML de destino: tendremos la oportunidad de probar esto en los ejercicios.

Nuevas etiquetas HTML de esta lección:
<style></style> - con esta etiqueta marcamos en el encabezado del documento HTML los posibles formatos CSS que se refieren al documento.
<link> </link> - al usar esta etiqueta en el encabezado de un documento HTML, podemos referirnos a archivos CSS externos. Usamos esta etiqueta una vez antes para insertar una imagen pequeña junto al título de la página web, llamada favicon.

Nuevo atributo HTML en esta lección:
style – este atributo se puede usar con cada etiqueta HTML, por lo que podemos definir el formato CSS en referencia a una etiqueta HTML.

Nueva propiedad CSS en esta lección:
color – podemos configurar el color de una parte de texto con esta palabra clave CSS.

Ejemplos:

En el ejemplo anterior, cambia el color del texto de un encabezado a rojo. Usamos el atributo de style en la etiqueta <h1>.
Este es un estilo en línea que se refiere solo a esta etiqueta.
En la parte color: red; la palabra clave de color es una propiedad CSS, red (rojo) es su valor.

En el ejemplo anterior, el estilo se establece en el encabezado de documentos HTML. De esta manera, la configuración del color se refiere no solo a un título, sino a cada etiqueta <h1> en el documento.

La etiqueta <style> aparece adicionalmente en la parte <head> del documento, el selector <h1> define que el formato entre paréntesis debe usarse para cada encabezado de primer nivel.

En el ejemplo anterior, el formato CSS sale del documento HTML a un archivo que tiene la extensión css. Tenemos que crear un archivo separado y usar la etiqueta <link> para referirnos a esta hoja de estilo. De esta manera podemos usar el mismo archivo CSS para más documentos HTML, solo necesitas hacer referencia.

Ejercicios

1. Elige un color de la lista de la página https://www.w3schools.com/colors/colors_names.asp y úsalo en el index.html para el encabezado de Coders Work. Dale el color directamente en la etiqueta <h1>.

Ver el resultado

2. Agrega estilo de color al encabezado de los archivos toplangs.html. Esta configuración debe aplicarse solo a las etiquetas h3 y cambiar su color. Elige el color de la lista proporcionada en el ejercicio anterior.

Ver el resultado

3. En el archivo index.html, agrega un color al título de la imagen. Usa la etiqueta <style> en la parte del encabezado para definir este color.

Ver el resultado

4. Crea un archivo vacío con el nombre style.css en la carpeta de la página web. Puedes crearlo guardando desde el programa Notepad++. Cambia el color de cada párrafo a un color de tu elección. Aplica el archivo CSS a cada documento HTML en su carpeta usando la etiqueta <link>. Cambia el color y verifica que el color cambie en cada documento.

Ver el resultado

5. Aplica un color nuevo a los encabezados de segundo nivel en los documentos HTML en su carpeta, agregando la configuración al archivo style.css. Agrega al archivo style.css una configuración de color para la etiqueta <body> y verifica que estas configuraciones se apliquen a los textos que no coloreamos antes.

Ver el resultado