Cómo encuadrar un texto en HTML

Muchas veces nuestros alumnos nos preguntan cómo encuadrar un texto en HTML. Sin embargo, lo primero que debemos tener en cuenta es que HTML sirve únicamente para definir el texto en pantalla. Para establecer su visualización o darle cualquier estilo es necesario emplear CSS.

En este artículo te muestro cómo hacerlo de una manera fácil y rápida. Además, te daré un código de ejemplo para que puedas copiarlo y pegarlo en tu documento CSS sin necesidad de escribirlo de nuevo.

¡Despega con nosotros!

Encuadrar un texto HTML: propiedades CSS

La manera más fácil de meter en un cuadro un texto con las propiedades border. Estas propiedades CSS nos nos permiten encuadrar un texto escrito en HTML de una manera sencilla, como en este ejemplo.

See the Pen Cómo encuadrar un texto en HTML by HTML Masters (@htmlmasters) on CodePen.

Las propiedades border que debes utilizar son las siguientes:

• border-color: sirve para asignar el color.
• border-style: sirve para asignar el estilo del borde.
• border-width: sirve para definir la anchura del borde.

Propiedad border-color

Border-color nos permite definir el color que queremos que tenga nuestro encuadrado. Este color se puede definir de tres maneras:

• Valor hexadecimal.
• Sistema RGB.
• Sistema RGBA.
• Valores predefinidos (consúltalos aquí).

p {
  border-color: red;
}

Propiedad border-style

Esta propiedad nos permite asignarle diferentes estilos de bordes a nuestro texto con los siguientes parámetros:

• None.
• Hidden.
• Dotted.
• Dashed.
• Solid.
• Fouble.
• Groove.
• Ridge.
• Inset.
• Outset.

p {
  border-style: solid;
}

Propiedad border-width

Por último, la propiedad border-width nos permite asignar un grosor a nuestro borde. En este caso, podemos hacerlo como con valores (px, em, rem) como con estos parámetros:

• Thin (estrecho).
• Medium (medio).
• Thick (ancho).

p {
  border-width: medium;
}

Cantidad de valores dentro de las propiedades

En estas tres propiedades, puedes incluir hasta cuatro valores. En caso de añadir más de un valor, sucederá lo siguiente:

• Un valor: los cuatro lados tendrán el mismo valor.
• Dos valores: los lados de arriba y abajo utilizan el primer valor. Los izquierda y derecha, el segundo.
• Tres valores: el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.
• Cuatro valores: el primero se usará arriba, el segundo en la derecha, el tercero abajo y el cuarto en la izquierda.

p {
  border-style: dashed;
  border-color: red black;
  border-width: medium thick thin thick;
}

Encuadrar textos usando solo la propiedad border

Sin embargo, todas estas propiedades se pueden resumir en tan solo una: border. Esta propiedad puede sustituir a las tres anteriores en tan solo una línea de código. La manera de aplicarlo es muy sencilla: tras la propiedad border, debemos asignar las tres propiedades (color, width y style) de manera indistinta. Es decir, da igual el orden en el que las describas.

Puedes observar como hacerlo en este código:

p {
  border: solid #000 4px;
}

Conclusión

Como habéis visto, HTML no da la posibilidad de encuadrar textos. Sin embargo, hacerlo con estas propiedades CSS es muy fácil, por lo que no tendrás ningún problema a la hora de conseguir los resultados que desees.

¡Hasta la próxima!