1. Cascading Style Sheets (Formatting)

2. Lecture Overview (1)
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 lecture

3. Lecture Overview (2)
Text and Fonts
Spacing
Borders

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

5. Styling Size A box (paragraph) has a height and width
Width can be set to an absolute value or a percentage
Height is typically set to an absolute value
Limited use for this property as we will see when we talk about flow

6. Styling (Color 1) Color is an important part of any page
The color property defines the color of the text
The background-color defines the color of the background
CSS 3 supports some enhanced color formatting like textures and gradients

7. Styling (Color 2) There are three ways to specify a color
A color name, such as red, blue, green, etc…
These are called named colors and there about 255 of them
A HEX value such as “#FF0000”, which is red
A RGB value such as rgb(255,0,0)

8. Styling (Color) (Best Practices)
Make sure that there is adequate contrast between background and foreground colors
Don’t use too many colors
Use bright colors only for emphasis
Remember that users might be colorblind
Here is a nice color picker

9. Styling (Text 1)
The text-align property controls the alignment of text inside of the box
Valid values are center, justify, left, right
The text-decoration property controls how text is adorned
underline, overline, line-through

10. Styling (Text 2)
The text-indent property controls the indentation of text along the left margin of the box
Only the first line is indented
Positive values indent to the right
Negative values indent to the left (outdent)
The letter-spacing and word-spacing properties control the amount of whitespace between letters and words respectively

11. Styling (Text 3)
The white-space property controls whitespace normalization
How multiple spaces between other characters are normalized
The line-height property defines the height of a line
Use to increase or decrease the spacing between lines

12. Whitespace Handling Value Description normal
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap
Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered
pre
Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML
pre-line
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
inherit
Specifies that the value of the white-space property should be inherited from the parent element

13. Styling (Fonts 1) We can also control fonts font-family text-transform
This controls the font that will be used
Note the difference between serif and sans-serif fonts
We use fallbacks in case the browser does not support the desired font
text-transform
lowercase, uppercase, capitalize

14. Styling (Fonts 2) Fonts have a style as follows (font-style)
Text is shown normally (normal)
Text is shown in italics (italic)
Similar to italics (oblique)
Fonts have a size (font-size)
You can use explicit sizes
You an use x.x em
1 em = 16 pixels
2 em = 32 pixels
2.5 em = 40 pixels
Percentages can also be used

15. Styling (Fonts) Fonts have a weight (font-weight)
bold, bolder, lighter
Values between 100 and 900 can also be used
The default weight is 400
700 is the same as bold

16. Styling Lists (Unordered)
Value
Description
none
No marker
disc
Default. The marker is a filled circle
circle
The marker is a circle
square
The marker is a square

17. Styling Lists (Ordered)
armenian
The marker is traditional Armenian numbering
Decimal
The marker is a number
decimal-leading-zero
The marker is a number padded by initial zeros (01, 02, 03, etc.)
georgian
The marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alpha
The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek
The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin
The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman
The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha
The marker is upper-alpha (A, B, C, D, E, etc.) 
upper-latin
The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman
The marker is upper-roman (I, II, III, IV, V, etc.)

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

19. Styling (Borders 1)
This is the border surrounding the imaginary box (remember we mentioned the box model)
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

20. Styling (Borders 2) We can control each side of the border border-top
border-bottom
border-left
border-right

21. 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 IS360CSSBorders.htm in the sample project

22. Styling (Borders 4) New to CSS 3, we can easily create rounded corners
Use the border-radius property to crate rounded corners
border-radius is a shorthand property for border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom-right-radius

23. Styling (Borders 5)

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