PROPIEDADES DE CSS  Padding-top: Establece la anchura de la
zona de relleno superior de los
 Width: Define el ancho de un elemento,
el valor se puede escribir en pixels, ems
o porcentaje.
 Max-width o min-width: Definen el ancho
máximo o mínimo de un elemento. Muy
importante en sitios adaptables
 Height: Define el alto de un elemento, el
valor se puede escribir en pixels, ems o
porcentaje.
 Max-height o min-height: Definen el alto
máximo o mínimo de un elemento. Muy
importante en sitios adaptables
 Margin: Es la distancia entre un
elemento y otro (desde el borde de un
elemento hacia afuera)
 Margin-right: Establece la anchura del
margen derecho de los elementos
 Margin-left: Establece la anchura del
margen izquierdo de los elementos
 Margin-top: Establece la anchura del
margen superior de los elementos de
bloque
 Margin-bottom: Establece la anchura del
margen inferior de los elementos de
bloque
 Padding: Es la distancia desde el borde
de un elemento hasta su contenido.
 Border-width: Establece la anchura
de algunos o todos los bordes de los
elementos
 Padding-bottom: Establece la anchura
de la zona de relleno inferior de los
elementos
 Padding-right: Establece la anchura de
la zona de relleno derecho de los
elementos
 Padding-left: Establece la anchura de la
zona de relleno izquierdo de los
elementos
 Border: Define el borde de un elemento,
su color, su estilo y grosor.
 Border-color: Establece el color de
algunos o todos los bordes de los
elementos.
 Border-style: Establece el estilo de
algunos o todos los bordes de los
elementos. (none, hidden, dotted,
dashed, solid, doublé, Groove, ridge,
inset, outset)
 Border-top: Establece algunas o
todas las propiedades del borde
superior de los elementos
 Border-bottom: Establece algunas o
todas las propiedades del borde
inferior de los elementos
 Border-right: Establece algunas o
todas las propiedades del borde
derecho de los elementos
 Border-left: Establece algunas o
todas las propiedades del borde
izquierdo de los elementos
elementos
 border-top-width: Establece la anchura
del borde superior de los elementos
(thin, médium, thick, medida, inherit) Asi
mismo: left, right y bottom.
 border-radius: Permite a los
desarrolladores Web definir qué tan
redondeadas serán las esquinas. 
 Font-family: Establece la fuente o tipo
de letra
 Font-size: Define el tamaño de la fuente
y el valor se puede escribir en pixels o
en ems.
 Font-style: Establece el estilo del tipo de
letra
 Font-weight: Establece el grosor de
cada letra
 Letter-spacing: Establece la separación
entre las letras del texto
 Color: Define el color de la tipografía.
Los colores se pueden escribir de 3
formas distinas: con
sistema hexadecimal, por ejemplo:
#FF0000 (es rojo). Con los nombres de
los colores (más limitado) por ejemplo:
black, red, green. O usando RGB, esta
paleta permite agregar el canal alfa para
hacer transparencias
 Background: Define los fondos de un
objeto. El fondo puede ser una imagen o
un color.
La propiedad box-sizing puede ser usada para
ajustar el siguiente comportamiento:
 content-box es el comportamiento CSS por
defecto para el tamaño de la caja (box-
sizing). Si se define el ancho de un elemento
en 100 pixeles, la caja del contenido del
elemento tendrá 100 pixeles de ancho, y el
ancho de cualquier borde o relleno ser
añadirá al ancho final desplegado.
 border-box le dice al navegador tomar en
cuenta para cualquier valor que se
especifique de borde o de relleno para el
ancho o alto de un elemento. Es decir, si se
define un elemento con un ancho de 100
pixeles. Esos 100 pixeles incluíran cualquier
borde o relleno que se añadan, y la caja de
contenido se encogerá para absorber ese
ancho extra. Esto típicamente hace mucho
más fácil dimensionar elementos.
Box-shadow: La propiedad box-shadow permite
proyectar una sombra difuminada desde el
marco de casi cualquier elemento. Si border-
radius es especificado en un elemento con la
propiedad box-shadow, la sombra adopta la
misma curva en las esquinas
object-fit indica cómo el contenido de
un elemento reemplazado, por ejemplo
un <img> o <video>, debería redimensionarse
para ajustarse a su contenedor.
 Contain: El contenido reemplazado está
