In the previous post, we looked at how an HTML page structure could be expressed as a series of boxes. In this post I want to show you a new HTML tag that is used a lot in CSS Positioning: The div tag.
CSS Positioning at its simplest, consists of two tasks:
- Use html to Divide each document up into sections .
- Use CSS to create styles for these sections that will define where on the page they appear, and what they will look like.
The div tag helps you with the first step; dividing the content of a page into separate sections, ready to be styled.
Lets look at this example again:
<html>
<head>
<title> poem </title>
</head>
<body>
<h2> Kitten </h2>
<p> The only problem with a kitten is that </br> it eventually becomes a cat. </p>
</body>
</html>
Even without any CSS, your browser will display the content of the <h2> tag in a larger font, and will place a line break before and after content contained within a <p> tag. Its as though these tags come with their own inherent styles. You can over-write these inherent styles easily, by re-defining the tag with a CSS definition. For example, you could re-define the h2 tag by using the following CSS definition, which will make the text appear smaller:
h2{font-size:8px; }
But it would be awkward if all the tags had inherent style that had to be over-written in this way. That is why there are some neutral tags that exist purely to indicate the beginning and end of a section, and carry no inherent style. One such a tag is the div tag.
I could mark up the content in the HTML example above with a div tag like this:
<html>
<head>
<title> poem </title>
</head>
<body>
<div> Kitten </div>
<div> The only problem with a kitten is that </br> it eventually becomes a cat. </div>
</body>
</html>
My first problem is: how can I get the heading ("Kitten") to display bigger than the content ("The only problem…")? One way would be to re-define the div tag with a CSS rule like this:
div{font-size:14px }
Then all the content in all div tags on the page will be styled by the same rule – in this case, both the heading and the content will appear bigger. This is a problem, as I want only the heading to be bigger, and the body copy of the poem to be formatted quite differently.
So a rule that re-defines the tag does not work for me. Instead, I should define my own class, and then I can apply the class to any tag, as I see fit. You can read more about defining your own class here.
In this example, I create my own classes by writing the following CSS definitions:
.larger{font-size:14px }
.smaller{font-size:10px }
Then I put the references to my new classes into the appropriate div tags in the HTML document like so:
<div class = "larger"> Kitten </div>
<div class = "smaller"> The only problem with a kitten is that </br> it eventually becomes a cat. <div>
The div tag is useful because it does not carry its own inherent style. You can use it to divide your content, ready to be styled.
So you know about the HTML box model, and you also know how to use div tags to mark up your content. In the next post we are going to do some actual CSS Positioning.
0 responses so far ↓
There are no comments yet...Kick things off by filling out the form below.