QUÉ ES CSS

CSS es la abreviatura para Casding Style Sheets (hojas de estilo en cascada). CSS es un lenguaje de marcas que permite definir el diseño y presentación de una página web, funciona junto con
HTML que se encarga de la estructura y del contenido de la página. Tener conocimientos de CSS es indispensable hoy en día a la hora de diseñar un sitio web.

PARA QUÉ SIRVE CSS

Con CSS puedes crear una serie de reglas que le indican a tu estructura HTML cómo se debe mostrar la información. Los estilos CSS se pueden definir en tres ámbitos distintos:

 Definición en línea: Los estilos se definen en la propia estructura HTML.

 Hoja de estilos interna: Los estilos se definen en la propia página utilizando la etiqueta <style>.

 Hoja de estilos externa: Los estilos CSS se definen en un archivo externo con la extensión .css, es la forma más recomendable.

LISTADO COMPLETO DE PROPIEDADES CSS

La siguiente sección contiene una tabla completa con las propiedades CSS que existen junto con una breve descripción y los valores que admite cada propiedad.

Propiedad Descripción Valores admitidos

flexbox align-content: flex-start | flex-end | center |

Especifica la alineación predeterminada de los elementos dentro del space-between | space-around | stretch;
align-content
contenedor flexible cuando dichos elementos ocupan más de una linea. grid align-content: start | end | center | space-between |
space-around | stretch | space-evenly

flexbox align-items: flex-start | flex-end | center | baseline

Especifica la alineación predeterminada de los elementos dentro del
align-items | stretch;
contenedor flexible cuando dichos elementos ocupan una sola linea.
grid align-items: start | end | center | baseline | stretch;

flexbox align-self: flex-start | flex-end | center | baseline |

Especifica la alineación de los elementos seleccionados dentro del
align-self stretch;
contenedor flexible.
grid align-self: start | end | center | stretch

all Establece el valor de todas las propiedades del elemento seleccionado. initial | inherit | unset

nombre duración retardo número-de-iteraciones dirección

animation Especifica las animaciones basadas en keyframes.
estado-de-la-animación
Propiedad Descripción Valores admitidos

Define el número de segundos (s) o milisegundos (ms) a esperar antes de

animation-delay time | initial | inherit;
que comience la animación

Define si una animación debe reproducirse hacia adelante, hacia atrás o en normal | reverse | alternate | alternate-reverse | initial |
animation-direction
ciclos alternos inherit;

Especifica cuánto tiempo debe tomar una animación para completar un

animation-duration time | initial | inherit;
ciclo.

Especifica un estilo para el elemento cuando la animación no se está

animation-fill-mode none | forwards | backwards | both | initial | inherit;
reproduciendo.

animation-iteration-count Indica el número de veces que se debe reproducir una animación. number | infinite | initial | inherit;

animation-name Especifica un nombre para la animación @keyframes. nombrekeyframe | none | initial | inherit;

animation-play-state Esta propiedad indica si la animación está en ejecución o en pausa. paused | running | initial | inherit;

linear | ease | ease-in | ease-out | ease-in-out | step-start

Especifica el TIEMPO que usa una animación para cambiar de un conjunto
animation-timing-function | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) |
de estilos CSS a otro.
initial | inherit;

Define si la cara posterior de un elemento debe ser visible o no cuando

mira al usuario.
backface-visibility visible | hidden | initial | inherit;
Esta propiedad es útil cuando se gira un elemento. Te permite elegir si el
usuario debe ver la cara posterior o no.

Es una propiedad abreviada para: bg-color bg-image position/bg-size bg-repeat bg-origin bg-
background background-color clip bg-attachment initial | inherit;
background-image
Propiedad Descripción Valores admitidos

background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

Establece si una imagen de fondo se desplaza con el resto de la página o si

background-attachment scroll | fixed | local | initial | inherit;
es fija.

normal | multiply | screen | overlay | darken | lighten |

background-blend-mode Define el modo de fusión de cada capa de fondo (color y/o imagen).
color-dodge | saturation | color | luminosity;

Indica hasta dónde debe extenderse el fondo (color o imagen) dentro de

background-clip border-box | padding-box | content-box | initial | inherit;
un elemento.

