Escrito por Laura Chuburu
Cada regla CSS contiene una o más propiedades que definen el diseño de un elemento del HTML. A continuación describo las principales:
Define la familia tipográfica. 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, etc). Si elegimos esta opción 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 nosotros 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. Esta opción es la más eficiente en cuanto al tiempo de carga de la página, pero muy limitada en cuanto a diseño.
2) usar una fuente de Google Font, que en este momento es lo más recomendable. No es necesario que el usuario tenga instalada la fuente, porque el navegador la llama del servidor de Google. Tampoco se necesita para maquetar, por la misma razón. El sitio es: https://fonts.google.com/. Por lo general en un sitio se utilizan dos fuentes, una para títulos y otra para textos, con algunas variables. Pero hay que tener en cuenta que cada fuente y cada variable que agreguemos hace más lenta la carga de la página.
3) subir nuestra propia fuente con la propiedad @font-face. Esta opción es sólo recomendable si tenemos la licencia de una fuente o necesitamos una fuente que no se encuentre en el sitio de Google. Es necesario subir el archivo de la fuente por FTP y declarar la fuente definiendo como mínimo un nombre a la familia y la ruta del archivo. Ejemplo:
@font-face {
font-family: nombre-de-la-fuente;
src: url(../fonts/nombre-de-la-fuente.woff);
}Define el tamaño de la fuente y el valor se puede escribir en pixels o rems. En este momento se recomienda usar rems por una cuestión de usabilidad. Los dos son valores relativos, el pixel es un valor relativo a la resolución de la pantalla, pero el rem es relativo al tamaño de la fuente definida por el usuario en el navegador. Si el usuario no cambió la configuración, el valor por defecto de los textos en todos los navegadores es de 16px. Entonces 1rem = 16px. Pero si el usuario decide que su fuente por defecto es 20px, entonces 1rem=20px. La idea de que los textos se adapten a las necesidades del usuario es muy buena, pero como en la práctica no todos los sitios lo implementan, la realidad es que es más práctico que el usuario utilice el zoom del navegador cuando lo necesite.
Color define el color de la tipografía y background-color, el color de fondo de un elemento. Los colores se pueden escribir de varias formas, las más utilizadas son:
Sistema hexadecimal, por ejemplo: #FF0000 (es rojo). Son 3 pares de caracteres que corresponden a RGB. Si los pares repiten sus caracteres, se puede resumir en 3 por ejemplo: #F00 también es el mismo rojo. La escala que se utiliza es la siguiente: 0987654321ABCDEF donde 0 es negro y F es blanco, por lo tanto: #000 es negro y #FFF es blanco. Hay muchos sitios que generan paletas de colores para web, el que recomiendo es: https://coolors.co/
Nombres de los colores (más limitado) por ejemplo: black, red, green.
RGB y RGBA, esta opción permite agregar el canal alfa para hacer transparencias, por ejemplo: backgrund-color: rgba(255, 255,255,.3) ese color es blanco con 30% de transparencia.
Define el ancho de un elemento, el valor se puede escribir en pixels, rems o porcentaje. Las etiquetas de bloque tienen por defecto un width de 100%.
Definen el ancho máximo o mínimo de un elemento. Muy importante para adaptar el sitio a los diferentes tamaños de pantalla. Por ejemplo:
div.container {max-width:1200px; margin: 0 auto}La regla anterior define un ancho máximo para un container de 1.200px (y además lo centra con margin). Si no definimos un ancho, la div ocupa por defecto el 100% del espacio horizontal pero si lo queremos limitar, utilizamos max-width:1200px para que no supere esa medida pero se adapte si la pantalla es menor. En cambio si usáramos whidth: 1200px, en un celular no se adaptaría y la página haría scroll horizontal.
Define el alto de un elemento, el valor se puede escribir en pixels, rems o porcentaje. Esta propiedad hay que usarla con cuidado porque es preferible dejar las cajas con altura sin definir para que se estiren automáticamente cuando el contenido se modifique o se acomode a otros dispositivos.
Definen el alto máximo o mínimo de un elemento. Por ejemplo:
.content {min-height: 300px}Esta regla puede ser necesaria en una página con muy poco contenido (por ejemplo el resultado de una búsqueda sin coincidencias), para que tenga un mínimo de altura y deje espacio entre la cabecera y el footer.
Es la distancia desde el borde de un elemento hasta su contenido. Esta propiedad es imprescindible si la caja tiene color de fondo o borde. Si no lo tiene, se vería igual usando margin para generar los espacios. Hay que tener en cuenta que el padding por defecto aumenta el tamaño de una caja, para que esto no suceda, se usa box-sizing: border-box. Esta propiedad se suele definir en una regla con selector universal para que todos los elementos del sitio se comporten igual. El código es:
* {box-sizing: border-box}Es la distancia entre un elemento y otro (desde el borde de un elemento hacia afuera). Muchas etiquetas HTML tienen margin por defecto por ejemplo: el body, los encabezados, los párrafos y las listas.
Define el borde de un elemento, su color, su estilo y grosor.
