Divs

Divs are used to divide up a page into smaller, more specialised, blocks of content.

An example would be having a page about chocolate bars, and each chocolate bar has its own div.

Key Points

Divs are opened using <div> and closed using </div> tags.

Content must be added inside of these div tags.

You can set the colour of a div using background-color.

Adding a div

You can add a div to a page using the <div> opening tag and the </div> closing tag around different types of content.

Content without tags, will be styled by the rules of the div.

<div>
    <h1>This is a heading inside a div</h1>

    <p>This is a paragraph inside a div</p>

    <img src="image.png">
</div>

Styling a Heading

Internal Style Sheets / External Style Sheets

The most common style required for a div at National 5 is setting the background colour.

However, internal elements of a div (headings, paragraphs, images) may also need styled. You should style these elements directly.

div{
    background-color: black;
}

National 5 Targets

You should be able to implement divs into your website and style them.

You should be able to add content inside a div and style that content.