jairogarcíarincón
Margin y padding
En HTML cada elemento es considerado como una caja. El margen (margin) es en realidad el espacio alrededor del elemento, el que se encuentra por fuera del borde de esa caja.
Por contra, el estilo padding es el espacio alrededor del contenido del elemento pero dentro de sus bordes.
Para definir tanto margin como padding, se pueden usar diferentes nomenclaturas. Los siguientes ejemplos muestran las más comunes:
Puedes ver el efecto del margin y el padding observando las características de los dos <div> siguientes haciendo clic en el botón derecho y luego en Inspeccionar elemento:
Este div tiene un margen por los 4 lados de 20px.
Este div tiene un margen por los 4 lados de 20px y un padding de 10px.
Width y Height
Las propiedades width y height (ancho y alto) nos permiten establecer el ancho y/o alto de un elemento. El valor por defecto es auto y se puede establecer en pixeles, ems, rems o %.
IMPORTANTE: El valor establecido se define dentro del padding del elemento, con lo que no incluye los valores de las propiedades padding, margin y border.
Las propiedades min-width, max-width, min-height y max-height anulan, respectivamente, las anteriores width y height.
Las propiedades de fuentes de CSS definen la familia, el tamaño, el peso (negrita) y las variantes.
En CSS; hay dos tipos de nombres de familia:
- familias genéricas: las que tienen una apariencia similar (serif, sans-serif o monospace)
- familias de fuentes: fuentes específicas (Times New Roman, Georgia, Arial, Verdana, Courier New, Lucida Console, etc.)
Además de las fuentes integradas en cualquier navegador, es posible importar fuentes tipográficas a partir de archivos externos, tales como fuentes True Type. El problema es que en general requerirá de algún programa de conversión de fuentes, ya que tendremos que generar diferentes archivos para compatibilidad entre navegadores.
No obstante, la opción más recomendada actualmente es el uso de fuentes enlazadas de otros proveedores, como Google Fonts, que provee de un extenso catálogo de fuentes gratuitas y compatibles con todos los navegadores actuales.
Para importarlas, tan solo debemos seguir las indicaciones de la página y añadirlas directamente en el archivo CSS:
o como etiqueta link en el head de nuestro html:
En ambos casos, Google Fonts nos permite personalizar la fuente con diferentes grosores, idiomas, etc. Una vez importadas, las utilizaremos en la forma habitual:
Una vez declarada nuestra familia, existen una serie de estilos básicos que podemos aplicar:
Unidades: medidas en px, pt, rem, em y %
Hasta ahora hemos utilizado los píxeles (px) para definir nuestros estilos, bien sea el tamaño de las fuentes, como los márgenes, paddings, etc. También podíamos haber declarado los tamaños en pt o puntos, una medida más utilizada el medio gráfico pero igualmente absoluta y cuya correspondencia aproximada es de 0.75pt por cada 1px.
No obstante, en un entorno cada vez más adaptable o responsive, en el que tenemos que asegurarnos de que nuestra página web se vea bien en todos los tipos de dispositivos debemos, frente a los valores absolutos en píxeles o puntos, acostumbrarnos a utilizar medidas relativas.
La más común es emphasis o em, que tomará la relación del tamaño de letra base del documento. Por defecto, si no indicamos el tamaño de letra en la hoja de estilos, el navegador aplica un tamaño de 16px. De este modo, si queremos un tamaño de letra de 24px, sólo tendremos que definir en la hoja de estilos que sea de 24/16 = 1.5em.
¿Y cuáles son las ventajas de definir los tamaños de fuente en pixeles frente a em? Principalmente son dos:
- En cualquier momento el usuario puede optar por cambiar el tipo de letra del navegador haciendo zoom, y si están definidas en em, todas cambiarán proporcionalmente.
- El programador, con cambiar el tamaño de fuente base, puede modificar proporcionalmente el contenido de todos los estilos relativos.
Existe una unidad de medida aún más relativa que la anterior, que sería el relative emphasis o rem. En este caso, las unidades dependerán del tamaño del elemento anterior. Esto es, tal y como muestra el ejemplo siguiente, si el tamaño fuente base del body es de 16px y tenemos un div con tamaño de fuente 1.5rem, esto equivaldría a un tamaño de fuente de 24px. Si ahora dentro de ese contenedor queremos añadir un párrafo con un tamaño de fuente que sea la mitad que el del div, sólo tendremos que poner 0.5rem:
Por último, en ocasiones también utilizaremos las medidas en porcentajes %, sobre todo para definir anchos de divs o imágenes que sean flexibles.
A continuación se muestra una tabla con la relación entre cada unidad de medida, si bien estos valores se pueden ver afectados por cómo el usuario tenga configurado su navegador o dispositivo.
Border
Para establecer bordes a nuestro elemento, existen varias propiedades que podemos utilizar. Estas son las más comunes:
- border-color: Establece el color del borde en cualquier formato de color aceptado (#000, rgb(0,0,0), etc.)
- border-width: Establece el ancho del borde en px, em, etc.
- border-style: Establece el estilo del borde. Los más comunes son solid (continuo), dotted (con puntos), dashed (con rayas), double (doble borde) o none (sin borde).
- border: Es un estilo rápido para definir los 3 anteriores. Por ejemplo: border: 1px solid #000;
Además, es posible redondear los bordes mediante la propiedad border-radius utilizando una nomenclatura similar a la de margin y padding:
border-radius: 15px 50px 30px 5px;
border-radius: 15px 50px;
border-radius: 15px;
Por último, cualquiera de las propiedades anteriores se puede aplicar para una sola sección del elemento, por ejemplo, border-top, border-bottom-color, border-left-radius, etc.
Background
Otra de las propiedades más utilizadas en nuestros elementos es la de aplicar un fondo de cualquier tipo. Si queremos aplicar un color de fondo, debemos utilizar la propiedad:
background-color: permite aplicar un color de fondo en cualquier formato de color aceptado (#000, rgb(255,0,0), rgba(255,0,0,0.1), etc.)
Por el contrario, si queremos utilizar una imagen de fondo, podemos utilizar las siguientes propiedades:
Puedes encontrar más información y ejemplos en w3schools.
En HTML, los colores pueden ser identificados mediante nombres como green, violet o tomato. Existen hasta 140 colores disponibles.
No obstante, es posible definir los colores de una forma más técnica (más ejemplos interactivos AQUÍ):
Uso de initial, inherit e important
Existen 3 palabras clave que merecen la pena ser tenidas en cuenta, pues en muchas ocasiones nos pueden resultar útiles:
No obstante, el uso de !important no está recomendado, y solo se debe utilizar cuando queramos sobre-escribir otras librerías de CSS o plugins basados en Javascript que inyecten estilos in-line.
Conclusiones
En el apartado siguiente nos centraremos en las dos propiedades de CSS que afectan al posicionamiento de los elementos y a la plantilla global, como son display y position.
Si bien se han explicado muchas propiedades de CSS, existen aún muchas otras, tales como degradados, sombras de cajas, efectos de texto y más que puedes consultar y probar en la web de w3schools.
Ejercicio propuesto
Crea una página web de 1000px de ancho que se asemeje lo más posible a la siguiente:
Publicado el 05 de Febrero de 2025
css3csshtml