Using Internal CSS
To wrap text around an image in an HTML document with Internal CSS, the following steps need to be followed. By following these steps, wrapping text can be achieved effortlessly.
To begin, the initial step is to input the HTML code into a text editor or open an already existing HTML file in the preferred text editor to enclose the text.
<!Doctype Html>
<Html>
<Head>
<Title>
Wrap a text around an image
</Title>
</Head>
<Body>
Hello User!.... <br>
Html Tutorial <br>
This page helps us to understand how to wrap the text around an image in Html using CSS.
</Body>
</Html>
Step 2: Now, we have to type the CSS code for aligning the image. So, we have to type the <style> tag in the <head> tag just after the <title> tag .
<Head>
<Title>
Wraping text around image
</Title>
<style>
</style>
</head>
Step 3 involves the definition of different attributes to wrap text around an image. This requires the creation of a class.
.wrapingimage
{
float: left;
margin: 30px 12px 3px 4px;
border: 2px solid blue;
}
Step 4: Next, it is necessary to apply the designated class to the body tag, as illustrated in the screenshot below.
<div class="wrapingimage">
<img src=
"https://placehold.co/400x300/34495e/ffffff?text=Logo" height="100" width="100"
alt="image">
</div>
Step 5: Finally, it is necessary to save the HTML file before proceeding to run it in a web browser.
<!DOCTYPE html>
<Html>
<Head>
<Title>
Wraping text around image
</Title>
<style>
.wrapingimage
{
float: left;
margin: 30px 12px 3px 4px;
border: 2px solid blue;
}
</style>
</head>
<body>
Hellooo User!!!....
<div class="wrapingimage">
<img src=
"https://placehold.co/300x300/9b59b6/ffffff?text=Logo" height="100" width="100"
alt="image">
</div>
<p>
If we want to wrap the text around an image in Html document using Internal CSS then we have to follow the steps which are given below. Using these steps we can easily wrap a text.
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to wrap the text.
Step 2: Now, we have to type the CSS code for aligning the image. So, we have to type the style tag in the head tag just after the title tag.
Step 3: And, then we have to define the various properties for wrapping the text around the image. So, we have to define a class.
</p>
</Body>
</Html>
The result of the HTML code above can be viewed in the screenshot presented below: