En un artículo anterior “
Empezar a Usar CSS Cuarta Parte” de esta serie de artículos, conocimos las reglas para
declarar y escribir las hojas de estilos y cómo llamarlas o importarlas desde un enlace.
En este artículo veremos cómo crear los contenedores principales de un sitio web (head, main body, footer), también conoceremos algunas reglas e estilos de posición que nos resultaran de gran provecho. Entender la esencia de estas reglas pueden hacer la diferencia entre volvernos depresivos o no, a la hora de usar las hojas de estilos en cascadas CSS.
Voy a empezar con un concepto interesante: “pensar que la cascada empieza desde el área del monitor mismo”.
Explico: Con las hojas de estilos podemos controlar totalmente lo que se muestra en los web browsers (no voy a incluir a nuestra pesadilla: IE), eso lo podemos lograr aplicando estilos desde el mismo TAG “HTML” o desde el TAG “BODY” teniendo en cuenta que desde el TAG HTML tenemos aun mas control de la pagina que se muestra en el web browser, o sea, mientras más arriba de la cascada más control.
Por lo que no es lo mismo aplicar estilos al TAG “
HTML” que al TAG “
BODY”, resalto esto porque lo veremos más adelante y es importante tenerlo en cuenta.
Bueno, basta de bla bla bla y vayamos al punto. Vamos a empezar conociendo la diferencia entre las propiedades padding y margin.
Margin: es una propiedad CSS que define un espacio dado de forma exterior de cualquier elemento. O sea, si queremos separar de forma exterior o “hacia afuera” a un elemento con relación a otro o con relación al espacio (monitor) le aplicamos la propiedad margin.
Esta propiedad nos brinda la posibilidad de especificar los lados hacia donde queremos aplicar el margen, ej.: margin-top, margin-left, etc., además nos permite acortar la propiedad con un shorthand ej.:
margin: 10px 6px 0px 6px , esto se lee usando las manecillas del reloj:
top= 10px / right = 6px / botton= 0px y left= 6px, de manera que no haya necesidad de especificar cada propiedad por separado y por lo tanto se optimiza la hoja de estilos.
Veamos un ejemplo del uso de la propiedad margin:
Vamos a crear el heading de un sitio web basado en esta maquetación (preferiblemente hecha por un diseñador web, no por un diseñador grafico):
Como vemos tenemos que definir:
1- Un contenedor para el heading, que ocupa 100% del ancho del espacio (monitor).
2- Un cuerpo de contenido o main container que ocupa 960 pixeles de ancho.
3- Un contenedor del footer que ocupa 100% del ancho del espacio (monitor).
Para lograr esto, vamos a empezar dictándole algunas instrucciones al TAG BODY de nuestra página HTML
Luego insertamos un div y le aplicamos un selector tipo id, lo haremos tipo id porque en todo el documento
HTML no volveremos a usar esta clase, si fuera necesario re-utilizar estos estilos, pues lo declaramos como una clase.
Para el main container haremos algo parecido pero con la diferencia de que aquí especificaremos un ancho en pixeles.
Para el footer vamos a copiar y pegar la clase del heading y le cambiaremos el nombre y el alto.
Aquí tenemos ya el layout principal donde colocaremos nuestro contenido. Ahora, veamos la propiedad padding.
Al igual que margin, la propiedad padding crea un espacio entre los elementos pero con la particularidad de que lo hace “hacia adentro”, es decir, el padding se utiliza para separar de forma interna los elementos a que se le aplica, a partir de los bordes del contenedor en que se encuentra. Esta propiedad también nos da la posibilidad de especificar los lados hacia donde queremos aplicar el margen interno o padding, ej.:
padding -top, padding -left, etc., además nos permite acortar la propiedad con un shorthand ej.:
padding: 10px 6px 0px 6px , que se lee usando las manecillas del reloj:
top= 10px / right= 6px / botton= 0px y left= 6px.
En caso de que usemos
padding: 10px; se aplicara un padding de
10 pixeles a cada uno de los lados del elemento HTML:
Un uso muy común de margin y padding es el que se utiliza para controlar el espacio de un TAG “
H1”. Cuando estamos comenzando a conocer las
reglas CSS puede resultarnos un tanto confuso ya que a veces obtenemos resultados inesperados o no deseados.
Vamos a experimentar con un TAG H1. Personalmente utilizo una técnica de “colorear” el background del elemento HTML para comparar los resultados de una forma más visual, entonces tendremos:
Si aumentamos el número de pixeles aplicados al padding del elemnto
H1 tendremos como resultado:
Si aumentamos el número de pixeles aplicados al margin del elemnto
H1 tendremos como resultado:
Entonces, con este ejemplo podemos tener una idea más clara de qué podemos conseguir con
margin y padding.
Con los ejemplos vistos hemos conocido las propiedades básicas para crear un layout, es importante saber que existen diferentes tipos (elásticos, fijos, líquidos, centrados, etc.) que podríamos ir conociendo o experimentando, lo importante como ya he mencionado, es conocer la esencia de lo que se puede conseguir usando las diferentes propiedades o reglas CSS disponibles.
En el próximo articulo abundaremos sobre las diferentes unidades de medida usadas en CSS, los beneficios o desventajas y como y porque usarlas dependiendo del elemento a que le aplicaremos estilos.
Hasta la próxima.
Articulos Anteriores:
