Pres

661 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
661
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pres

  1. 1. Building and Marketing Websites
  2. 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. 3. Color Summary
  4. 4. Box Model
  5. 5. Every element in a document, both block-level and inline, generates a rectangular element box
  6. 6. 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
  7. 7. Specifying Height • Less common to specify the height of elements • Overflow property lets you specify what to do with text that doesn’t fit
  8. 8. <style type=“text/css”> p { height: 100px; overflow: auto; } </style>
  9. 9. Overflow Values
  10. 10. Padding • Space between the content area and the border
  11. 11. 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>
  12. 12. <style type=“text/css”> p { padding-top: 5em; padding-right: 2em; padding-bottom: 4em; padding-left: 1em; } </style>
  13. 13. 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).
  14. 14. Border • Line that surrounds the element and its padding. • Optional.
  15. 15. 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
  16. 16. p { border-top-style: solid; border-right-style: dashed; border-bottom-style: double; border-left-style: dotted; width: 300px; height: 100px; }
  17. 17. 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
  18. 18. Specifying Border Color • Property: border-color • More Properties: border-top-color, border- right-color, border-bottom-color, border-left- color
  19. 19. Specifying Border • You can provide style, width, and color values in one declaration p { border: 1px dashed #F26521; }
  20. 20. 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.
  21. 21. Margin • Space added on the outside of the border • Optional.
  22. 22. Specifying Margin • Similar to padding • margin-top, margin-right, margin-bottom, margin-left • Same short hands as padding apply
  23. 23. Margins • The top and bottom margins of neighboring elements collapse. • Instead of accumulating, adjacent margins overlap, and only the largest value will be used
  24. 24. Margins • Only horizontal margins are rendered on inline text elements • For non-text inline elements, margins rendered on all sides.

×