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