CSS Cheat Sheet

Border

Define un borde alrededor de un elemento, tiene diferentes propiedades.

Aquí hay un ejemplo de boarder obtenido de una imagen.

Aquí hay un ejemplo de boarder básico.

border-left, border-right, border-top, border-bottom

Definición de boarder-

Border-radius

Redondea los bordes de un elemento.

ejemplo 1 de un border radius
ejemplo 2 de un border radius

Background image

Agrega una imagen seleccionada de fondo del elemento.

Aquí hay una imagen de fondo que cubre todo lo que escribo

Background clip

Determina el fondo de una manera estética y el área que debe cubrir.

EJEMPLO, se usa una imagen como fondo pero solo se ve a través de las letras

Color

Cambia el color dentro del texto contenido en un elemento.

Ejemplo

Font

Elige una font en específico.

Ejemplo de otra font conocida como "Fira Sans"

Font Family

Contiene una lista de familias de tipografías para el documento.

Ejemplo de font family

Font-style y font-weight

Width y Height

Definen el ancho y la altura de un elemento.

Ejemplo, se usa un color para ver el espacio

List style

Define el tipo de bullets a usar en una lista.

Margin

Establece el espacio al rededor de los elementos, cuatro lados a la vez, o uno por uno.

Ejemplo centrado
Ejemplo margin left

Padding

Crea espacio alrededor del elemento deseado.

Ejemplo de padding en esta div

Overflow

Especifica si el elemento debe ser recortado en base a una área, en lo cual se le agregan scrolls o hasta dónde recortarlo.

Ejemplo_Overflow tipo auto: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora vel expedita sed doloremque officiis! Quia doloribus eum, adipisci, accusamus odio iusto alias illo dolorem voluptas inventore vel architecto nisi? Voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi reprehenderit aut tenetur quasi quidem consequatur, ducimus magnam recusandae nostrum, dolore cupiditate magni illo molestias aperiam iure atque aspernatur, incidunt neque!

Display

Especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible)

ejemplo de

tipo grid

Position

Especifica el tipo de posicionamiento, valga la redundancia de un elemento.

ejemplo 1, static

ejemplo 2 absolute

Filter

Modifica una imagen visualmente.

imagen CSS

Referencias