To finish up the professional HTML and CSS page layout that we’ve been creating in this tutorial, we are going to create a content box. This content box will hold any information we wish to display on the website. We are going to create this content box using two divisions. The first division will be the title of our content, and the second division will be the actual content.
The ContentBox Title
Our title is going to be a rectangular background with our title text overtop. First we create this rectangle. You will notice there is no border on the bottom of the title. This is because the border on the top of the actual box will rest up against the bottom of the title. If we set the border for the bottom of the title, as well as the top of the box underneath that section of the border will be twice as thick. The margins are set the way they are, so that if we have a page with multiple content boxes they will not rest right against each other.
Next we are going to style the H1 tag within our contentboxtitle division. I am choosing to use bold white Helvetica font which stands out nicely on the red background of the content box title.
The Content Box
The content box is simply going to have a white background with a black border. It will sit right up against the content box title such that they wil appear as one entity. Therefore we do not set a top margin.
In the html we can create our complete content box by referencing all the CSS divisions, and including our title and some content. If you have been following along in the tutorial we would put the below HTML code in the our content div that was created earlier in the page tutorial.
<h1>My Content’s title</h1>
<p> my content</p>
The Final Result
Here is the content boxes in use. In you have been following along in the tutorial I also inserted an image into the header division of the webpage.