Propiedades de estilo CSS de bloques
Cualquier sitio web puede ser visto como un grupo de bloques rectangulares que contienen textos. Entonces, podemos dividir los estilos CSS en dos, los que sirven para darle estilo a los textos y los que dan estilo a los bloques que contienen los mismos.
Cada párrafo, imagen o división en HTML no es más que un bloque rectangular que puede tener las siguientes propiedades:
Propiedades de los bordes
Los bordes de los bloques se definen con la propiedad "border". Tiene como subpropiedades el ancho "width", el estilo "style" y el color "color" del borde. Por ejemplo:
Para hacer una línea solida negra de 1 pixel:
border: 1px solid black;
Para hacer una línea punteada amarilla de 2 píxeles:
border: 2px dotted yellow;
Para establecer las propiedades por cada lado se usan las propiedades de abajo "border-bottom", arriba "border-top", izquierda "border-left" y derecha "border-right"
Por ejemplo, para hacer un bloque con una línea roja a un costado y una amarilla al otro:
border-left: 1px solid red;
border-right: 1px solid yellow;
Propiedades de los fondos
Para modificar el color o imagen de fondo de un bloque usamos la propiedad "background". Por ejemplo:
Para hacer un fondo de color azul:
background: blue;
Para hacer un fondo con una imagen:
background: url(https://www.misitio.com/mi_imagen.jpg);
En el caso de las imágenes tenemos subpropiedades como:
- background-size - Es el tamaño del fondo expresado en medidas de ancho y alto, por ejemplo "50% 30%" es la mitad del ancho y el 30 por ciento del alto. Ademas se pueden usar los valores "cover" para que la imagen cubra todo el bloque, o "contain" para que la imagen se adapte al bloque.
- background-repeat - Para que el fondo se repita creando asi un efecto de estampado.
- background-position - Para colocar la posición "x" e "y" de la imagen.
Margénes externos e internos
Para definir los márgenes externos, es decir, el espacio entre el borde del bloque y los otros elementos usamos la propiedad "margin". Para definir el espacio interno usamos "padding".
Por ejemplo, para que un bloque tenga un margen exterior de 10 pixeles y uno interno de 20px:
margin: 10px;
padding: 20px;
Si queremos definir márgenes diferentes para el mismo elemento, los especificamos siguiendo las agujas del reloj: arriba derecha, abajo e izquierda. Por ejemplo:
margin: 10px 20px 30px 40px;
O podemos especificar los márgenes superiores y los inferiores. Por ejemplo:
padding: 10px 40px;