background-color Establece el color de fondo de un elemento. color | transparent | initial | inherit;

background-image Establece una o más imágenes de fondo para un elemento. url | none | initial | inherit;

Especifica la posición de origen (el área de posicionamiento de fondo) de

background-origin padding-box | border-box | content-box | initial | inherit;
una imagen de fondo.

left top
left center
left bottom
Establece la posición inicial de una imagen de fondo. El primer valor es la right top
background-position
posición horizontal y el segundo la posición vertical. right center
right bottom
center top
center center
Propiedad Descripción Valores admitidos

center bottom
etc.

background-repeat Estable cómo o sí se repetirá una imagen de fondo. repeat | repeat-x | repeat-y | no-repeat | initial | inherit;

background-size Establece el tamaño de las imágenes de fondo. auto | length | cover | contain | initial | inherit;

Es una abreviatura de las propiedades:

border-width
border border-width border-style border-color | initial | inherit;
border-style (requerido)
border-color

Es una abreviatura de las propiedades:

border-bottom-width
border-bottom * border-width border-style border-color | initial | inherit;
border-bottom-style
border-bottom-color

border-bottom-color * Establece el color del borde inferior de un elemento. color | transparent | initial | inherit;

border-bottom-left-radius * Define el radio de la esquina inferior izquierda. length | % [length|%] | initial | inherit;

border-bottom-right-radius * Define el radio de la esquina inferior derecha. length |% [length |%] | initial | inherit;

none | hidden | dotted | dashed | solid | double | groove

border-bottom-style * Establece el estilo del borde inferior de un elemento
| ridge | inset | outset | initial | inherit;

border-bottom-width * Establece el ancho del borde inferior de un elemento. medium | thin | thick | length | initial | inherit;
Propiedad Descripción Valores admitidos

En las propiedades marcadas top: Hace referencia al borde superior

con un asterisco, bottom es left: Hace referencia al borde izquierdo
sustituible por top, left y right. right: Hace referencia al borde derecho.

Establece si los bordes de la tabla deben contraerse en un solo borde o

border-collapse separate | collapse | initial | inherit;
estar separados como en HTML estándar

Establece el color de los cuatro bordes de un elemento. Esta propiedad

border-color puede tener de uno a cuatro valores para especificar el color de los bordes color | transparent | initial | inherit;
superior, derecha, inferior e izquierda respectivamente.

Permite especificar una imagen para usarla como borde alrededor de un

border-image source slice width outset repeat | initial | inherit;
elemento

Especifica la cantidad en la que el área de la imagen del borde se extiende

border-image-outset length | number | initial | inherit;
más allá del cuadro del borde.

Especifica si la imagen del borde debe repetirse, redondearse, espaciarse o

border-image-repeat stretch | repeat | round | space | initial | inherit;
estirarse

Especifica cómo dividir la imagen indicada por border-image-source. La

border-image-slice imagen siempre se divide en nueve secciones: cuatro esquinas, cuatro number | % | fill | initial | inherit;
bordes y el medio.

Especifica la ruta a la imagen que se usará como borde (en lugar del borde
border-image-source none | image | initial | inherit;
normal alrededor de un elemento).

border-image-width Establece el ancho de la imagen del borde. number | % | auto | initial | inherit;

border-radius Define el radio de las esquinas del borde del elemento. length | % / 1-4 length | % | initial | inherit;
Propiedad Descripción Valores admitidos

border-spacing Establece la distancia entre los bordes de las celdas adyacentes. length | initial | inherit;

Establece el estilo de los cuatro bordes de un elemento. Esta propiedad none | hidden | dotted | dashed | solid | double | groove
border-style
puede tener de uno a cuatro valores. | ridge | inset | outset | initial | inherit;

Establece el ancho de los cuatro bordes de un elemento. Esta propiedad

border-width medium | thin | thick | length | initial | inherit;
puede tener de uno a cuatro valores

Afecta a la posición vertical de un elemento posicionado. Esta propiedad

bottom auto | length | initial | inherit;
no tiene efecto en elementos no posicionados.

Especifica como se aplican las propiedades background, padding, border,

