Hoja de referencia de estilos CSS

CSS (Cascading Style Sheets) se utiliza para controlar el diseño y el estilo de las páginas web. Esta hoja de referencia cubre las propiedades y selectores más utilizados.

Selectores

Tipo	Ejemplo	Descripción
All	`* { }`	Coincidir con todos los elementos
Type	`h1 { }`	Coincidir con una etiqueta HTML específica
Class	`.header { }`	Coincidir con elementos con class=“header”
ID	`#main { }`	Coincidir con elemento con id=“main”
Descendant	`div p { }`	Coincidir con todos los p dentro de div
Pseudo	`a:hover { }`	Estado al pasar el ratón

Modelo de Caja

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Espaciado interno */
  border: 1px solid #ccc; /* Borde */
  margin: 20px;     /* Espaciado externo */
  box-sizing: border-box; /* Incluye borde y relleno */
}

Tipografía

Property	Descripción	Ejemplo
`font-family`	Familia de fuentes	`font-family: Arial, sans-serif;`
`font-size`	Tamaño de fuente	`font-size: 16px;`
`font-weight`	Grosor de fuente	`font-weight: bold;`
`text-align`	Alineación de texto	`text-align: center;`
`line-height`	Altura de línea	`line-height: 1.5;`
`color`	Color de fuente	`color: #333;`

Colores y Fondos

Property	Descripción	Ejemplo
`background-color`	Color de fondo	`background-color: #f0f0f0;`
`background-image`	Imagen de fondo	`background-image: url('bg.jpg');`
`background-size`	Tamaño de fondo	`background-size: cover;`
`opacity`	Opacidad	`opacity: 0.8;`

Posicionamiento

position: static; : Diseño de flujo predeterminado
position: relative; : Desplazamiento relativo a su posición original
position: absolute; : Posición relativa al ancestro no estático más cercano
position: fixed; : Posición relativa a la ventana del navegador
position: sticky; : Fijo al desplazarse a una posición específica
z-index: 10; : Controlar el orden de apilamiento

Visualización y Diseño

display: block; : Elemento de bloque
display: inline; : Elemento en línea
display: inline-block; : Elemento en línea-bloque
display: flex; : Activar diseño flex
display: grid; : Activar diseño grid
display: none; : Ocultar elemento sin ocupar espacio

Propiedades Abreviadas

margin: 10px 5px 15px 20px; (Arriba Derecha Abajo Izquierda)
padding: 10px 5px; (Arriba-Abajo Izquierda-Derecha)
border: 1px dashed red; (Ancho Estilo Color)