Propiedades de estilo CSS de bloques

En este artículo vemos las propiedades de estilo que tienen los bloques utilizando una hoja de estilos CSS.

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; 

69 me gusta
348 vistas
Anterior Unidades de medida CSS
Siguiente Propiedades CSS para los textos
Programar en HTML y CSS

Programar en HTML y CSS

En esta lista de tutoriales veremos como programar de forma clara y directa en código HTML y CSS que son la base de la web.

¿Cómo se escribe en código HTML?

En esta sección veremos los elementos y la forma en la que se debe escribir el código de hipertexto o HTML.
Tiene video

Esquema de una página HTML

En este artículo veremos el esquema básico de una página en HTML5, la última version de código HTML que existe.

¿Existen reglas para escribir código HTML?

En este artículo analizaremos la forma correcta de escribir en código HTML.

¿Para qué sirve el código CSS?

Aquí veremos para que sirven las hojas de estilo y su uso en los sitios web.

Unidades de medida CSS

En esta sección analizamos todas las unidades de medida que existen en CSS

Propiedades de estilo CSS de bloques

En este artículo vemos las propiedades de estilo que tienen los bloques utilizando una hoja de estilos CSS.

Propiedades CSS para los textos

Aquí veremos como se puede dar estilo a los textos utilizando las propiedades de estilo CSS.

Selectores de estilo CSS

En esta sección vamos a analizar lo básico sobre los selectores de estilo CSS.

¿Qué sucede si no uso estilos CSS en mi página?

En esta sección analizaremos qué es lo que sucede cuando no se utiliza ninguna hoja de estilos CSS en un sitio web.

¿Debería utilizar un framework CSS?

Muchas veces nos preguntamos si vale la pena utilizar un framework como Bootstrap o MaterialUI. En este artículo analizamos la situacion.