box-decoration-break border-image, box-shadow, margin, y clip-path de un elemento cuando la slice | clone | initial | inherit | unset;
caja de un elemento está fragmentada.

none | h-offset v-offset blur spread color | inset | initial |

box-shadow Adjunta una o más sombras a un elemento.
inherit;

Define cómo se calculan el ancho y el alto de un elemento: si deben incluir

box-sizing content-box | border-box | initial | inherit;
relleno y bordes, o no.

auto | all | always | avoid | avoid-column | avoid-page |

Especifica si se debe producir o no un salto de página, un salto de columna
break-after avoid-region | column | left | page | recto | region | right
o un salto de región después del elemento especificado.
| verso | initial | inherit;

auto | all | always | avoid | avoid-column | avoid-page |

Especifica si se debe producir o no un salto de página, un salto de columna
break-before avoid-region | column | left | page | recto | region | right
o un salto de región antes del elemento especificado.
| verso | initial | inherit;
Propiedad Descripción Valores admitidos

auto | all | always | avoid | avoid-column | avoid-page |

Especifica si se debe producir o no un salto de página, un salto de columna
break-inside avoid-region | column | left | page | recto | region | right
o un salto de región dentro del elemento especificado.
| verso | initial | inherit;

caption-side Especifica la ubicación de un título de tabla top | bottom | initial | inherit;

Especifica el color del cursor (signo de intercalación) en entradas, áreas de

caret-color auto | color | initial | inherit;
texto o cualquier elemento que sea editable.

La regla @charset especifica la codificación de caracteres utilizada en la

@charset @charset «charset»;
hoja de estilo.

clear Controla el flujo junto a los elementos flotantes. none | left | right | both | initial | inherit;

Permite especificar un rectángulo para recortar un elemento

absolutamente posicionado. El rectángulo se especifica como cuatro
clip coordenadas, todas desde la esquina superior izquierda del elemento que auto | shape | initial | inherit;
se va a recortar.
No funciona con «overflow: visible».

clip-source | basic-shape | margin-box | border-box |

clip-path Permite recortar un elemento a una forma básica o a una fuente SVG. padding-box | content-box | fill-box | stroke-box | view-
box | none | initial | inherit;

color Establece el color del texto. color | initial | inherit;

column-count Especifica el número de columnas en las que se debe dividir un elemento. number | auto | initial | inherit;

column-fill Especifica cómo llenar columnas, equilibradas o no. balance | auto | initial | inherit;
Propiedad Descripción Valores admitidos

column-gap Establece el espacio entre las columnas. length | normal | initial | inherit;

column-rule-width column-rule-style column-rule-color |

column-rule Establece el ancho, el estilo y el color de la regla entre columnas.
initial | inherit;

column-rule-color Especifica el color de la regla entre columnas. color | initial | inherit;

none | hidden | dotted | dashed | solid | double | groove

column-rule-style Indica el estilo de la regla entre columnas.
| ridge | inset | outset | initial | inherit;

column-rule-width Especifica el ancho de la regla entre columnas. medium | thin | thick | length | initial | inherit;

column-span Especifica cuántas columnas debe abarcar un elemento. none | all | initial | inherit;

column-width Establece el ancho de una columna. auto | length | initial | inherit;

Es una propiedad abreviada para:

columns column-width auto | column-width column-count | initial | inherit;
column-count

normal | none | counter | attr | string | open-quote |

Se utiliza con los pseudo-elementos ::before y ::after, para insertar
content close-quote | no-open-quote | no-close-quote | url | initial
contenido generado
| inherit;

counter-increment Aumenta o disminuye el valor de uno o más contadores CSS. none | id | initial | inherit;

Crea o restablece uno o más contadores CSS.

counter-reset Generalmente se usa junto con las propiedades counter- none | name number | initial | inherit;
increment y content.
Propiedad Descripción Valores admitidos

Especifica el cursor del ratón que se mostrará cuando se apunte sobre un

cursor cursor: valor;
elemento.

Especifica la dirección del texto o la dirección de escritura dentro de un

direction ltr | rtl | initial | inherit;
elemento a nivel de bloque. Más información aquí.

Establece el comportamiento de visualización (el tipo de cuadro de inline | block | contents | flex | grid | inline-block | inline-
display
representación) de un elemento. flex | inline-table | list-item | run-in Más información aquí.

