Colegio Nacional Nicolás Esguerra

Etapa 10

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Este proyecto de laboratorio

web está utilizando un nuevo
idioma para agregar estilo a la
página. Con un compañero
explora los archivos index.htmly
style.css. Esté preparado para
discutir las siguientes
preguntas.

¿Qué cambios está haciendo

este nuevo lenguaje a la
página?
¿En qué se diferencia este
lenguaje del HTML?
¿Cómo se conectan los archivos
index.htmly style.css?

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Este archivo HTML utiliza una

hoja de estilo ("style.css")
para dar a la página un estilo
particular. La hoja de estilo
contiene información sobre
el aspecto de cada uno de los
elementos HTML.

Encuentre el código en la
hoja de estilo (haga clic en
"style.css" en la lista de
archivos) que hace que el
encabezado h1 sea rojo.
Cambie el código para el
color del encabezado h1 reda
un color diferente.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

El bloque de código que da

reglas para una etiqueta en
particular se llama un
conjunto de reglas . Puede
crear un nuevo conjunto de
reglas copiando el patrón que
ve en el conjunto de reglas
para la h1etiqueta.

Encuentre el conjunto de
reglas CSS en la hoja de estilo
que determina los estilos para
la etiqueta h1.
Usando el mismo patrón,
escriba un nuevo conjunto de
reglas CSS que determinará el
estilo de la etiqueta h3.
Agregue código para
establecer un color diferente
para las etiquetas h3.
Nicolás Medina – 803
Colegio Nacional Nicolás Esguerra

¿Qué es una hoja de estilo?

¿Qué es CSS?
Cambiar el tamaño del texto
Puedes controlar otras cosas
además de los colores usando otras
propiedades.

Encuentre el conjunto de reglas CSS

en la hoja de estilo que determina
el estilo de la etiqueta de párrafo.
Cambia el tamaño del texto de los
párrafos para que sean más
grandes.
Agregue una nueva regla a su
conjunto de reglas para su etiqueta
h3 para hacer que el texto sea más
grande o más pequeño.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Encuentre el conjunto de
reglas CSS en la hoja de estilo
que determina el estilo de la
etiqueta de párrafo.
Cambia la familia de fuentes y
elige la que más te guste.
Elija entre "serif", "sans-serif",
"cursiva", "fantasía" y
"monoespacio"
Agregue una regla de familia
de fuentes para las etiquetas
h1 o h3.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Encuentre el código en la hoja de

estilo que hace que la etiqueta
h1 esté subrayada.
Cambia la decoración del texto y
ve cuál te gusta.
Elija entre "subrayado", "sobre
línea" y "paso de línea"
Agregue una regla de decoración
de texto para el párrafo o
etiqueta h3.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Busque la propiedad "text-

align" en la etiqueta de
párrafo.
Cambia la alineación del
párrafo.
Elija entre "izquierda",
"derecha" y "centro"

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Este es tu proyecto de antes. En el

siguiente nivel, tendrá la
oportunidad de agregarle algunos
estilos diferentes, pero primero,
debe agregar una hoja de estilo,
nombrarla y vincularla a su página
html.

Crea una nueva hoja de estilo para

tu proyecto.
Renombra el archivo de la hoja de
estilo.
Añade tu hoja de estilo a tu página
HTML.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

¡Ahora puedes aplicar el estilo al

texto en tu sitio web personal!

Abra su hoja de estilo y agregue el

estilo de su elección a su proyecto.
Asegúrese de usar al menos 3
propiedades CSS diferentes.
Lista de verificación
Se utilizan al menos 3 de las
siguientes propiedades CSS:
font-size
font-family
color
text-decoration
text-align
Si ha usado al menos 3 de las
propiedades de la lista de
verificación, puede explorar algunas
propiedades de texto adicionales
para agregar a su proyecto.
Nicolás Medina – 803
Colegio Nacional Nicolás Esguerra

Nicolás Medina – 803