moving boxes the css ‘box’ model and moving elements around the page 1
TRANSCRIPT
1
Moving Boxes
The CSS ‘box’ Model andmoving elements around the
page
2
ReCap
• What is CSS?
• What is the difference between HTML and CSS?
• Divide up the page
• Cascading Style Sheet
• HTML = Content• CSS = Presentation
• <div id=“header”> </div>
3
Containers
• Every element is treated like a ‘container’
4
<body> container
“header” container
“content” container
“footer” container
<h1> container
<h2> container<p> containers
5
Containers (cont)
6
Containers (cont)
7
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
8
If tags aren’t closed…
9
Example & Demonstration
<div id=“header”><h1>this is a header title
<div id=“content”><p>this is some text</p>
</div>
10
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 {
}
11
CSS – remember to ‘close’
• Only THEN should you start defining styles and properties
body {background-color: blue;color: white;text-align: center;}
12
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?
13
Exercise 1 – Updating Webpages
14
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
15
The CSS ‘box model’ (cont)
16
The CSS ‘box model’ (cont)• 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
17
The CSS ‘box model’ (cont)
margin: 5px;padding: 2px;
lorem ipsum
lorem ipsum
5 pixels
2 pixels
2 pixels
18
Demonstration of Box Model
19
Moving things around screen
• Exercise 2