Fundamentos de CSS

1. User Agent Stylesheet

Los navegadores aplican estilos por defecto a los elementos HTML.

                    /* Eliminar estilos por defecto */
button {
    all: unset;
    /* Nuevos estilos */
    padding: 0.5rem 1rem;
    background: blue;
    color: white;
}
                

2. Selectores CSS

Selector de clase (.clase)

Selector de ID (#identificador)

Selector de atributo ([data-tipo="especial"])

                    /* Selectores básicos */
p { } /* Elemento */
.clase { } /* Clase */
#id { } /* ID */
[attr] { } /* Atributo */
                

3. Cascada y Carga de Estilos

Orden de importancia en CSS:

!important
Estilos en línea
Estilos internos y externos (según orden)
Estilos del navegador

                    /* Orden de carga */
@import url('estilos.css');
<link rel="stylesheet" href="estilos.css">
<style>/* Estilos internos */</style>
style="/* Estilos en línea */"
                

4. Especificidad CSS

Estilos en línea

1000

ID

100

Clase

Elemento

                    /* Ejemplos de especificidad */
p {} /* 0,0,0,1 */
.clase {} /* 0,0,1,0 */
#id {} /* 0,1,0,0 */
style="" /* 1,0,0,0 */
                

5. Herencia en CSS

Este texto hereda color y font-family

Este también hereda las mismas propiedades

                    /* Propiedades que se heredan */
color
font-family
font-size
line-height

/* Forzar herencia */
border: inherit;
margin: inherit;
                

6. Box Model

Margin Border Padding Content

                    .elemento {
    /* Content */
    width: 200px;
    height: 100px;
    
    /* Padding */
    padding: 20px;
    
    /* Border */
    border: 2px solid black;
    
    /* Margin */
    margin: 20px;
}
                

Posicionamiento CSS

Diferentes tipos de posicionamiento en CSS.

Position: Static (Default)

Static

position: static; /* Posicionamiento normal en el flujo del documento */

Position: Relative

Relative

                        position: relative;
top: 20px;
left: 20px; /* Se mueve desde su posición original */
                    

Position: Absolute

Absolute

                        position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centrado absoluto */
                    

Position: Fixed

Fixed

                        position: fixed;
bottom: 20px;
right: 20px; /* Fijo respecto a la ventana */
                    

Unidades CSS

Unidades Absolutas

200px (Píxeles)

width: 200px; /* Tamaño fijo en píxeles */

Unidades Relativas

50% (Porcentaje del contenedor)

50vw (Viewport Width)

20rem (Relativo al font-size del root)

                        /* Unidades relativas */
.percent { width: 50%; }  /* Relativo al contenedor */
.vw { width: 50vw; }     /* Relativo al viewport */
.rem { width: 20rem; }   /* Relativo al font-size root */
                    

7. Flexbox

Item 1

Item 2

Item 3

                    .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex: 1;
}
                

8. Grid

                    .contenedor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
                