How To Create A Box In Html With Text

In this blog, you are going to learn how to create a box in HTML with text. We will explore two methods to achieve this: using CSS to style a div element as a box and adding text inside it.

Create a Styling Text Box with CSS

Styling a box in HTML involves using CSS to define the appearance of a div element. Here is an example of how to create a box with text using CSS:

<style>
 .box {
   width: 200px;
   height: 100px;
   background-color: lightblue;
   padding: 10px;
   text-align: center;
}
</style>
<div class="box">
  This is a box with text.
</div>

Explanation:

1. The .box class in the CSS defines the styling for the box.
2. width and height properties set the dimensions of the box.
3. background-color sets the background color of the box.
4. padding adds space inside the box for the text.
5. text-align: center centers the text horizontally within the box.

Adding Text Inside the Box

To add text inside the box, you can simply include the text within the <div> element. Here is the example code:

<div class="box">
    This is a box with text.
</div>

1. The text "This is a box with text." is placed inside the <div> element.
2. Any text content within the <div> will be displayed inside the styled box.
3. You can customize the text content and style of the box as needed.

Conclusion:

In this article, you learned how to create a box in HTML with text using CSS styling and text insertion methods.

For more advanced styling and layout options, consider exploring CSS frameworks like Bootstrap, which provide pre-designed components for creating boxes with text.