Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How To Create A Text Inside A Box Using HTML And CSS
The task we are going to perform in this article was how to create a text inside a box using HTML and CSS. Let’s consider a simple text −
Welcome
Now we are going to put this text (we) inside the rectangular box and the remaining text outside the box.
We lcome
let’s dive into the article for getting better understanding on creating a text inside a box using HTML and CSS. For this we are going to use the HTML div tag.
Using HTML <div> tag
In an HTML document, the <div> tag designates a division or section. The HTML <div> tag is used to group HTML elements, which are subsequently given a container and given a CSS or JavaScript style. The class or id attribute makes it simple to decorate the <div> tag. The <div> tag is open to any kind of material.
For getting more idea on creating a text inside a box using HTML and CSS, let’s look into the following example.
Example
In the following example, we are running the code for making the text inside the rectangular box.
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1 ;">
<style>
div {
width: 120px;
height: 60px;
padding: 5px;
border: 3px solid #8E44AD ;
margin: 0;
}
</style>
<div><h1>Welcome</h1></div><p><h2>To Tutorialspoint</h2>
</body>
</html>
When the script gets executed, it will generate an output consisting of text that was inside the box and some text outside the box that is displayed on the webpage.
Example
Consider the following example, in which we use CSS and <div> to make the text inside the box.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
width: 11em;
border: 3px solid #DE3163;
box-shadow: 9px 6px 4px #5B2C6F;
padding: 7px 11px;
background-image: linear-gradient(150deg, #EAFAF1 , #E8DAEF 30%,#E5E8E8 );
}
</style>
<div class="tutorial">
<p>The Best E-Learning.</p>
</div>
</body>
</html>
On running the above script, the output will pop up, displaying the text inside the box, which was applied with CSS and created a box shadow displayed on the webpage.
Example
Execute the below code and observe how we are placing the text inside the box using CSS.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
display: inline-block;
width: 65px;
height: 20px;
padding: 60px 11px;
background-color:#DFFF00;
}
.tutorial1 {
text-align: center;
}
</style>
<div class="tutorial1">
<div class="tutorial">MSD</div>
<div class="tutorial">VIRAT</div>
</div>
</body>
</html>
When the script gets executed, it will generate an output consisting of two boxes applied with CSS along with a text placed inside the box displayed on the webpage.
12K+ Views
