Building and Marketing Websites

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

Color Summary

Box Model

Every element in a document, both block-level and inline, generates a

rectangular element box

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

Specifying Height

• Less common to specify the height of elements

• Overflow property lets you specify what to do with text that doesn’t fit

<style type=“text/css”>

p { height: 100px;

overflow: auto;}

</style>

Overflow Values

Padding

• Space between the content area and the border

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>

<style type=“text/css”>

p { padding-top: 5em; padding-right: 2em; padding-bottom: 4em; padding-left: 1em;}

</style>

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).

Border

• Line that surrounds the element and its padding.

• Optional.

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

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

}

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

Specifying Border Color

• Property: border-color

• More Properties: border-top-color, border-right-color, border-bottom-color, border-left-color

Specifying Border

• You can provide style, width, and color values in one declaration

p { border: 1px dashed #F26521;}

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.

Margin

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

Specifying Margin

• Similar to padding• margin-top, margin-right, margin-bottom,

margin-left• Same short hands as padding apply

Margins

• The top and bottom margins of neighboring elements collapse.

• Instead of accumulating, adjacent margins overlap, and only the largest value will be used

Margins

• Only horizontal margins are rendered on inline text elements

• For non-text inline elements, margins rendered on all sides.