Taller de Programación Web
Sesión N° 06:
Cascading Style Sheets
(CSS)
Logro de aprendizaje
Al final de la sesión el estudiante identifica
características del lenguaje CSS
aplicando estilos a una página HTML.
Datos/Observaciones
Video
https://www.youtube.com/watch?v=8cSo0ijtkzU
Datos/Observaciones
Agenda
• Hoja de estilos en HTML
4
Hoja de Estilos
Datos/Observaciones
Definición de CSS
• Es un lenguaje usado para definir la presentación de
un documento estructurado escrito en HTML o XML
• Estas siglas corresponden a “Cascading Style
Sheets”(hojas de estilo en cascada).
Datos/Observaciones
Proceso de funcionamiento
Datos/Observaciones
Hoja de Estilos
Datos/Observaciones
Hoja de Estilos
Datos/Observaciones
Hoja de Estilos
Datos/Observaciones
Ejemplo de estilos sin CSS
Datos/Observaciones
Ejemplo de estilos con CSS
Datos/Observaciones
CCS externa a interna
Datos/Observaciones
Caso Ejemplo
Datos/Observaciones
Datos/Observaciones
Otro ejemplo
Datos/Observaciones
Esquema de la regla CSS
• Una regla CSS se compone de un
selector y de un bloque de declaración
• Cada declaración está compuesta por
uno o más pares propiedad/valor
• El bloque de declaración empieza y
acaba con los signos de llaves { ... }
• Cada par propiedad/valor se separa
por el signo punto y coma ;
• Cada propiedad debe separarse de su
valor por el signo dos puntos
• CSS 3 incluyen más de 250 propiedades
y sus respectivos valores.
Datos/Observaciones
Reglas de Estilo CSS
Datos/Observaciones
Diferentes tipos de selectores
Datos/Observaciones
Selectores Básicos
Datos/Observaciones
Selectores Básicos
Datos/Observaciones
Datos/Observaciones
Selector de clase
Datos/Observaciones
Selector de clase
Datos/Observaciones
Selector de identificación
Datos/Observaciones
Ejercicio 1
Datos/Observaciones
Solución 1
Datos/Observaciones
Ejercicio 2
Datos/Observaciones
Solución 3
Datos/Observaciones
Ejercicio 4
Datos/Observaciones
Preguntas
Datos/Observaciones
Resumiendo
1. ¿Cuántas formas de aplicar los estilos del CSS en una
página HTML existen? ¿Cuáles son?
_______________________________________________
_______________________________________________
