Fundamentos

de CSS
Por:
Jean Paul Yepes
{}
 Todos los elementos en HTML
pueden pensarse como cajas
invisibles manipuladas por CSS
CSS asocia reglas de estilo a
elementos HTML

CSS HTML
{} </>
Con selectores y declaraciones

p{
background-color: red;
}
Con selectores y declaraciones

Selector
p{
background-color: red;
} Declaración
 Tipos de selectores
*{ } h1, h2, h3 { } li > a{}
Universal Elementos Hijo

p a{} h1 + p{} h1 ~ p{}

Descendiente Hermano adyacente Hermano general
 Tipos de selectores
.clase {} #Id{}
Clase ID
 Unidades de medidas CSS

Aa Aa

px % em rem
Sistemas de Colores en CSS

blue

RGB HSL Nombre

 Tipografías

Aa Aa
Serif Sans-serif
 Propiedades para texto
Roboto Open sans
Open sans
Open sans
Open sans Open sans
Open sans
Times new roman Open sans

font-family font-size font-weight

Propiedades para texto
E S P A C I O

letter-spacing
Propiedades para texto

text-align vertical-align
left|center|right|justify top|middle|bottom|
Modelo de caja

Contenido
Modelo de caja

Padding

Contenido
Modelo de caja

Padding

Contenido
Modelo de caja
Border

Padding

Contenido
Modelo de caja
Margin
Border

Padding

Contenido
Posicionamiento

Flujo normal Relativo Absoluto

 Cuando usamos posicionamiento
diferente al flujo normal. Podemos
usar las propiedades top, bottom,
left, right para ubicar los elementos
Otros Posicionamientos

Fijo Sticky
 Documentación

Para HTML Para CSS Biblia del desarrollo web

Reto
 Sígueme
@JeanPaulYps

yjeanpaul@gmail.com