1. Cascading Style Sheets (Formatting

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

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

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

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

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

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

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

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

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

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

12. Slide 12 Styling (Borders 4)

13. Slide 13 Styling (Transformations) These are new to CSS3 There are 2D and 3D transformations translate rotate scale skew matrix http://www.w3schools.com/css/css3_2dtransforms.asp

14. Slide 14 Styling Lists (Unordered)

15. Slide 15 Styling Lists (Ordered)

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

17. Slide 17 Whitespace Handling