CSS: Propiedades (lista)

Las propiedades CSS permiten controlar la apariencia y el comportamiento de los elementos HTML. Gracias a ellas es posible aplicar estilos CSS para diseñar páginas web. Por ejemplo, puede modificarse el color de un texto, añadir bordes a una imagen, o cambiar el tamaño de una sección.

A continuación se muestra una tabla con todas las propiedades clasificadas según el contexto de uso, y se acompaña cada propiedad con la versión de CSS en la que se introdujo y una descripción resumida.

Es importante mencionar que el nivel 2.1 de CSS (oficial) define un total de 115 propiedades, y 21 de las cuales quedaron obsoletas. Las que fueron publicadas en CSS3 podrían tener un soporte parcial o limitado en algunos navegadores web; se recomienda usarlas con precaución.

Relleno

Propiedad	Nivel	Descripción
padding-top	1	Espacio de relleno interior por arriba.
padding-right	1	Espacio de relleno interior por la derecha
padding-bottom	1	Espacio de relleno interior por abajo.
padding-left	1	Espacio de relleno interior por la izquierda.
padding	1	Abreviatura de espacio de relleno.

Márgenes

Propiedad	Nivel	Descripción
margin-top	1	Margen exterior en la parte superior de la caja.
margin-right	1	Margen exterior en la parte derecha de la caja.
margin-bottom	1	Margen exterior en la parte inferior de la caja.
margin-left	1	Margen exterior en la parte izquierda de la caja.
margin	1	Abreviatura de tamaño de margen.

Bordes

Propiedad	Nivel	Descripción
border-top-width	1	Define el ancho del borde de arriba.
border-right-width	1	Define el ancho del borde de la derecha.
border-bottom-width	1	Define el ancho del borde de abajo.
border-left-width	1	Define el ancho del borde de la izquierda.
border-width	1	Abreviatura del ancho de los cuatro bordes.
border-top-style	1	Define el estilo del borde de arriba.
border-right-style	1	Define el estilo del borde de la derecha.
border-bottom-style	1	Define el estilo del borde de abajo.
border-left-style	1	Define el estilo del borde de la izquierda.
border-style	1	Abreviatura del estilo de los cuatro bordes.
border-top-color	1	Define el color del borde de arriba.
border-right-color	1	Define el color del borde de la derecha.
border-bottom-color	1	Define el color del borde de abajo.
border-left-color	1	Define el color del borde de la izquierda.
border-color	1	Abreviatura del color de los cuatro bordes.
border-top	1	Abreviatura del borde de arriba.
border-right	1	Abreviatura del borde de la derecha.
border-bottom	1	Abreviatura del borde de abajo.
border-left	1	Abreviatura del borde de la izquierda.
border	1	Abreviatura de los cuatro bordes.

Esquinas

Propiedad	Nivel	Descripción
border-top-left-radius	3	Esquina superior izquierda.
border-top-right-radius	3	Esquina superior derecha.
border-bottom-left-radius	3	Esquina inferior izquierda.
border-bottom-right-radius	3	Esquina inferior derecha.
border-radius	3	Abreviatura de las esquinas.

Dimensiones

Propiedad	Nivel	Descripción
width	1	Define el ancho de un elemento.
height	1	Define el alto de un elemento.
max-width	2	Define el ancho máximo de un elemento.
min-width	2	Define el ancho mínimo de un elemento.
max-height	2	Define el alto máximo de un elemento.
min-height	2	Define el alto mínimo de un elemento.

Posiciones

Propiedad	Nivel	Descripción
float	1	Indica el lado en el que debe flotar un elemento.
clear	1	Interrumpe (limpia) la flotación de un elemento.
position	2	Indica el tipo de posición de un elemento.
top	2	Posiciona un elemento desde arriba.
right	2	Posiciona un elemento desde la derecha.
bottom	2	Posiciona un elemento desde abajo.
left	2	Posiciona un elemento desde la izquierda.
z-index	2	Indica el nivel de profundidad de un elemento.

Visualización

