Cascading Style Sheets (Formatting

Slide 2 Lecture Overview At this point, you have learned how and where to create styles You have not learned much about the styles themselves That’s the topic of this section

Slide 3 Length Units Length units are used in styles to define the unit of measure cm – centimeter mm – millimeter pc – pica (1/6 inch) px – point (1/72 inch) in – inches Percentage units as in 150% See EmbeddedStyle.htm

Slide 4 Styling (Text 1) HTML text can be formatted using the following: The text-align property controls the alignment of text inside of the box Valid values are center, justify, left, right The line-height property defines the height of a line Use to increase or decrease the spacing between lines

Slide 5 Styling (Text 2) The color property defines the color of the text The text-indent property controls the indentation of text along the left margin of the box The letter-spacing and word-spacing properties control the amount of whitespace between letters and words respectively

Slide 6 Styling (Text 3) The white-space property controls whitespace normalization How multiple spaces between other characters are normalized The text-decoration property controls how text is adorned underline, overline, line-through

Slide 7 Styling (Text 4) font-family font-size font-weight bold, bolder, lighter, font-style normal, italic, oblique text-transform lowercase, uppercase

Slide 8 Styling (Text 5) See TextStyles.htm in the example

Slide 9 Styling (Borders 1) This is the border surrounding the imaginary box The border has a style, which must be set for the border to display The border-style property has the following possible values dotted, dashed, solid, double, groove, ridge, inset, outset The visual effect depends on the border-width and border-color properties

Slide 10 Styling (Borders 2) Individual sides border-top border-bottom border-left border-right

Slide 11 Styling (Borders 3) The border-width property controls the thickness of the border The border-color property controls the color of the border It’s possible to control the individual border sides border-top… See borders.htm in the sample project

Slide 12 Styling (Borders 4)

Slide 13 Styling (Transformations) These are new to CSS3 There are 2D and 3D transformations translate rotate scale skew matrix

Slide 14 Styling Lists (Unordered)

Slide 15 Styling Lists (Ordered)

Slide 16 Styling Lists (Example) list-style-type denotes the style of the item number or bullet list-style-image allows you to add a picture to an image ul { list-style- image:url("/images/blueball.gif"); list-style-type:square; } See TextStyles.htm

Slide 17 Whitespace Handling