empty-cells show | hide | initial | inherit;

Establece si mostrar o no los bordes en las celdas vacías de una tabla.

none | blur() | brightness() | contrast() | drop-shadow() |

Define efectos visuales (como desenfoque y saturación) a un elemento (a
filter grayscale() | hue-rotate() | invert() | opacity() | saturate()
menudo utilizado para imágenes).
| sepia() | url();

Es una propiedad abreviada para:

flex-grow
flex flex-shrink flex-grow flex-shrink flex-basis | auto | initial | inherit;
flex-basis
Establece la longitud flexible en elementos flexibles.

flex-basis Especifica la longitud inicial de un elemento flexible. number | auto | initial | inherit;

row | row-reverse | column | column-reverse | initial |

flex-direction Esta propiedad indica la dirección de los elementos flexibles.
inherit;

Es una abreviatura para las propiedades:

flex-flow flex-direction flex-direction flex-wrap | initial | inherit;
flex-wrap
Propiedad Descripción Valores admitidos

Si los elementos no son elementos flexibles, la propiedad de flujo flexible

no tiene efecto.

Especifica cuánto crecerá el elemento en relación con el resto de

flex-grow number | initial | inherit;
elementos flexibles dentro del mismo contenedor.

Establece cómo se encogerá el elemento en relación con el resto de los

flex-shrink number | initial | inherit;
elementos flexibles dentro del mismo contenedor.

flex-wrap La propiedad especifica si los elementos flexibles deben ajustarse o no. nowrap | wrap | wrap-reverse | initial | inherit;

Especifica si un elemento debe flotar a la izquierda, a la derecha o no

flotar en absoluto.
float Los elementos posicionados de manera absoluta ignoran la none | left | right | initial | inherit;
propiedad float. Los elementos junto a un elemento flotante fluirán a su
alrededor. Para evitar esto, use la propiedad clear

Es una abreviatura para las propiedades:

font-style
font-style font-variant font-weight font-size/line-height
font-variant
font font-family | caption | icon | menu | message-box | small-
font-weight
caption | status-bar | initial | inherit;
font-size/line-height
font-family

@font-face {
Se deben definir un nombre para la fuente (por ejemplo, miFuente), y
@font-face font-properties
luego apuntar al archivo de fuente.
}

Especifica la fuente de texto para un elemento. Es posible especificar

font-family varios nombres de fuente como un sistema «alternativo». Si el navegador family-name | generic-family | initial | inherit;
no admite la primera fuente, prueba con la siguiente fuente.
Propiedad Descripción Valores admitidos

Permite el control sobre características tipográficas avanzadas en fuentes

font-feature-settings normal | feature-value;
OpenType.

Controla el uso de la información de interletraje almacenada en una

font-kerning auto | normal | none;
fuente.

medium | xx-small | x-small | small | large | x-large | xx-

font-size Establece el tamaño de una fuente.
large | smaller | larger | length | initial | inherit;

Le brinda un mejor control del tamaño de la fuente cuando la primera

fuente seleccionada no está disponible. Cuando una fuente no está
font-size-adjust disponible, el navegador usa la segunda fuente especificada. Esto podría number | none | initial | inherit;
resultar en un gran cambio para el tamaño de fuente. Para evitar esto,
utilice la propiedad font-size-adjust.

ultra-condensed | extra-condensed | condensed | semi-

Le permite hacer que el texto sea más angosto (condensado) o más ancho
font-stretch condensed | normal | semi-expanded | expanded | extra-
(expandido).
expanded | ultra-expanded | initial | inherit;

font-style Especifica el estilo de fuente para un texto. Normal | italic | oblique | initial | inherit;

font-variant Especifica si un texto debe mostrarse o no en mayúsculas pequeñas. normal | small-caps | initial | inherit;

normal | small-caps | all-small-caps | petite-caps | all-

font-variant-caps Controla el uso de glifos alternativos para letras mayúsculas.
petite-caps | unicase | titling-caps | initial | inherit | unset;

Establece qué tan gruesos o delgados deben mostrarse los caracteres del
font-weight normal | bold | bolder | lighter | number | initial | inherit;
texto.

