Moving Boxes The CSS ‘box’ Model and moving elements around the page 1

ReCap What is CSS? What is the difference between HTML and CSS? Divide up the page 2 Cascading Style Sheet HTML = Content CSS = Presentation

Containers Every element is treated like a ‘container’ 3

4 container “header” container “content” container “footer” container container containers

5 Containers (cont)

6

Close Tags! Important to put the OPENING tag and the CLOSING tag –It’s like a conversation, which never ends Can affect the rest of the page 7

If tags aren’t closed… 8

Example & Demonstration 9 this is a header title this is some text

CSS – remember to ‘close’ When writing a CSS style for an element, remember to CLOSE the declaration Start by writing the ELEMENT and the OPENING and CLOSING braces body { } 10

CSS – remember to ‘close’ Only THEN should you start defining styles and properties body { background-color: blue; color: white; text-align: center; } 11

Updating a Webpage Webpages never stay the same –How often have you seen a webpage change? If they don’t change, they’ll be seen as ‘boring’ or irrelevant What can prompt change? 12

Exercise 1 – Updating Webpages 13

The CSS ‘box model’ Each element is given it’s own space We can control how close – or far apart – each element is from another This creates greater flexibility to build a site for a variety of devices 14

The CSS ‘box model’ (cont) 15

The CSS ‘box model’ (cont) 16 The MARGIN and PADDING are ‘invisible’ areas They cannot be given colour The margin is ALL the space SURROUNDING the element The border is an option that can be given to any element The padding is the surrounding space between the element and the border

The CSS ‘box model’ (cont) margin: 5px; padding: 2px; 17 lorem ipsum 5 pixels 2 pixels

Demonstration of Box Model 18

Moving things around screen Exercise 2 19