1. Para qué sirve?
1.1. Complemetar a HTML
1.1.1. Con Visualización moderna
1.1.2. Estilos visuales
1.2. Aplicar estilo visual
1.2.1. Elemetos generales
1.2.2. Elementos individuales
2. Qué tipos de selectores existen?
2.1. * : UNIVERSAL
2.1.1. Afecta a todos los elementos de la página web.
2.1.1.1. ejemplo: * { padding : 20px }
2.2. Por tipo
2.2.1. Se aplica a un tipo de Tag o etiqueta HTML.
2.2.1.1. ejemplo: h1 { color : red; }
2.3. Por clases
2.3.1. Se le asigna una clase a una etiqueta o elemento dentro de la página y sólo a este se le apolica el estilo.
2.3.1.1. ejemplo: <h1 class ="clase".... en CSS: .clase{ color : green }
2.4. Por id
2.4.1. Se le asigna un id a una etiqueta o elemento dentro de la página y sólo a este se le apolica el estilo.
2.4.1.1. ejemplo: <h1 id ="id".... en CSS: #id{ color : green }
3. Estructutura CSS
3.1. SELECTOR { PROPIEDAD : VALOR }
3.1.1. EJEMPLO: * { color : blue; }
4. Modelo de cajas
4.1. Márgenes (margin)
4.1.1. margin margin - top margin - bottom margin - left margin - right
4.1.1.1. ancho de los margenes tamaño margen superior tamaño margen inferior tamaño margen izquierdo tamaño margen derecho
4.1.1.1.1. medidas: longitud (px) / porcentaje (%) / auto
4.2. Bordes (border)
4.2.1. border
4.2.1.1. estilo, ancho y color del borde. Puede complementarse con: top, bottom, left, right
4.2.2. border-radius
4.2.2.1. curvatura de borde
4.2.3. border-style
4.2.3.1. estilo del borde. Puede modificar los bordes: top, bottom, left, right
4.2.4. border-color
4.2.4.1. color del borde. Puede modificar los bordes: top, bottom, left, right
4.2.5. border-width
4.2.5.1. ancho del borde. Puede modificar los bordes: top, bottom, left, right
4.3. Padding o relleno
4.3.1. padding padding-top padding-right padding-bottom padding-left
4.3.1.1. tamaño del relleno Tamaño del relleno superior, derecho, inferior e izquierdo