3. BOX DIMENSIONS width, height
div { height: 300px; width: 400px; background-color: #ee3e80;} p { height: 75%; width: 75%; background-color: #e1ddda;}

5. LIMITING WIDTH min-width, max-width
td.description { min-width: 450px; max-width: 650px; text-align: left; padding: 5px; margin: 0px;}
Note: need to expand and contract browser to demonstrate this

7. min-height, max-height
LIMITING HEIGHT
min-height, max-height
h2, p { width: 400px; font-size: 90%; line-height: 1.2em;} h2 { color: #0088dd; border-bottom: 1px solid #0088dd;} p { min-height: 10px; max-height: 30px;}
Note: need to expand and contract browser to demonstrate this

9. OVERFLOWING CONTENT overflow
p.one { overflow: hidden;} p.two { overflow: scroll;}
Explain: important when risk of overlapping elements (esp. when do not know amount of content in given element)
Note: need to expand and contract browser to demonstrate this

11. BORDER, MARGIN & PADDING
Click: border
Click: margin
Click: padding

12. WHITE SPACE & VERTICAL MARGIN
Moog
Moog synthesizers were created
by Dr. Robert Moog under the
company name Moog Music.
Popular models include Moog
Modular, Minimoog, Micromoog,
Moog Rogue, and Moog Source
Moog
Moog synthesizers were created
by Dr. Robert Moog under the
company name Moog Music.
Popular models include Moog
Modular, Minimoog, Micromoog,
Moog Rogue, and Moog Source
Arp
ARP Instruments Inc. was set up
by Alan Peralman, and was the
main competitor for Moog during
the 1970's. Popular models
include the Arp 2600 and the
ARP Odyssey.
Arp
ARP Instruments Inc. was set up
by Alan Peralman, and was the
main competitor for Moog during
the 1970's. Popular models
include the Arp 2600 and the
ARP Odyssey.
Fade in: three paragraphs
Explain: vertical margins collapse
Click: three more paragraphs
Explain: whitespace helps make more readable and attractive
Sequential Circuits
Sequential Circuits Inc was
founded by Dave Smith, and the
company was pivotal in the
creation of MIDI. Famous models
include the Prophet 5, Prophet
600, and Pro-One.
Sequential Circuits
Sequential Circuits Inc was
founded by Dave Smith, and the
company was pivotal in the
creation of MIDI. Famous models
include the Prophet 5, Prophet
600, and Pro-One.

13. BORDER WIDTH border-width
p.one { border-width: 2px;} p.two { border-width: thick;} p.three { border-width: 1px 4px 12px 4px;}
Possible keywords: thin, medium, thick
Cannot use percentages
Note: can specify separate values with
border-top-width
border-right-width
border-bottom-width
border-left-width

15. BORDER STYLE border-style
p.one {border-style: solid;} p.two {border-style: dotted;} p.three {border-style: dashed;} p.four {border-style: double;} p.five {border-style: groove;} p.six {border-style: ridge;} p.seven {border-style: inset;} p.eight {border-style: outset;}
Note: can specify separate values with
border-top-style
border-right-style
border-bottom-style
border-left-style

17. BORDER COLOR border-color
p.one { border-color: #0088dd;} p.two { border-color: #bbbbaa # #ee3e80 #0088dd;}
Note: can specify separate values with
border-top-color
border-right-color
border-bottom-color
border-left-color

19. BORDER SHORTHAND
border
p { width: 250px; border: 3px dotted #0088dd;}

20. BORDER SHORTHAND
border
p { width: 250px; border: 3px dotted #0088dd;}

21. BORDER SHORTHAND
border
p { width: 250px; border: 3px dotted #0088dd;}

22. BORDER SHORTHAND
border
p { width: 250px; border: 3px dotted #0088dd;}

24. PADDING
padding
p { width: 275px; border: 2px solid #0088dd;} p.example { padding: 10px;}
Note: can specify individual values using
padding-top
padding-right
padding-bottom
padding-left

25. PADDING
padding
p { width: 275px; border: 2px solid #0088dd;} p.example { padding: 10px;}
Note: can specify individual values using
padding-top
padding-right
padding-bottom
padding-left

27. MARGIN
margin
p { width: 200px; border: 2px solid #0088dd; padding: 10px;} p.example { margin: 20px;}
Explain: Vertical margins collapse
Note: can specify individual values using
margin-top
margin-right
margin-bottom
margin-left

28. MARGIN
margin
p { width: 200px; border: 2px solid #0088dd; padding: 10px;} p.example { margin: 20px;}
Explain: Vertical margins collapse
Note: can specify individual values using
margin-top
margin-right
margin-bottom
margin-left

30. CENTERING CONTENT
body { text-align: center;} p { width: 300px; padding: 50px; border: 20px solid #0088dd;} p.example { margin: 10px auto 10px auto; text-align: left;}

31. CENTERING CONTENT
body { text-align: center;} p { width: 300px; padding: 50px; border: 20px solid #0088dd;} p.example { margin: 10px auto 10px auto; text-align: left;}

32. CENTERING CONTENT
body { text-align: center;} p { width: 300px; padding: 50px; border: 20px solid #0088dd;} p.example { margin: 10px auto 10px auto; text-align: left;}
Note: Auto values for left and right margins

33. CENTERING CONTENT
body { text-align: center;} p { width: 300px; padding: 50px; border: 20px solid #0088dd;} p.example { margin: 10px auto 10px auto; text-align: left;}

35. IE6 BOX MODEL Analog synthesizers are often said to have
a "warmer" sound
than their digital
counterparts.
Width and padding are doubled unless you use a DOCTYPE declaration for HTML5, HTML4 strict, or HTML4 transitional
Click: shows border of box
Click: shows IE6 border of box
Analog synthesizers
are often said to have
a "warmer" sound
than their digital
counterparts.

36. IE6 BOX MODEL Analog synthesizers are often said to have
a "warmer" sound
than their digital
counterparts.
Width and padding are doubled unless you use a DOCTYPE declaration for HTML5, HTML4 strict, or HTML4 transitional
Click: shows border of box
Click: shows IE6 border of box
Analog synthesizers
are often said to have
a "warmer" sound
than their digital
counterparts.

37. CHANGE INLINE / BLOCK display
li { display: inline; margin-right: 10px;} li.coming-soon { display: none;}

38. CHANGE INLINE / BLOCK display
li { display: inline; margin-right: 10px;} li.coming-soon { display: none;}
Possible values: inline, block, inline-block, none

40. HIDING BOXES visibility
li { display: inline; margin-right: 10px;} li.coming-soon { visibility: hidden;}

41. HIDING BOXES visibility
li { display: inline; margin-right: 10px;} li.coming-soon { visibility: hidden;}
Explain: leaves space box would take up otherwise (unlike display:none)
Possible values: hidden / visible

43. CSS3: BORDER IMAGES border-image
p.one { -moz-border-image: url("dots.gif") stretch; -webkit-border-image: url("dots.gif") stretch; border-image: url("dots.gif") stretch;} p.two { border-image: url("images/dots.gif") round;}
Note: The box must also have a border width for the image to be shown
Explain: Different browser-specific implementations for max compatibility

44. CSS3: BORDER IMAGES border-image
p.one { -moz-border-image: url("dots.gif") stretch; -webkit-border-image: url("dots.gif") stretch; border-image: url("dots.gif") stretch;} p.two { border-image: url("images/dots.gif") round;}
The URL of the image

45. CSS3: BORDER IMAGES border-image
p.one { -moz-border-image: url("dots.gif") stretch; -webkit-border-image: url("dots.gif") stretch; border-image: url("dots.gif") stretch;} p.two { border-image: url("images/dots.gif") round;}
Where to slice the image

46. CSS3: BORDER IMAGES border-image
p.one { -moz-border-image: url("dots.gif") stretch; -webkit-border-image: url("dots.gif") stretch; border-image: url("dots.gif") stretch;} p.two { border-image: url("images/dots.gif") round;}
What to do with the straight edges; the possible values are:stretch - stretches the image
repeat - repeats the image
round - like repeat but if the tiles do not fit exactly, scales the tile image so they will

48. CSS3: BOX SHADOWS box-shadow
p.one { -moz-box-shadow: -5px -5px #777777; -webkit-box-shadow: -5px -5px #777777; box-shadow: -5px -5px #777777;} p.two { box-shadow: 5px 5px 5px #777777;} p.three { box-shadow: 5px 5px 5px 5px #777777;} p.four { box-shadow: px #777777;} p.five { box-shadow: inset px #777777;}
Explain: first example shows vendor prefix versions for max compatibility
Up to 4 values:
Horizontal offset Vertical offset Blur Distance Spread of Shadow

49. CSS3: BOX SHADOWS box-shadow
p.one { -moz-box-shadow: -5px -5px #777777; -webkit-box-shadow: -5px -5px #777777; box-shadow: -5px -5px #777777;} p.two { box-shadow: 5px 5px 5px #777777;} p.three { box-shadow: 5px 5px 5px 5px #777777;} p.four { box-shadow: px #777777;} p.five { box-shadow: inset px #777777;}

50. CSS3: BOX SHADOWS box-shadow
p.one { -moz-box-shadow: -5px -5px #777777; -webkit-box-shadow: -5px -5px #777777; box-shadow: -5px -5px #777777;} p.two { box-shadow: 5px 5px 5px #777777;} p.three { box-shadow: 5px 5px 5px 5px #777777;} p.four { box-shadow: px #777777;} p.five { box-shadow: inset px #777777;}

51. CSS3: BOX SHADOWS box-shadow
p.one { -moz-box-shadow: -5px -5px #777777; -webkit-box-shadow: -5px -5px #777777; box-shadow: -5px -5px #777777;} p.two { box-shadow: 5px 5px 5px #777777;} p.three { box-shadow: 5px 5px 5px 5px #777777;} p.four { box-shadow: px #777777;} p.five { box-shadow: inset px #777777;}

52. CSS3: BOX SHADOWS box-shadow
p.one { -moz-box-shadow: -5px -5px #777777; -webkit-box-shadow: -5px -5px #777777; box-shadow: -5px -5px #777777;} p.two { box-shadow: 5px 5px 5px #777777;} p.three { box-shadow: 5px 5px 5px 5px #777777;} p.four { box-shadow: px #777777;} p.five { box-shadow: inset px #777777;}

54. CSS3: ROUNDED CORNERS border-radius
p { border: 5px solid #ee3e80; padding: 20px; width: 275px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

55. CSS3: ROUNDED CORNERS border-radius
p { border: 5px solid #ee3e80; padding: 20px; width: 275px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
Note: vendor prefixes for max compatibility

57. CSS3: ELLIPTICAL SHAPES border-radius
p.one { border-radius-top-left: 80px 50px;} p.two { border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;} p.three { padding: 0px; border-radius: 100px;}
Note: No vendor prefixes shown here

58. CSS3: ELLIPTICAL SHAPES border-radius
p.one { border-radius-top-left: 80px 50px;} p.two { border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;} p.three { padding: 0px; border-radius: 100px;}
Individual corner styling

59. CSS3: ELLIPTICAL SHAPES border-radius
p.one { border-radius-top-left: 80px 50px;} p.two { border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;} p.three { padding: 0px; border-radius: 100px;}
Individual horizontal values to create ellipses

60. CSS3: ELLIPTICAL SHAPES border-radius
p.one { border-radius-top-left: 80px 50px;} p.two { border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;} p.three { padding: 0px; border-radius: 100px;}
Individual vertical values to create ellipses

62. CSS treats each HTML element as if it has its own box.
SUMMARY
CSS treats each HTML element as if it has its
own box.
Clicks: Load individual bullets

63. You can use CSS to control the dimensions of a box.
SUMMARY
You can use CSS to control the dimensions of a box.
Clicks: Load individual bullets

64. You can also control the borders, margins and padding for each box
SUMMARY
You can also control the borders, margins and padding for each box
with CSS.
Clicks: Load individual bullets

65. SUMMARY
It is possible to hide elements using the display and visibility properties.
Clicks: Load individual bullets

66. SUMMARY
Block-level boxes can be made into inline boxes, and inline boxes made into block-level boxes.
Clicks: Load individual bullets

67. SUMMARY
Legibility can be improved by controlling the width of boxes containing text and the leading.
Clicks: Load individual bullets

68. the ability to create image borders and rounded borders.
SUMMARY
CSS3 has introduced
the ability to create image borders and rounded borders.
Clicks: Load individual bullets