Este documento describe los estilos en cascada (CSS), incluido lo que son, sus características y tipos de aplicación. CSS permite aplicar formato visual a los elementos HTML de una manera separada que hace las páginas más ligeras y rápidas. Los estilos CSS se pueden aplicar externamente a través de hojas de estilo, internamente dentro del HTML, o en línea directamente en los elementos. Los selectores CSS permiten aplicar estilos por nombre de etiqueta, clase, ID, contexto y otros atributos.

1. CSS / CASCADING STYLE
SHEETS
Arturo Apanco

2. ¿Qué es un Estilo en Cascada?
 Es la forma en la que aplicamos formato visual a los
elementos semánticos del HTML
 Es muy versátil porque nos permite mantener por
separado ambos elementos sin entrar en conflictos
 Permite paginas más ligeras y rápidas de cargar
 Facilita el desempeño visual de los navegadores

3. ¿Qué características tiene un
CSS?
 Esta escrito en formato de texto
 Su aplicación es en forma de compilador
tradicional ( efecto en cascada)
 Utiliza herencia (por default o especifica)
 Crea hojas de estilo, selectores y reglas

4. Tipos de Aplicación de CSS
 Externa
 Se crea la hoja de estilos en un documento .css
 Se hacen los selectores y las reglas para todo el
sitio.
 Se vincula.
Ventajas Desventajas
Tiempo de renderizado del
navegador menor
Solamente se necesita un proceso
previo de diseño
Carga única que permea a varios
documentos o al sitio entero
Edición simplificada
Cambios de aplicación global

5. Tipos de Aplicación de CSS
 Interna ( incrustada o embeded)
 Se crea dentro del documento HTML
 Se hacen los selectores y las reglas para ese
único documento.
 Se hace una declaración al principio del HTML.
Ventajas Desventajas
Fácil de controlar en sitio
pequeños
Solamente se aplica a un
documento
Es conveniente para ajustes
rápidos
Aumenta tiempo de renderizado,
ya que debe leer cada página
Edición simplificada Las reglas pueden colapsar
Cambios de aplicación local

6. Tipos de Aplicación de CSS
 En línea( Inline)
 Se crea directamente en la parte semántica del
HTML
 Se aplica en ese momento a ese único selector
 Se hace una declaración al principio de la
etiqueta.
 No se recomienda esta aplicación.
Ventajas Desventajas
Aplicación única Solamente se aplica a una línea
Algunos LMS utilizan esta forma
de estilo
Aumenta tiempo de renderizado,
ya que debe leer cada página
Edición simplificada Las reglas pueden colapsar
fácilmente
Cambios de aplicación local Edición complicada

7. Estructura Básica de un
Selector
Selecto
r
Declaració
n
Regla o Bloque de
Declaración
h1 {
background: yellow;
color: red;
}
Propiedad Valor

8. Aplicación CSS
 Selectores por nombre de etiqueta <h1> <p>
 Selectores por clase .class
 Selectores por id #id
 Selectores por contexto article.about p
 Seleccionando parte de un elemento p:first-
line
 Selección basado en su estado a:link a:visited
 Selección basada en un atributo section[class]