1. CSS BOXES &
DIMENSIONS
Advanced CSS techniques

2. the box model
• All HTML elements are rendered as
boxes
• Stylesheets can control how to display
these boxes (color, placement, etc)
• There arepaddingproperties of boxes:
border,
3 basic
and margin

4. BORDERS
border-width:3px;
border-style:dashed;
border-color:green;
border-left-width:thick;
border-bottom-style:solid;
border-right-color:blue;

5. MARGINS
margin:5px;
margin-top:30%;
margin-bottom:-50px;
margin-left:auto;
margin-right:auto;

6. PADDING
padding:5px;
padding-top:10%;
padding-bottom:2em;
padding-left:30px;
padding-right:2.5em;

7. box model shortcuts
• padding:5px; all sides 5px
• margin:5px 2px;
top & bottom=5px, left & right 2px
• border:1px 2px 3px;
top=1px, left & right=2px, bottom=3px
• padding:7px 3px 1px 6px;
(clockwise from top)

8. DIMENSIONS
• The size of the box can be changed
using these properties:
• width:80%
• height:300px

9. Add all the
values to get
the actual
dimensions of
the box

10. Question 01
width:300px;
height:100px;
border:10px
2px
3px;

11. Question 01
WIDTH HEIGHT
304
px 113
px

12. Question 02
width:900px;
height:35px;
border:0px
1px
1px
10px;
padding:20px

13. Question 02
WIDTH HEIGHT
951
px 76
px

14. Question 03
width:20em;
height:8em;
padding:2em;
default
font
size=16px

15. Question 03
WIDTH HEIGHT
(24
em) (12
em)
384
px 192
px

16. Question 04
width:960px;
height:180px;
padding:5px;
margin-­‐right:20px;
padding-­‐left:20px;

17. Question 04
WIDTH HEIGHT
1010
px 190
px

18. Question 05
width:15.5em;
height:2em;
border:0.5em
1.2em
blue;
default
font
size=10px

19. Question 05
WIDTH HEIGHT
(17.9em)
(3
em)
179
px 30
px

20. Question 06
width:440px;
height:270px;
margin:10px;
padding:12px;
border:3px
4px
0px
1px;

21. Question 06
WIDTH HEIGHT
489
px 317
px

22. SPEED TEST 01
<div id="cool">
<p>this box is cool</p>
</div>
<div id="hot">
<p>this box is hot</p>
</div>

23. speed test 01

24. speed test 01
#cool {
background-color:blue;
width:500px;
height:200px;
}
#hot {
background-color:red;
width:200px;
height:200px;
}

25. speed test 02

26. speed test 02
#cool {
background-color:blue;
width:500px;
height:200px;
padding:10px;
}
#cool p {
border:5px solid white;
padding:10px;
}

27. SPEED TEST 03

28. speed test 03
#hot {
background-color:red;
width:200px;
height:200px;
border-width:10px;
border-style:dotted dashed;
margin-left:520px;
margin-top:-220px;
}

29. speed test 04

30. speed test 04
#hot p {
width:100px;
border:3px solid yellow;
margin-left:auto;
margin-right:auto;
font-size:30px;
padding:5px;
}

31. types of boxes
• HTML boxes can be categorized into
two types:
1. Block
2. Inline
• They can be controlled by the CSS
property display

32. BLOCK BOX
• Occupies the whole
width of the
container element
• Has whitespace
before and after it
• Dimensions are <p> <h1> to <h6>
<div> <ul> <ol> <li>
controllable

33. inline box
• Only as wide as
its content
• Flows with text
lines
• Dimensions
aren’t easily
controllable <a> <span>
<strong> <em> <img>

36. inline vs block

37. speed test 05
<ul>
<li><a href="#">Sisig</a></li>
<li><a href="#">Sinigang</a></li>
<li><a href="#">Tapsilog</a></li>
<li><a href="#">Kaldereta</a></li>
<li><a href="#">Adobo</a></li>
<li><a href="#">Bistek</a></li>
<li><a href="#">Mechado</a></li>
<li><a href="#">Laing</a></li>
</ul>
<a href="#">Back to Home</a>

38. Speed Test 05

39. Speed Test 05

40. speed test 05
ul#navi {
list-style:none;
margin:0;
padding:0;
}

41. Speed Test 05

42. speed test 05
ul#navi li a{
font-family:Impact;
text-decoration:none;
}

43. Speed Test 06

44. speed test 06
ul#navi li a{
text-decoration:none;
border-left:5px solid orange;
border-right:5px solid orange;
padding:5px;
}

45. Speed Test 07

46. speed test 07
ul#navi li a:link,
ul#navi li a:visited {
color:black;
}

47. Speed Test 08

48. speed test 08
ul#navi {
width:100px;
}
ul#navi li a{
display:block;
}

49. Speed Test 09

50. speed test 09
ul#navi li a{
margin-top:5px;
text-align:center;
}

51. Speed Test 10

52. speed test 10
ul#navi li a {
text-transform:uppercase;
}
ul#navi li a:hover{
color:white;
background:red;
}