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 </div> 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 </span> 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 tagThis is a strapline. Wrap this in a paragraph tagThis 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, smallThis is footer text, perhaps a copyright notice
- Wrap the title in an h1 tag and the strapline in a p tag.
- Wrap the strapline in a p tag.
- Wrap each of the three lines of body text in p tags
- Wrap line of footer text in a p tag
- 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 </div> tag so the web browser knows where the div finishes.
Further Exercise - more divs
- Wrap the three body text paragraphs in a div tag. This is your main div. Put a border around the main div.
- Wrap the footer paragraph in a div tag. Put a border around the footer div.
- 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.
- Add a background color to the header div. use your CSS cheat sheet to find out the correct rule to apply.