gap Define el tamaño del espacio entre las filas y las columnas. row-gap column-gap;
Propiedad Descripción Valores admitidos

Es una abreviatura para las propiedades:

grid-template-rows
none | grid-template-rows / grid-template-columns | grid-
grid-template-columns
template-areas | grid-template-rows / [grid-auto-flow]
grid grid-template-areas
grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-
grid-auto-rows
template-columns | initial | inherit;
grid-auto-columns
grid-auto-flow

Especifica el tamaño y la ubicación de un elemento de cuadrícula en un

diseño de cuadrícula y es una propiedad abreviada para las siguientes
propiedades:
grid-row-start / grid-column-start / grid-row-end / grid-
grid-area grid-row-start
column-end | itemname;
grid-column-start
grid-row-end
grid-column-end

grid-auto-columns Establece un tamaño para las columnas en un contenedor grid. auto | max-content | min-content | length;

Controla cómo se insertan en la cuadrícula los elementos colocados

grid-auto-flow row | column | dense | row dense | column dense;
automáticamente.

grid-auto-rows Establece un tamaño para las filas en un contenedor de cuadrícula. auto | max-content | min-content | length;

Especifica el tamaño y la ubicación de un elemento de cuadrícula en un

diseño de cuadrícula y es una propiedad abreviada para las siguientes
grid-column propiedades: grid-column-start / grid-column-end;
grid-column-start
grid-column-end

Define cuántas columnas abarcará un elemento, o en qué línea de

grid-column-end auto | span n | column-line;
columna terminará el elemento.
Propiedad Descripción Valores admitidos

Define el tamaño del espacio entre las columnas en un diseño de

grid-column-gap grid-column-gap: length;
cuadrícula.

grid-column-start Define en qué línea de columna comenzará el elemento. auto | span n | column-line;

Define el tamaño del espacio entre las filas y las columnas en un diseño de
cuadrícula y es una propiedad abreviada para las siguientes propiedades:
grid-gap grid-row-gap grid-column-gap;
grid-row-gap
grid-column-gap

Especifica el tamaño y la ubicación de un elemento de cuadrícula en un

elemento grid y es una propiedad abreviada para las siguientes
grid-row propiedades: grid-row-start / grid-row-end;
grid-row-start
grid-row-end

Define cuántas filas abarcará un elemento, o en qué línea de fila terminará

grid-row-end auto | row-line | span n;
el elemento

grid-row-gap Define el tamaño del espacio entre las filas en un diseño de cuadrícula. grid-row-gap: length;

grid-row-start Define en qué línea de fila comenzará el elemento. grid-row-start: auto|row-line;

Es una propiedad abreviada para las siguientes propiedades:

grid-template-rows none | grid-template-rows / grid-template-columns | grid-
grid-template
grid-template-columns template-areas | initial | inherit;
grid-template-areas

grid-template-areas Especifica áreas dentro de un elemento grid. none | itemnames;

Propiedad Descripción Valores admitidos

none | auto | max-content | min-content | length | initial

grid-template-columns Especifica el número (y el ancho) de las columnas en un diseño grid.
| inherit;

none | auto | max-content | min-content | length | initial

grid-template-rows Especifica el número (y las alturas) de las filas en un diseño de cuadrícula.
| inherit;

Especifica si se puede colocar un signo de puntuación fuera del cuadro de

hanging-punctuation none | first | last | allow-end | force-end | initial | inherit;
línea al principio o al final de una línea completa de texto.

height Establece la altura de un elemento. No incluye relleno, bordes o márgenes. auto | length | initial | inherit;

Define si se permite la separación silábica para crear más oportunidades

hyphens none | manual | auto | initial | inherit;
de ajuste suave dentro de una línea de texto.

auto | smooth | high-quality | crisp-edges | pixelated |

image-rendering Especifica el tipo de algoritmo que se utilizará para escalar la imagen.
initial | inherit;

@import Regla que le permite importar una hoja de estilo a otra hoja de estilo. url | string list-of-mediaqueries;

isolation Define si un elemento debe crear un nuevo contenido de apilamiento. auto | isolate | initial | inherit;

