Create a simple content box using HTML & CSS - 1/2.
This tutorial is aimed at beginners and will show you how to create a basic content box using HTML and CSS.
If you have no experience at all with HTML/CSS you may struggle a little. If you find this is the case visit our HTML basics page, and/or our CSS basics page.
You will also need some knowledge of how selectors work.
Take a look below to see the end product:
Custom built laptops
Buy now, save 15%
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
A simple content box with a header section, nothing special, but it provides a way to present your content in an appealing way.
The box is created using HTML & CSS only, with one image used for the header section.
Step 1 - The image
| Left |
|---|
 |
Simply click the above image to download the ZIP file. Or if you prefer, you can create your own.
Step 2 - The HTML: Laying the structure of the content box.
To set the structure of the content box we will use HTML.
We will need an outer Div and an inner Div. The outer div will contain the header information, and of course, the inner div.
The inner div will contain the actual content.
Below is the structure of the content box:
<div class="box1"> - Outer Div
<p class="box1title"> Custom built laptops </p>
<p class="underTitle"> Buy now, save 15%</p>
<div class="box1content"> - Inner Div
<p> Text here. </p>
<p> Text Here.</p>
</div>
</div>
As you can see we have assigned individual classes to a number of our HTML elements. This is so we can apply CSS to each element separately.
Once you have the above code written into your HTML page you can preview it in your browser. Of course, the result is nothing special.
Just a bunch of text listed vertically. We can now use CSS to style the box & put everything into place.
Popular pages