Índice:

1. Introducción
2. Selectores
3. Formateando Texto
4. El modelo de caja
5. Layouts
6. Media Querys
7. Animaciones

Cascading
Style
Sheets

CSS Working Group

CSS Snapshot 2018

Selectors Level 3

CSS Style Atributtes

CSS Color Level 3

CSS Fonts Level 3

etc

Cascada

Los estilos se propagan a los elementos que contiene.

Estilo

Aplica propiedades de apariencia a los distintos elementos.

Hojas

Los estilos se añaden en archivos aparte

.css

¿Qué pasa en
el navegador?

Se procesa el lenguaje de marcado HTML y
construye el árbol de DOM.

Se procesa el lenguaje de marcado CSS y
construye el árbol de CSSOM.

Se combina el DOM y el CSSOM en un árbol de representación.

Se ejecuta el diseño en el árbol de representación
para calcular la geometría de cada nodo.

¿De qué tamaño y en qué ubicación se vería cada cosa?

Traduce las unidades relativas a estáticas

Se dibuja cada nodo en la pantalla.

Renderizado

Prioridad de Carga

¿Cómo se aplican los estilos?

Estilos de usuario-agente

Estilos definidos por el usuario
en el navegador o por una extensión

Hojas de estilo

<link rel="stylesheet" type="text/css" href="URL.css" media="mediaQuery" />

Embed styles

<style> selector/es { propiedad: valor; propiedad: valor; } </style>

inline styles

<tag style="propiedad:valor; propiedad: valor"> contenido </tag>

Hojas de estilo importadas

At-Rule: @import

@import url('URL') mediaQuery;

Comentarios

/* Comentario */

Sintaxis

/* Selector */
h2 
{
	/* propiedad: valor */
	font-family: roboto;
	font-size: 1.7rem;
	text-transform: uppercase;
	color: white;
}

reset.css