CSS 2.1

Las Hojas de Estilo en Cascada (CSS) son un mecanismo simple para agregar estilo a los documentos web.

Su uso es simple, solo debe crearse un documento con extension .css, llamarle desde el documento html con la etiqueta <link rel="stylesheet" type="text/css" href="style.css" /> (Donde style.css es el nombre del documento), y en este documento, elegirse la etiqueta a la que se desea aplicar las propiedades, y enlistarlas a continuación separadas por un punto y coma (;).

Hay tres formas de elegir la etiqueta a la que serán modificadas sus propiedades:

Directo a la etiqueta. Se escribe el nombre de la etiqueta y a continuación sus propiedades. Esto afecta a todas las etiquetas del mismo tipo. Ejemplo:
```
body{color:#333;background:#ccc}
```
Por identificador. Se escribe el nombre del identificador precedido por un numeral (#), y a continuación sus propiedades. Esto afecta al contenido de la etiqueta que tiene el identificador único. Ejemplo:
```
#menu{color:#00f}
```
Por clase. Se escribe el nombre de la clase precedido por un punto (.), y a continuación sus propiedades. Esto afecta al contenido de las etiquetas que tengan dicha clase. Ejemplo:
```
.importante{color:#f00}
```

Propiedades para los estilos:

Color y Fondo

color: Indica el color de la letra.
background: [background-color, background-image, background-repeat, background-position, background-attachment]: Indica las propiedades de fondo.

Fuentes y texto

font: [font-style, font-variant, font-weight, font-size, line-height, font-family]: Indica las propiedades del tipo de letra.
letter-spacing: Indica el espacio entre letras.
word-spacing: Indica el espacio entre las palabras.
text-align: Indica la alineación del texto.
text-decoration: Indica la decoración del texto.
text-indent: Indica el tamaño de la indentación de la primer línea de un texto.
text-transform: Indica como manejar las mayúsculas y minúsculas del texto.
vertical-align: Indica la alineación vertical del texto.
white-space: Indica como deben manejarse los espacios.

Modelo de cajas

border: [border-width, border-style, border-color] Indica las propiedades del borde interior.
outline: [outline-width, outline-style, outline-color]: Indica las propiedades de la línea exterior.
margin: Indica el margen exterior de la caja.
padding: Indica el margen interior de la caja.
width: Indica el ancho de la caja.
height: Indica el alto de la caja.
min-width: Indica el ancho mínimo de la caja.
max-width: Indica el ancho máximo de la caja.
min-height: Indica el alto mínimo de la caja.
max-height: Indica el alto máximo de la caja.

Posición y despliegue

positon: Indica la forma de calcular la posición de la etiqueta.
top: Indica la distancia desde encima de la caja.
right: Indica la distancia desde la derecha de la caja.
bottom: Indica la distancia desde el fondo de la caja.
left: Indica la distancia desde la izquierda de la caja.
clip: Indica el area visible de una caja en posición absoluta.
overflow: Indica que se hará con el sobreflujo de la caja.
z-index: Indica la posición de la caja en el eje z.
float: Indica si una caja deberá ser flotante con respecto a los demás objetos a la izquierda o la derecha.
clear: Indica como una caja debe mostrarse tras una caja flotante.
display: Indica como una caja debe ser desplegada.
visibility: Indica si una caja debe ser visible o no.

Listas

list-style: [list-style-type, list-style-position, list-style-image] Indica las propiedades de estilo de las listas.

Tablas

table-layout: Indica el algoritmo que será usado para mostrar una tabla de ancho fijo.
border-collapse: Indica que modelo de borde que se usará en las celdas de la tabla.
border-spacing: Indica el espacio entre celdas.
empty-cells: Indica que hacer con las celdas vacias.
caption-side: Indica en que lado de la tabla aparecerá el caption de la tabla.

Contenido generado

content
counter-increment
counter-reset
quotes

Medio parginado

page-break-before
page-break-after
page-break-inside
orphans
widows

Miscelaneos

cursor
direction
unicode-bidi