Propiedades CSS básicas, comunes a todos los elementos
width: establece la anchura del elemento. Pueden ser valores absolutos o
relativos al contenedor del elemento.
height: similar a height para la altura del elemento.
margin: espacio exterior al borde del elemento que mantiene con los elementos
vecinos.
padding: espacio entre el borde del elemento y su contenido.
Propiedades CSS para texto
font-family: tipo de letra (nombre del tipo => “Montserrat”, “Open Sans”, etc.).
font-size: tamaño de letra.
font-weight: peso (normal, negrita, …).
font-style: estilo (normal, cursiva, …).
letter-spacing: espacio entre letras.
line-height: espacio entre líneas / altura de la línea.
text-decoration: cosas como subrayados, tachados, etc.
text-align: alineación del texto (left, center, right).
Propiedades CSS para colores y fondos
color: color del elemento. Es importante notar que existen diferentes formatos
para especificar el color como palabras predefinidas (“red”, “green”, etc.),
formato RGB o valor hexadecimales (ver detalles en el material de referencia).
background-color: color del fondo del elemento.
background-image: usar una imagen de fondo.
background-repeat: usar una imagen de fondo como mosaico. Permite
diferentes modos de organización de la imagen (ver detalles en material de
referencia).
opacity: opacidad del elemento. Va desde 0 (completamente transparente) hasta
1 (sólido). Un valor de 0.5 sería, por tanto, un nivel de transparencia del 50%.
Propiedades CSS para bordes
border: añade un borde a un elemento y especifica sus propiedades (grosor,
estilo de línea, etc.). Ver también el modelo de caja de arriba.
border-color: color del borde.
border-style: diferentes estilos (sólido, rayitas, puntos, etc.).
border-radius: redondear las esquinas de un elemento.
Otras propiedades CSS interesantes
float: propiedad avanzada que permite una maquetación más sofisticada.
Posicionar los elementos de manera “flotante”. Ver este tutorial básico sobre
posicionamiento flotante.
clear: controla el comportamiento de los elementos adyacentes a elementos
posicionados de forma flotante. Ver también el tutorial anterior sobre
posicionamiento flotante.
overflow: controla el comportamiento de los contenidos que no caben en su
elemento contenedor (valores: visible, hidden, scroll, auto, inherit)
display: controla diferentes aspectos de la visualización de un elemento, permite
incluso ocultarlo con el valor “none”.
list-style-image: URL con una imagen que se debe usar como viñeta.
list-style-type: diferentes estilos de viñetas y numeración para los elementos de
la lista.
box-shadow: aplicar un efecto de sombra a un elemento.