CSS Cheatsheet

HTML Cheatsheet para la clase de Construcion de Software version 1.0

Regresar a indice

Border

La propiedad border crea un contorno alrededor del elemento al cual se le especifica el tamaƱo (ancho del borde), estilo y color

Ej. borde: 5px solid orange;

Border by side

La propiedad de border tambien se puede especificar por lados utilizando border-top, border-right, border-bottom y border-left. Estos siguen la misma estructura que un border normal pero haciendo enfasis en una cara del elemento

Ej.
border-top: 12px solid green;
border-right: 5px solid blue;
border-bottom: 9px solid yellow;
border-left: 7px solid red;

Border Radius

La propiedad border-radius redondea las esquinas del elemento seleccionado acorde a una medida ya sea de pixeles, porcentaje u otra unidad

Ej. border-radius: 10px;

Color

La propiedad color establece el color de la letra dentro del elemento seleccionado

Ej. color: purple;

Font

La propiedad font esa una propiedad "shorthand" que establece diferentes parametros de la fuente del elemento seleccionado

Ej. font: italic 1em "Fira Sans", serif;

Font Family

La propiedad font-family establece la fuente o familia de fuentes que se utiliza en el elemento seleccionado

Font Style & Weight

Las propiedades font-style y font-weight establecen el estilo (normal, italica) y el peso (normal, bold) de la fuente

Ej.
font-style: italic;
font-weight: bold;

Width & Height

Las propiedad width y height modifican el ancho y el alto del elemento seleccionado por las unidades que se especifiquen

Ej.
width: 150px;
height: 225px;

List Style

La propiedad list-style es "shorthand" y modifica el estilo de una lista

Ej. list-style: url(/images/icons8-monkas-48.png) inside;

Margin

La propiedad margin establece el margen del elemento seleccionado, esto es el espacio que se genera del elemento hacia afuera

Ej. margin: 100px;

Padding

La propiedad padding establece el padding del elemento seleccionado, esto es el espacio que se genera del elemento hacia adentro

Ej. padding: 60px;

Overflow

La propiedad overflow establece el comportamiento del contenido que genere overflow (que se salga de su caja)

Ej. overflow: scroll;

Display

La propiedad display establece si el elemento se ha de tratar comom bloque o como inline

Ej. display: flex;

Position

La propiedad position establece la posicion del elemento seleccionado en el documento determinado por valores de top, right, bottom, left

Ej. position: relative;
top: 15px; left: 60px; bottom: 20px; right: 10px;

Filter

La propiedad filter apica efectos graficos al elemento selecionado como blur, color shift, grayscale, etc

Ej. filter: invert();