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