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. Cómo se integra a HTML?
2.1. como archivo externo
2.1.1. <head> <link rel="stylesheet" href="estilos.css"> </head> <body> <p>Párrafo en color azul </p> </body>
2.2. como atributo (en línea)
2.2.1. ejemplo:<p style ="color : red;">Párrafo en color rojo</p>
2.3. Incrustado en la cabecera
2.3.1. ejemplo: <head> <style> p { color : green } </style></head> <body> <p>Párrafo en color vede</p> </body>
3. Qué puedo modificar?
3.1. Color
3.1.1. RGB
3.1.1.1. ejemplo: rgb(1,1,1}9
3.1.2. hexadecimal
3.1.2.1. ejemplo: #FFFFFF
4. Qué tipos de selectores existen?
4.1. * : UNIVERSAL
4.1.1. Afecta a todos los elementos de la página web.
4.1.1.1. ejemplo: * { padding : 20px }
4.2. Por tipo
4.2.1. Se aplica a un tipo de Tag o etiqueta HTML.
4.2.1.1. ejemplo: h1 { color : red; }
4.3. Por clases
4.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.
4.3.1.1. ejemplo: <h1 class ="clase".... en CSS: .clase{ color : green }
4.4. Por id
4.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.
4.4.1.1. ejemplo: <h1 id ="id".... en CSS: #id{ color : green }
5. Estructutura CSS
5.1. SELECTOR { PROPIEDAD : VALOR }
5.1.1. EJEMPLO: * { color : blue; }
6. Modelo de cajas
6.1. Márgenes (margin)
6.1.1. margin margin - top margin - bottom margin - left margin - right
6.1.1.1. ancho de los margenes tamaño margen superior tamaño margen inferior tamaño margen izquierdo tamaño margen derecho
6.1.1.1.1. medidas: longitud (px) / porcentaje (%) / auto
6.2. Bordes (border)
6.2.1. border
6.2.1.1. estilo, ancho y color del borde. Puede complementarse con: top, bottom, left, right
6.2.2. border-radius
6.2.2.1. curvatura de borde
6.2.3. border-style
6.2.3.1. estilo del borde. Puede modificar los bordes: top, bottom, left, right
6.2.4. border-color
6.2.4.1. color del borde. Puede modificar los bordes: top, bottom, left, right
6.2.5. border-width
6.2.5.1. ancho del borde. Puede modificar los bordes: top, bottom, left, right
6.3. Padding o relleno
6.3.1. padding padding-top padding-right padding-bottom padding-left
6.3.1.1. tamaño del relleno Tamaño del relleno superior, derecho, inferior e izquierdo