Tutoriales de diseño web

HTML5, CSS3 y JQuery

volver al índice

Principales propiedades CSS

Escrito por Laura Chuburu

El lenguaje CSS que estamos usando actualmente es la versión 2.1 que es estándar y la 3.0 que todavía no está terminada de definir pero ya se está usando. La versión 3.0 agrega nuevas propiedades, que se suman a las anteriores. A continuación describo las principales propiedades:

Font-family:

Define la familia tipográfica. Es conveniente poner una lista de dos o tres tipografías separadas por coma, porque si el usuario no tiene instalada la tipografía que nosostros elegimos, el navegador opta por mostrar la siguiente que debería ser una similar, si tampoco la tiene instalada, mostrará la tipografía por defecto.

Tenemos 3 opciones para definir la elección de la familia tipográfica:1) usar una de las fuentes más comunes (web safe fonts) que muy probablemente tenga instalada el usuario (Arial, Verdana, Trebuchet, Georgia, san serif, Times), 2) subir nuestra propia fuente con una propiedad nueva que se llama @font-face, o 3) usar una fuente de Google Font, que en este momento es lo más recomendable. El sitio es: http://www.google.com/fonts/.

Font-size:

Define el tamaño de la fuente y el valor se puede escribir en pixels o en ems. En este momento se recomienda usar ems. Los dos son valores relativos, el pixel es un valor relativo a la resolución de la pantalla, pero el em es relativo al tamaño de la fuente definida por el usuario. Si el usuario no cambió la configuración, el valor por defecto de los textos en todos los navegadores es de 16px. Entonces 1em = 16px.

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.

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

Padding:

Es la distancia desde el borde de un elemento hasta su contenido.

Margin:

Es la distancia entre un elemento y otro (desde el borde de un elemento hacia afuera)

Border:

Define el borde de un elemento, su color, su estilo y grosor.

Background: 

Define los fondos de un objeto. El fondo puede ser una imagen o un color. El color puede ser pleno o degradado. La imagen se puede repetir formando una trama (es lo que ocurre por defecto) o se puede especificar que no repita y que se coloque en determinada posición.

Licencia Creative Commons
Tutoriales de diseño web por Laura Chuburu se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.