HTML: Cuadro de texto con color de fondo

En HTML, con este código podrá hacer un cuadro de texto con texto adentro y un color de fondo.


<div style="background-color: orange; border: 1px solid black; margin: 0px auto; padding: 10px; text-align: left; width: 200px;">
texto que irá dentro del cuadro...</div>

texto que irá dentro del cuadro...

Podemos personalizarlo a nuestro gusto cambiando:


background-color para el color de fondo. Podemos poner el color que queramos con código hexadecimal.
Ejemplo: #FFFFFF o también con el nombre del color.

border: El grosor del borde del cuadro de texto y el color del borde.

text-align: Alineación del texto dentro del cuadro.

width: Tamaño horizontal del cuadro (a lo largo).


<div style="background-color: #fbfbfb; border: 5px solid #FF0000; margin: 0px auto; padding: 10px; text-align: center; width: 400px;">
<span style="color: #0080ff;">texto que irá dentro del cuadro... Esto es un ejemplo del texto que puede ir dentro del cuadro de texto con un color de fondo cambiando algunos parámetros.</span></div>

texto que irá dentro del cuadro... Esto es un ejemplo del texto que puede ir dentro del cuadro de texto con un color de fondo cambiando algunos parámetros.

En este segundo ejemplo se cambió el background-color, el tamaño del border y el color, el texto se puso centralizado, el width se cambió a 400px (más grande), se agregó más texto y se introdujo el elemento <span style="color: #0080ff">...</span> para cambiar el color de texto y ponerlo azul.

En el primer ejemplo al no especificarse un color de fuente, toma la predeterminada o la establecida por la plantilla.