Alinea los elementos del contenedor flexible cuando los elementos no flex-start | flex-end | center | space-between | space-
justify-content
utilizan todo el espacio disponible en el eje principal (horizontalmente). around | space-evenly | initial | inherit;

@keyframes Regla que especifica el código de animación. @keyframes name {keyframes-selector {css-styles;}}

Afecta la posición horizontal de un elemento posicionado. Esta propiedad

left auto | length | initial | inherit;
no tiene efecto en elementos no posicionados.
Propiedad Descripción Valores admitidos

letter-spacing Aumenta o disminuye el espacio entre caracteres en un texto. normal | length | initial | inherit;

line-height Especifica la altura de una línea. normal | number | length | initial | inherit;

Es una abreviatura de las siguientes propiedades:

list-style-type list-style-type list-style-position list-style-image | initial |
list-style
list-style-position inherit;
list-style-image

list-style-image Reemplaza el marcador de elemento de lista con una imagen. none | url | initial | inherit;

list-style-position Especifica la posición de los marcadores de elementos de lista (viñetas). inside | outside | initial | inherit;

list-style-type Especifica el tipo de marcador de elemento de lista en una lista. list-style-type: value;

Establece los márgenes de un elemento y es una propiedad abreviada para

las siguientes propiedades:
margin-top
margin length | auto | initial | inherit;
margin-right
margin-bottom
margin-left

margin-bottom Establece el margen inferior de un elemento. length | auto | initial | inherit;

margin-left Establece el margen izquierdo de un elemento. length | auto | initial | inherit;

margin-right Establece el margen derecho de un elemento. length | auto | initial | inherit;

margin-top Establece el margen superior de un elemento. length | auto | initial | inherit;

Propiedad Descripción Valores admitidos

Especifica una imagen que se utilizará como capa de máscara para un

mask-image none | image | url | initial | inherit;
elemento.

Especifica si la imagen de la capa de máscara debe tratarse como una

mask-mode match-source | luminance | alpha | initial | inherit;
máscara de luminancia o como una máscara alfa.

Especifica la posición de origen (el área de posición de la máscara) de una border-box | content-box | padding-box | margin-box | fill-
mask-origin
imagen de capa de máscara. box | stroke-box | view-box | initial | inherit;

Establece la posición inicial de una imagen de máscara (en relación con el

mask-position mask-position: value;
área de posición de la máscara).

repeat | repeat-x | repeat-y | space | round | no-repeat |

mask-repeat Establece sí o cómo se repetirá una imagen de máscara.
initial | inherit;

mask-size Especifica el tamaño de la imagen de la capa de máscara. auto | size | contain | cover | initial | inherit;

max-height Define la altura máxima de un elemento. none | length | initial | inherit;

max-width Define la anchura máxima de un elemento. none | length | initial | inherit;

@media not | only type and (feature and | or |

La regla se usa para aplicar diferentes estilos para diferentes tipos de not mediafeature) {
@media
medios/dispositivos. CSS-Code;
}

min-height Define la altura mínima de un elemento. length | initial | inherit;

min-width Define la anchura mínima de un elemento. length | initial | inherit;

Propiedad Descripción Valores admitidos

normal | multiply | screen | overlay | darken | lighten |

Especifica cómo el contenido de un elemento debe combinarse con su
mix-blend-mode color-dodge | color-burn | difference | exclusion | hue |
fondo principal directo.
saturation | color | luminosity;

Se utiliza para especificar cómo se debe cambiar el tamaño de un <img> o

object-fit fill | contain | cover | scale-down | none | initial | inherit;
<video> para que se ajuste a su contenedor.

Se usa junto con object-fit para especificar cómo se debe colocar un <img>
object-position o <video> con las coordenadas x/y dentro de su «propio cuadro de position | initial | inherit;
contenido».

opacity Establece el nivel de opacidad de un elemento. number | initial | inherit;

Especifica el orden de un artículo flexible en relación con el resto de los

order number | initial | inherit;
artículos flexibles dentro del mismo contenedor.

Especifica el número mínimo de líneas que se deben dejar al final de una

orphans integer | initial | inherit;
página o columna.

Es una propiedad abreviada para:

outline-width
outline outline-width outline-style outline-color | initial | inherit;
outline-style (obligatoria)
outline-color

