In this post we are finally going to do some CSS positioning. We will start by creating a simple page that looks like this:
OK – very simple layout indeed! But we are starting with basics here. Soon things will get more complicated. For the moment, what we are trying to achieve is to have two poems, each with a box around it. We will specify what the width of the box is, and what its background colour should be.
You've got to crawl before you walk! 
The HTML for this page looks like this:
<html>
<head>
<title>A Poem </title>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body><div class = "redbox">
<div class = "heading">Peas</div>
<div class = "poem"> I eat my peas with honey <br>
I've done it all my life <br>
It makes them taste quite funny <br>
but it keeps them on my knife.
</div></div>
<div class = "bluebox">
<div class = "heading"> Horse</div>
<div class = "poem">The horse bit his master <br>
How came this to pass? <br>
It heard the good pastor say:<br>
"All flesh is grass"</div>
</body>
</html>
And the CSS looks like this:
.redbox {width:400px;
background-color:#DC143C;
}.bluebox {width:400px;
background-color:#1E90FF;}.heading{font-size: 2em;
font-family:Arial;
font-weight:bold;}.poem{font-size:1.5em;
font-family:Arial}
Notice the following:
In the HTML document:
- In the head section of the HTML, you find the reference to the external CSS style sheet. <link rel="stylesheet" type="text/css" href="style1.css" /> From this, you can see that all the CSS styles have been saved in an external style sheet with the file name style1.css
- The HTML text has been carefully divided by div tags, according to how it will be displayed.For example: Since the heading of each poem must look different from the rest of the text – a bit bigger and bolder – it was necessary to create separate div tags for each heading. If the plan was that the headings should look just like the rest of the poem – we could have created a single div tag around the heading and the poem.
- Each div tag has been linked to a
0 responses so far ↓
Like gas stations in rural Texas after 10 pm, comments are closed.