1. Building and Marketing Websites

2. Color
• Computers create the colors you see on a
monitor by combining three colors: red,
green, and blue
• You can create a recipe for a color by telling
the computer how much of the three to mix in

3. Color Summary

4. Box Model

5. Every element in a document, both
block-level and inline, generates a
rectangular element box

7. Content Dimensions
• Width and height properties to specify the
width and height of the content area of the
element
• Can specify the width and height only of
block-level elements and non-text inline
elements such as images

8. Specifying Height
• Less common to specify the height of
elements
• Overflow property lets you specify what to do
with text that doesn’t fit

9. <style type=“text/css”>
p {
height: 100px;
overflow: auto;
}
</style>

10. Overflow Values

11. Padding
• Space between the content area and the
border

12. Specifying Padding
• padding-top, padding-right, padding-bottom,
padding-left
<style type=“text/css”>
p {
padding-top: 5em;
padding-right: 2em;
padding-bottom: 4em;
padding-left: 1em;
}
</style>

13. <style type=“text/css”>
p {
padding-top: 5em;
padding-right: 2em;
padding-bottom: 4em;
padding-left: 1em;
}
</style>

14. Padding Shorthand
• 1 value : padding: 10px;
– Applied to all sides.
• 2 values : padding: 10px 6px;
– First is top and bottom;
– Second is left and right.
• 3 values : padding: 10px 6px 4px;
– First is top;
– Second is left and right;
– Third is bottom.
• 4 values : padding: 10px 6px 4px 10px;
– Applied clockwise to top, right, bottom, and left edges
consecutively
– (TRBL).

15. Border
• Line that surrounds the element and its
padding.
• Optional.

16. Specifying Border Style
• Property : border-style
– Values: Dotted, dashed, solid, double, groove,
ridge, inset, outset
• More properties: border-top-style, border-
right-style, border-bottom-style, border-left-
style

17. p {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
width: 300px;
height: 100px;
}

18. Specifying Border Width
• Property: border-width
– Values: length units, thin, medium, thick
• More properties: border-top-width, border-
right-width, border-bottom-width, border-
left-width

19. Specifying Border Color
• Property: border-color
• More Properties: border-top-color, border-
right-color, border-bottom-color, border-left-
color

20. Specifying Border
• You can provide style, width, and color values
in one declaration
p {
border: 1px dashed #F26521;
}

21. Specifying Border
• Can also use: border-top, border-right,
border-bottom, border-left
• Values for properties may include style, width,
and color values in any order.
• If the border style value is omitted, no border
will show.

22. Margin
• Space added on the outside of the border
• Optional.

23. Specifying Margin
• Similar to padding
• margin-top, margin-right, margin-bottom,
margin-left
• Same short hands as padding apply

24. Margins
• The top and bottom margins of neighboring
elements collapse.
• Instead of accumulating, adjacent margins
overlap, and only the largest value will be
used

25. Margins
• Only horizontal margins are rendered on
inline text elements
• For non-text inline elements, margins
rendered on all sides.