outline-color Especifica el color de un contorno invert | color | initial | inherit;

outline-offset Agrega espacio entre el contorno y el borde o borde de un elemento. length | initial | inherit;

none | hidden | dotted | dashed | solid | double | groove

outline-style Especifica el estilo de un outline.
| ridge | inset | outset | initial | inherit;
Propiedad Descripción Valores admitidos

outline-width Especifica el ancho de un contorno. medium | thin | thick | length | initial | inherit;

Especifica lo que debería suceder si el contenido desborda el cuadro de un

overflow visible | hidden | scroll | auto | initial | inherit;
elemento.

Especifica si el navegador puede o no dividir líneas con palabras largas, si

overflow-wrap normal | anywhere | break-word | initial | inherit;
desbordan el contenedor.

Especifica si se se agrega una barra de desplazamiento o se muestra el

overflow-x contenido de desbordamiento de un elemento de nivel de bloque, cuando visible | hidden | scroll | auto | initial | inherit;
se desborda en los ejes izquierdos y derechos.

Especifica si se se agrega una barra de desplazamiento o se muestra el

overflow-y contenido de desbordamiento de un elemento de nivel de bloque, cuando visible | hidden | scroll | auto | initial | inherit;
se desborda en los ejes inferiores y superiores.

El padding de un elemento es el espacio entre su contenido y su borde. Es

una propiedad abreviada para:
padding padding-top length | initial | inherit;
padding-right
padding-bottom
padding-left

padding-bottom Establece el padding inferior (espacio) de un elemento. length | initial | inherit;

padding-left Establece el padding inferior (espacio) de un elemento. length | initial | inherit;

padding-right Establece el padding inferior (espacio) de un elemento. length | initial | inherit;

Propiedad Descripción Valores admitidos

padding-top Establece el padding inferior (espacio) de un elemento. length | initial | inherit;

page-break-after Agrega un salto de página después de un elemento especificado. auto | always | avoid | left | right | initial | inherit;

page-break-before Agrega un salto de página antes de un elemento especificado. auto | always | avoid | left | right | initial | inherit;

Establece si se debe evitar un salto de página dentro de un elemento

page-break-inside auto | avoid | initial | inherit;
específico.

perspective Se utiliza para dar cierta perspectiva a un elemento posicionado en 3D. length | none;

Define desde qué posición el usuario está mirando el elemento

perspective-origin x-axis y-axis | initial | inherit;
posicionado en 3D.

pointer-events Define si un elemento reacciona o no a los eventos de puntero. auto | none;

Especifica el tipo de método de posicionamiento utilizado para un

position static | absolute | fixed | relative | sticky | initial | inherit;
elemento (estático, relativo, absoluto, fijo o pegajoso).

quotes Establece el tipo de comillas para las citas. none | string | initial | inherit;

resize Define si (y cómo) el usuario puede cambiar el tamaño de un elemento. none | both | horizontal | vertical | initial | inherit;

Afecta la posición horizontal de un elemento posicionado. Esta propiedad

right auto | length | initial | inherit;
no tiene efecto en elementos no posicionados.

row-gap Especifica el espacio entre las filas de la cuadrícula. length | normal | initial | inherit;
Propiedad Descripción Valores admitidos

Especifica si animar suavemente la posición de desplazamiento, en lugar

scroll-behavior de un salto directo, cuando el usuario hace clic en un enlace dentro de un auto | smooth | initial | inherit;
cuadro desplazable.

tab-size Especifica el ancho de un carácter de tabulación. number | length | initial | inherit;

Define el algoritmo utilizado para diseñar las celdas, filas y columnas de la

table-layout auto | fixed | initial | inherit;
tabla.

text-align Indica la alineación horizontal del texto en un elemento. left | right | center | justify | initial | inherit;

auto | left | right | center | justify | start | end | initial |

text-align-last Especifica cómo alinear la última línea de un texto
inherit;

Especifica la decoración añadida al texto y es una propiedad abreviada

para:
text-decoration-line text-decoration-color text-decoration-
text-decoration text-decoration-line (obligatorio)
style | initial | inherit;
text-decoration-color
text-decoration-style