Propiedad	Nivel	Descripción
display	1	Controla la forma de visualización de un elemento.
visibility	2	Indica la visibilidad de un elemento.
opacity	3	Define la transparencia de un elemento.

Desbordamiento

Propiedad	Nivel	Descripción
overflow	2	Define el desbordamiento del contenido.
overflow-x	3	Define el desbordamiento horizontal.
overflow-y	3	Define el desbordamiento vertical.
overflow-wrap	3	Rompe palabras si desbordan.

Contornos

Propiedad	Nivel	Descripción
outline-color	2	Define el color de un contorno.
outline-style	2	Define el estilo de un contorno.
outline-width	2	Define el grosor de un contorno.
outline	2	Abreviatura para definir un contorno.
outline-offset	3	Define el desplazamiento de un contorno.

Fondos

Propiedad	Nivel	Descripción
background-color	1	Define el color de fondo.
background-image	1	Define la imagen de fondo.
background-repeat	1	Repetición de la imagen de fondo.
background-attachment	1	Desplazamiento de la imagen de fondo.
background-position	1	Posicionamiento de la imagen de fondo.
background	1	Abreviatura de la imagen de fondo.

Fuentes

Propiedad	Nivel	Descripción
font-family	1	Define la familia de la fuente.
font-size	1	Define el tamaño de la fuente.
font-style	1	Define el estilo de la fuente.
font-variant	1	Define la variante de la fuente.
font-weight	1	Define el grosor de la fuente.
font	1	Abreviatura para definir la fuente.

Texto

Propiedad	Nivel	Descripción
color	1	Define el color del texto.
line-height	1	Define el alto de la linea del texto.
word-spacing	1	Define el espaciado entre palabras.
letter-spacing	1	Define el espaciado entre letras.
text-align	1	Alinea el texto horizontalmente.
vertical-align	1	Alinea el texto verticalmente.
text-decoration	1	Define la decoración del texto.
text-transform	1	Transforma entre mayúsculas y minúsculas.
text-indent	1	Indica el sangrado del texto.
white-space	1	Indica el tratamiento del espacio en blanco.

Listas

Propiedad	Nivel	Descripción
list-style-type	1	Define el tipo de estilo de una lista.
list-style-position	1	Define la posición de estilo de una lista.
list-style-image	1	Define la imagen de estilo de una lista.
list-style	1	Abreviatura para definir el estilo de una lista.

Tablas

Propiedad	Nivel	Descripción
border-collapse	2	Fusiona los bordes de una tabla.
border-spacing	2	Distancia entre bordes de celdas vecinas.
empty-cells	2	Esconde los bordes de una celda vacía.
caption-side	2	Posiciona el elemento <caption> en una tabla.
table-layout	2	Indica el tipo de representación de una tabla.

Medios paginados

Propiedad	Nivel	Descripción
page-break-after	2	Indica el salto de página después del elemento.
page-break-before	2	Indica el salto de página antes del elemento.
page-break-inside	2	Evita cortar elementos en un salto de página.
orphans	2	Número de líneas permitidas antes del salto.
widows	2	Número de líneas permitidas después del salto.

Otras propiedades

Propiedad	Nivel	Descripción
quotes	2	Define el símbolo de las citaciones.
content	2	Define el contenido en pseudoelementos.
counter-reset	2	Crea o reinicia un contador CSS.
counter-increment	2	Incrementa o reduce un contador CSS.
cursor	2	Especifica el cursor que se debe mostrar.
direction	2	Indica la dirección en que fluye el texto.
unicode-bidi	2	Controla el texto bidireccional.

Propiedades obsoletas

Existen 21 propiedades publicadas en el nivel 2.1 de CSS que quedaron obsoletas. Se trata de 20 propiedades relacionadas con el tipo de medio «aural»: azimuth, cue-after, cue-before, cue, elevation, pause-after, pause-before, pause, pitch-range, pitch, play-during, richness, speak-header, speak-numeral, speak-punctuation, speak, speech-rate, stress, voice-family, volume. La otra propiedad que quedó obsoleta es clip, referente a la porción visible de un elemento.