Divisions and Spans

Sometimes we want to add styling to an arbitrary region of a document. A portion of a document might be a header or a sidebar. A region of text might just be special somehow. Perhaps it’s an address that we want to highlight in a particular way, or a date that needs special formatting.

For these purposes we have divs and spans.

A document division is intended to demarcate a largish region of text like a header, sidebar or footer. It groups a number of related items. It’s defined using the <div> and opening and closing tags.

A span is designed to demarcate a small region of text, maybe just a word, not more than a line or two. Span’s are defined using the <span> and opening and closing tags.

Exercise - Make some divs

Here is the document to use. Copy and paste this to give yourself a start:

This is a title. Wrap this in an h1 tag

This is a strapline. Wrap this in a paragraph tag

This is body text. Wrap this in a paragraph tag.

This is more body text. Wrap this in a paragraph tag.

This is a line of text containing some words that might want to be styled appropriately. Red, green, blue, big, small

This is footer text, perhaps a copyright notice

1. Wrap the title in an h1 tag and the strapline in a p tag.
2. Wrap the strapline in a p tag.
3. Wrap each of the three lines of body text in p tags
4. Wrap line of footer text in a p tag
5. Wrap the h1 and strapline together in a div tag. This groups them. They are now grouped. Add a style attribute to the div tag like so:

<div style="”border:2px" solid grey”></div>

As always, remember to close your div tag using a matching tag so the web browser knows where the div finishes.

Further Exercise - more divs

1. Wrap the three body text paragraphs in a div tag. This is your main div. Put a border around the main div.
2. Wrap the footer paragraph in a div tag. Put a border around the footer div.
3. Wrap span tags around the words: red, green, blue, big and small. Give each element its correct style, so the word blue should be blue.
4. Add a background color to the header div. use your CSS cheat sheet to find out the correct rule to apply.