April 28, 2016

Create Text Inside Colored Rectangle Box With Html And CSS


Here is a quick tutorial on how to create a rectangle box with centralized text using html and CSS, like this:

Good friends, good books and a sleepy conscience: this is the ideal life - Mark Twain


To create this effect, follow the code as shown below:

<div style="padding: 0px; background-color: #acfa58; line-height: 1.4;">
<h2 style="text-align: center;"><strong>Good friends, good books and a sleepy conscience: this is the ideal life - Mark Twain</strong></h2>
</div>

Note: You can make changes to the code above according to your preference. For instance, the background-color or the font-size.

For my example above: Background-color I use  #acfa58

Font-size : I use h2.

You can replace them with other choices of your liking.

Hope you find this tutorial useful.


Written by: Kher Cheng Guan