dimensionado para mantener su relación de
aspecto mientras se ajusta dentro del cuadro
de contenido del elemento: su tamaño de
objeto concreto se resuelve como una
restricción de contenido contra el ancho y la
altura utilizados del elemento.
 Cover: El contenido reemplazado se
dimensiona para mantener su relación de
aspecto mientras llena el cuadro de
contenido completo del elemento. Si la
relación de aspecto del objeto no coincide
con la relación de aspecto de su caja,
entonces el objeto se recortará para que se
ajuste.
 Fill: Modifica el tamaño del elemento
remplazado para llenar el cuadro de
contenido. El objeto completo ocupará todo
el espacio de la caja. Si el tamaño del
elemento no concuerda con el de su caja, se
estirará para llenarlo.
 None: El contenido reemplazado no se
redimensiona.
 scale-down: El contenido se dimensiona
como si none o contain estuvieran
especificados, lo que resultaría en un
tamaño de objeto concreto más
pequeño.
text-decoration se usa para establecer el formato
de texto a subrayado (underline) y suprarrayado
(overline), tachado (line-through) o move | e-resize | ne-resize | nw-resize | n-resize
parpadeo (blink). El subrayado y el suprarrayado
son posicionados bajo el texto, mientras la línea
a través de éste se posiciona por encima.
Las decoraciones de texto se dibujan a través de
los elementos descendientes. Esto significa que
no es posible deshabilitar la decoración en un
descendiente si la propiedad se especifica en un
elemento ancestro. Por ejemplo, en el
código <p>Este texto tiene <em>algunas
palabras enfatizadas</em> en él.</p>, la regla
de estilos p { text-decoration:
underline; } causará que el párrafo entero tenga
subrayado. La regla em { text-decoration:
none; } no causará ningún cambio; el párrafo
entero seguirá subrayado. Sin embargo, la
regla em { text-decoration: overline; } causará
una segunda decoración que aparecerá sobre
"algunas palabras enfatizadas".
text-transform especifica el cambio entre
mayúsculas y minúsculas del texto de un
elemento. Puede ser usada para que un texto
aparezca completamente en mayúsculas, en
minúsculas, o con la primera letra de cada
palabra en mayúscula.
 Capitalize: Es una palabra clave que fuerza
a que la primera letra de cada palabra sea
convertida a mayúscula.
 Uppercase: Es una palabra clave que fuerza
a todos los caracteres a ser convertidos a
mayúsculas.
 Lowercase: Es una palabra clave que fuerza
a todos los caracteres a ser convertidos a
minúsculas.
 None: Es una palabra clave que previene
que sea cambiado el tamaño de los
caracteres.
Cursor: Permite personalizar el puntero del ratón
( (url ,)* ( auto | crosshair | default | pointer |
| se-resize | sw-resize | s-resize | w-resize | text |
wait | help | progress ) ) | inherit
overflow  especifica: si recortar contenido,
dibujar barras de desplazamiento o mostrar el
contenido excedente en un elemento a nivel de
bloque.
Visible: Valor por defecto. El contenido no es
recortado, podría ser dibujado fuera de la caja
contenedora.
Hidden; El contenido es recortado y no se
muestran barras de posición.
Scroll: El contenido es recortado y el navegador
web usa las barras de desplazamiento, se haya
recortado contenido o no. Esto previene
cualquier problema con las barras de
desplazamiento apareciendo o desapareciendo
en un entorno dinámico. Puede que las
impresoras impriman contenido excedente.
Auto: Depende del agente de usuario.
Navegadores de escritorio como Firefox proveen
barras de desplazamiento si hay contenido
excedente.
Transition: Permite definir la transición entre dos
estados de un elemento.