Propiedades mas usada en CSS

A continuación se muestra una tabla con el resumen de las propiedades mas usadas que se pueden incluir en las hojas de estilo.

Propiedad Descripción Valores Ejemplo
Font Establece todos los sub-atributos juntos en una sola linea. Style
Variant
Weight
Size
Family
{font: Normal small-caps bold 12pt/14pt sans-serif}
Font-Style Establece el texto como letra cursiva. Normal
Italic
oblique
{font-style: italic}
Font-Variant Establece las mayusculas u minusculas del mismo tamaño Normal
Small-caps
{font-style: Small-caps}
Font-Weight Establece el peso de la fuente, pero dependen de ella. normal
bold
bolder
lighther
100 a 900
{font-weight: bold}
Font-Size Establece el tamañe texto. Absolutos, relativos (large o smaller) Absoluto (px)
Relativo (%)
{font-size: 24px}
{font-size: 10%}
Font-Family Establece el tipo de fuente. Nombre de la fuente o familia de fuente {font-family: "Comic Sans MS","Sans-Serif","Verdana"}
Line-Height Establece la distancia entre líneas. normal
Absoluto (px)
relativo (%)
{Line-Height: 24pt}
Color Establece el color del texto. Nombre del color
Transparent
valores RGBA
valor HSLA
{color: blue}
Text-Decoration Subraya o remarca el texto. None
Underline
Overline
line-through
blink
{text-decoration: underline}
Text-align Establece la alineacion del texto. Left
Center
Right
justify
{text-align: justify}
Text-Indent Establece la indentación del texto en "largo fijo" o "porcentaje" absoluto (px)
relativo (%)
{text-indent: 5px}
Text-Transform Intercambia entre mayusculas y minisculas. none
capitalize
uppercase
lowecase
{text-transform: capitalize}
Background Establece todo slos atributos de fondo. color, image, repeat, attachment y position. URL,
nombre del color
valor RGB
{background:#33CC00}
{background: red}
{background: URL(isla.gif) no-repeat}
Border Establece todas la propiedades de borde juntas. width
style
color
{border: 3px solid red}
Border-width Establece el grosor del borde de las lineas. Recuerda que si es una caja puedes establecer 4 valores. Un solo valor establece los cuatro lados iguales. Si quieres diferencias inicia arriba y sentido horario o establecer solo uno especificandolo asi: Border-right-width: 3px. Pixeles (px)
thin
medium
thick
{border-width: 3px}
Border-style Establece el estilo de la linea. Recuerda que si es una caja puedes establecer 4 valores: superior (Top), derecho (right), inferior (bottom), izquierdo (left) o establecer uno solo Border-right-style: dotted None
Hidden
Solid
dotted
dashed
double
groove
ridge
inset
outset
auto
{border-style: dotted}
Border-color Establece el color de la linea. Recuerda que si es una caja puedes establecer 4 valores. Un solo valor establece los cuatro lados iguales. Si quieres diferencias inicia arriba y sentido horario o establecer uno solo valor asi: Border-right-color: transparent nombre del color
valor RGB
RGB()
valor HSL
{border-color: #33CC00}
Border-collapse Establece si los borden estaran separados o juntos. collapse
separate
{border-collapse: collapse}
Border-spacing Establece el espacio entre bordes si estan esparados. adsoluta (px) {border-spacing: 3px}
Margin Establece todos los margenes en orden superio, derecho, abajo e izquierdo. Sentido horario. Un solo valor estable los 4 margenes iguales. Puntos (pt)
pixels (px)
centímetros (cm)
pulgadas (in)
{margin: 10px 20px 4px 20px}
Margin-top Establece el márgen superior de la pagina. Puntos (pt)
pixels (px)
centímetros (cm)
pulgadas (in)
{margin-top: 20px}
Margin-right Establece el márgen derecho de la pagina. pixels (px)
Puntos (pt)
centímetros (cm)
pulgadas (in)
{margin-right: 3cm}
Margin-botton Establece el márgen inferior de la pagina pixels (px)
Puntos (pt)
centímetros (cm)
pulgadas (in)
{margin-botton: 10pt}
Margin-left Establece el márgen izquierdo de la pagina pixels (px)
Puntos (pt)
centímetros (cm)
pulgadas (in)
{margin-left: 1in}
Padding Establece la separacion del contenido al borde. Un solo valor establece los cuatro lados iguales. Si quieres diferencias inicia arriba y sentido horario. pixels (px)
Puntos (pt)
centímetros (cm)
pulgadas (in)
{padding: 10px}
width Establece el ancho de la caja auto
"largo"
"porcentaje"
{width: 100px}
height Establece el ancho de la caja auto
"largo"
{height: 100px}
float El elemento se mueve hacia a un lado y el texto se ajustará a su lado. La propiedad "display" es ignorada. auto
left
right
none
{floar: left}
clear Esta propiedad especifica si un elemento permite elementos flotantes a sus lados. none
left
right
both
{clear: both}
vertical-align Alineacion vertical del texto. baseline
middle
sub
super
text-top
text-bottom
top
bottom
absoluto (px)
porcentaje (%)
{clear: both}