Especifica el color de la decoración del texto (subrayado, sobre-rayado,

text-decoration-color color | initial | inherit;
líneas continuas).

Establece el tipo de decoración de texto que se utilizará (como subrayado,

text-decoration-line none | underline | overline | line-through | initial | inherit;
sobre-rayado, traspaso).

Establece el estilo de la decoración del texto (como sólido, ondulado,

text-decoration-style solid | double | dotted | dashed | wavy | initial | inherit;
punteado, discontinuo, doble).

text-indent Indica la sangría de la primera línea en un bloque de texto. length | initial | inherit;
Propiedad Descripción Valores admitidos

Especifica el método de justificación del texto cuando text-align se

text-justify auto | inter-word | inter-character | none | initial | inherit;
establece en «justify».

Especifica cómo se debe señalar al usuario el contenido desbordado que

text-overflow clip | ellipsis | string | initial | inherit;
no se muestra.

h-shadow v-shadow blur-radius color | none | initial |

text-shadow Agrega sombra al texto.
inherit;

text-transform Controla las mayúsculas del texto none | capitalize | uppercase | lowercase | initial | inherit;

Afecta a la posición vertical de un elemento posicionado. Esta propiedad

top auto | length | initial | inherit;
no tiene efecto en elementos no posicionados.

transform Aplica una transformación 2D o 3D a un elemento. none | transform-functions | initial | inherit;

transform-origin Le permite cambiar la posición de los elementos transformados. x-axis y-axis z-axis | initial | inherit;

transform-style Especifica cómo se representan los elementos anidados en el espacio 3D. flat | preserve-3d | initial | inherit;

Es una propiedad abreviada para:

transition-property
transition transition-duration property duration timing-function delay | initial | inherit;
transition-timing-function
transition-delay

transition-delay Indica cuándo comenzará el efecto de transición. time | initial | inherit;

Propiedad Descripción Valores admitidos

Especifica cuántos segundos (s) o milisegundos (ms) tarda en completarse

transition-duration time | initial | inherit;
un efecto de transición.

Indica el nombre de la propiedad CSS para el efecto de transición (el

transition-property efecto de transición comenzará cuando cambie la propiedad CSS none | all | property | initial | inherit;
especificada).

linear | ease | ease-in | ease-out | ease-in-out | step-start

transition-timing-function Especifica la curva de velocidad del efecto de transición. | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) |
initial | inherit;

Se usa junto con la propiedad direction para establecer o devolver si el

unicode-bidi normal | embed | bidi-override | initial | inherit;
texto debe anularse para admitir varios idiomas en el mismo documento.

user-select Especifica si se puede seleccionar el texto de un elemento. auto | none | text | all;

baseline | length | sub | super | top | text-top | middle |

vertical-align Establece la alineación vertical de un elemento.
bottom | text-bottom | initial | inherit;

visibility Indica si un elemento es visible o no. visible | hidden | collapse | initial | inherit;

normal | nowrap | pre | pre-line | pre-wrap | initial |

white-space Especifica cómo se maneja el espacio en blanco dentro de un elemento.
inherit;

Especifica el número mínimo de líneas que se deben dejar en la parte

widows integer | initial | inherit;
superior de una página o columna.

width Establece el ancho de un elemento. auto | value | initial | inherit;

Propiedad Descripción Valores admitidos

word-break Especifica cómo deben dividirse las palabras al llegar al final de una línea. normal | break-all | keep-all | break-word | initial | inherit;

word-spacing Aumenta o disminuye el espacio en blanco entre las palabras normal | length | initial | inherit;

Permite que las palabras largas se puedan dividir y pasar a la siguiente

word-wrap normal | break-word | initial | inherit;
línea.

writing-mode Especifica si las líneas de texto se disponen horizontal o verticalmente. horizontal-tb | vertical-rl|vertical-lr;

Especifica el orden de apilamiento de un elemento. Un elemento con

z-index mayor orden de apilamiento siempre está delante de un elemento con auto | number | initial | inherit;
menor orden de apilamiento.

CONCLUSIÓN

Estas son todas las propiedades CSS que existen, espero que te haya servido de ayuda y que te haya gustado, no dudes en comentar. ¡Nos vemos en el próximo artículo!