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. |
box-sizing | 3 | Controla el cálculo del tamaño de un elemento. |
resize | 3 | Permite al usuario redimensionar 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. |
z-index | 2 | Indica el nivel de profundidad 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. |
inset | 3 | Abreviatura de posición (cuatro lados). |
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 | Evita que el texto desborde de la caja. |
word-break | 3 | Rompe las palabras que desbordan. |
hyphens | 3 | Indica el tipo de separación silábica. |
text-overflow | 3 | Indica que hay texto invisible que se desborda. |
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-stretch | 2 | Define la anchura de la fuente. |
line-height | 1 | Define el alto de la linea del texto. |
font | 1 | Abreviatura para definir la fuente. |
Texto
| Propiedad | Nivel | Descripción |
|---|---|---|
color | 1 | Define el color 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. |
tab-size | 3 | Indica la longitud del tabulador en código. |
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. |
Contenido generado
| Propiedad | Nivel | Descripción |
|---|---|---|
content | 2 | Define el contenido en pseudoelementos. |
counter-increment | 2 | Incrementa o reduce un contador. |
counter-reset | 2 | Reinicia un contador con incremento. |
counter-set | 2 | Reinicia un contador sin incremento. |
quotes | 2 | Define el símbolo de las citaciones. |
cursor | 2 | Especifica el cursor que se debe mostrar. |
Dirección del texto
| Propiedad | Nivel | Descripción |
|---|---|---|
direction | 2 | Indica la dirección en que fluye el texto. |
unicode-bidi | 2 | Controla el texto bidireccional. |
writing-mode | 3 | Indica la disposición del texto. |
text-orientation | 3 | Orienta el texto dentro de la línea. |
Imágenes
| Propiedad | Nivel | Descripción |
|---|---|---|
image-orientation | 3 | Indica la orientación de una imagen. |
image-rendering | 3 | Indica la representación de una imagen. |
filter | 3 | Aplica efectos gráficos a una imagen. |
Objetos
| Propiedad | Nivel | Descripción |
|---|---|---|
object-fit | 3 | Dimensiona el contenido en la caja. |
object-position | 3 | Posiciona el contenido en la caja. |
aspect-ratio | 3 | Indica la relación de aspecto de un objeto. |
Modos de fusión
| Propiedad | Nivel | Descripción |
|---|---|---|
mix-blend-mode | 3 | Aplica un modo de fusión entre elementos. |
background-blend-mode | 3 | Aplica un modo de fusión entre fondos. |
isolation | 3 | Indica si se debe aislar el elemento. |
Sombras
| Propiedad | Nivel | Descripción |
|---|---|---|
box-shadow | 3 | Agrega sombra a la caja. |
text-shadow | 3 | Agrega sombra al texto. |
Cajas flexibles (flexbox)
| Propiedad | Nivel | Descripción |
|---|---|---|
flex-direction | 3 | Indica la dirección de los ítems. |
flex-wrap | 3 | Indica el desbordamiento de los ítems. |
flex-flow | 3 | Abreviatura para la dirección y el desborde. |
flex-basis | 3 | Establece el tamaño inicial de los ítems. |
flex-grow | 3 | Indica el factor de crecimiento de los ítems. |
flex-shrink | 3 | Indica el factor de decrecimiento de los ítems. |
flex | 3 | Abreviatura de las tres anteriores. |
Cuadrículas (grid)
| Propiedad | Nivel | Descripción |
|---|---|---|
grid-template-rows | 3 | Define las filas explícitas. |
grid-template-columns | 3 | Define las columnas explícitas. |
grid-template-areas | 3 | Indica la disposición de las áreas. |
grid-template | 3 | Abreviatura de las tres anteriores. |
grid-area | 3 | Indica el nombre del área. |
grid-auto-rows | 3 | Indica el tamaño de las filas implícitas. |
grid-auto-columns | 3 | Indica el tamaño de las columnas implícitas. |
grid-auto-flow | 3 | Algoritmo de colocación automática. |
grid-column-start | 3 | Indica la columna de inicio de la celda. |
grid-column-end | 3 | Indica la columna de final de la celda. |
grid-column | 3 | Abreviatura para el eje de las columnas. |
grid-row-start | 3 | Indica la fila de inicio de la celda. |
grid-row-end | 3 | Indica la fila de final de la celda. |
grid-row | 3 | Abreviatura para el eje de las filas. |
grid | 3 | Abreviatura que unifica varias propiedades. |
Columnas
| Propiedad | Nivel | Descripción |
|---|---|---|
column-count | 3 | Indica el número de columnas. |
column-width | 3 | Indica el ancho ideal de las columnas. |
columns | 3 | Abreviatura para definir columnas y su anchura. |
column-rule-style | 3 | Define el estilo de la regla de columnas. |
column-rule-color | 3 | Define el color de la regla de columnas. |
column-rule-width | 3 | Define el grosor de la regla de columnas. |
column-rule | 3 | Abreviatura para definir reglas de columnas. |
column-span | 3 | Extiende elementos por encima de las columnas. |
column-fill | 3 | Controla el reparto del contenido entre columnas. |
Separación y orden
| Propiedad | Nivel | Descripción |
|---|---|---|
column-gap | 3 | Indica la separación entre columnas. |
row-gap | 3 | Indica la separación entre filas. |
gap | 3 | Abreviatura de las dos anteriores. |
order | 3 | Establece el orden de cada ítem. |
Alineación
| Propiedad | Nivel | Descripción |
|---|---|---|
justify-content | 3 | Alineación horizontal del contenedor. |
align-content | 3 | Alineación vertical del contenedor. |
place-content | 3 | Alineación en dos ejes del contenedor. |
justify-items | 3 | Alineación horizontal dentro de los ítems. |
align-items | 3 | Alineación vertical dentro de los ítems. |
place-items | 3 | Alineación en dos ejes dentro de los ítems. |
justify-self | 3 | Alineación horizontal de un ítem específico. |
align-self | 3 | Alineación vertical de un ítem específico. |
place-self | 3 | Alineación en dos ejes de un ítem específico. |
Transformaciones
| Propiedad | Nivel | Descripción |
|---|---|---|
transform | 3 | Realiza transformaciones de elementos. |
transform-origin | 3 | Cambia el origen de las transformaciones. |
transform-style | 3 | Modifica el tipo de transformación (2D o 3D). |
translate | 3 | Aplica una transformación de traslación. |
rotate | 3 | Aplica una transformación de rotación. |
scale | 3 | Aplica una transformación de escalado. |
perspective | 3 | Indica la distancia del punto de fuga. |
perspective-origin | 3 | Indica la posición del punto de fuga. |
backface-visibility | 3 | Oculta o muestra la cara posterior. |
Transiciones
| Propiedad | Nivel | Descripción |
|---|---|---|
transition-property | 3 | Indica las propiedades a animar. |
transition-duration | 3 | Indica la duración de la animación. |
transition-timing-function | 3 | Indica la función de animación. |
transition-delay | 3 | Indica el tiempo de espera. |
transition | 3 | Abreviatura de todas las anteriores. |
Animaciones
| Propiedad | Nivel | Descripción |
|---|---|---|
animation-name | 3 | Indica el nombre de la animación. |
animation-duration | 3 | Indica la duración de la animación. |
animation-timing-function | 3 | Indica la función de animación. |
animation-delay | 3 | Indica el tiempo de espera. |
animation-iteration-count | 3 | Indica las veces que se repetirá. |
animation-direction | 3 | Indica la dirección de la animación. |
animation-fill-mode | 3 | Controla la aplicación de estilos. |
animation-play-state | 3 | Indica el estado de la animación. |
animation-composition | 3 | Mezcla varias animaciones. |
animation | 3 | Abreviatura de todas las anteriores. |
Trayectos
| Propiedad | Nivel | Descripción |
|---|---|---|
offset-path | 3 | Indica el trayecto o camino. |
offset-position | 3 | Indica la posición inicial. |
offset-distance | 3 | Indica la distancia que debe recorrer. |
offset-rotate | 3 | Indica la rotación/orientación del elemento. |
offset-anchor | 3 | Indica el punto de origen del elemento. |
offset | 3 | Abreviatura para crear trayectos animados. |
Modelado
| Propiedad | Nivel | Descripción |
|---|---|---|
clip-path | 3 | Recorta el área visible de un elemento. |
shape-outside | 3 | Ajusta el texto a una forma geométrica. |
shape-margin | 3 | Indica el margen entre el texto y la figura. |
shape-image-threshold | 3 | Indica el umbral del canal alfa. |
Máscaras
| Propiedad | Nivel | Descripción |
|---|---|---|
mask-image | 3 | Indica una imagen de máscara. |
mask-mode | 3 | Indica si usar el canal alfa o de luz. |
mask-repeat | 3 | Indica la repetición de la máscara. |
mask-position | 3 | Indica la posición de la máscara. |
mask-origin | 3 | Indica el origen de la máscara. |
mask-clip | 3 | Indica el tipo de recorte de la máscara. |
mask-size | 3 | Especifica el tamaño de la máscara. |
mask-composite | 3 | Composición de múltiples máscaras. |
mask | 3 | Abreviatura para definir máscaras. |
Desplazamiento
| Propiedad | Nivel | Descripción |
|---|---|---|
scroll-behavior | 3 | Crea un desplazamiento suave. |
scroll-snap-type | 3 | Indica la tipología de los puntos de ajuste. |
scroll-snap-align | 3 | Indica la posición de los puntos de ajuste. |
scroll-snap-stop | 3 | Indica si debe desplazarse o detenerse. |
Márgenes en el desplazamiento
| Propiedad | Nivel | Descripción |
|---|---|---|
scroll-margin-top | 3 | Margen superior al desplazarse. |
scroll-margin-right | 3 | Margen derecho al desplazarse. |
scroll-margin-bottom | 3 | Margen inferior al desplazarse. |
scroll-margin-left | 3 | Margen izquierdo al desplazarse. |
scroll-margin | 3 | Abreviatura de margen al desplazarse. |
scroll-margin-block-end | 3 | Margen vertical al final. |
scroll-margin-block-start | 3 | Margen vertical al inicio. |
scroll-margin-block | 3 | Abreviatura de margen en bloque. |
scroll-margin-inline-end | 3 | Margen horizontal al final. |
scroll-margin-inline-start | 3 | Margen horizontal al inicio. |
scroll-margin-inline | 3 | Abreviatura de margen en línea. |
Relleno en el desplazamiento
| Propiedad | Nivel | Descripción |
|---|---|---|
scroll-padding-top | 3 | Relleno superior al desplazarse. |
scroll-padding-right | 3 | Relleno derecho al desplazarse. |
scroll-padding-bottom | 3 | Relleno inferior al desplazarse. |
scroll-padding-left | 3 | Relleno izquierdo al desplazarse. |
scroll-padding | 3 | Abreviatura de relleno al desplazarse. |
scroll-padding-block-end | 3 | Relleno vertical al final. |
scroll-padding-block-start | 3 | Relleno vertical al inicio. |
scroll-padding-block | 3 | Abreviatura de relleno en bloque. |
scroll-padding-inline-end | 3 | Relleno horizontal al final. |
scroll-padding-inline-start | 3 | Relleno horizontal al inicio. |
scroll-padding-inline | 3 | Abreviatura de relleno en línea. |
Impresión (medios paginados)
| Propiedad | Nivel | Descripción |
|---|---|---|
break-after | 3 | Indica el salto de página después del elemento. |
break-before | 3 | Indica el salto de página antes del elemento. |
break-inside | 3 | Evita cortar elementos en un salto de página. |
orphans | 3 | Número de líneas permitidas antes del salto. |
widows | 3 | Número de líneas permitidas después del salto. |
Contenedores
| Propiedad | Nivel | Descripción |
|---|---|---|
container-name | 3 | Especifica el nombre del contenedor. |
container-type | 3 | Indica el tipo de tamaño del contenedor. |
container | 3 | Abreviatura para definir contenedores. |
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.
