3. Measurement Many CSS properties (values within the declaration) require that you specify a unit of measurement, such as spacing between elements, border widths, and font size. Knowing these measurements will minimize errors in the look you were expecting.

4. Measurement Continued CSS supports measuring values in inches, centimeters, and millimeters. However, the actual size of these can be very unpredictable from one monitor to the next. Therefore, it is not recommended. Pixels are the building blocks of your computer monitor. However, the exact size of a pixel cannot be predicted, but because it is a real unit of measurement in computer monitors, it is widely used in CSS. Pixels are not recommended for font sizes.

5. Measurement Continued… Points and Picas: There are 72 points to an inch, and 6 picas in an inch (or 12 points in one pica). Again, they are not recommended for use as they are based on the inch which is determined to be unreliable. Ems and Exes: An em is a unit of measurement defined as the width of a capital letter M (within the current font). Browsers treat an em as an equivalent to the font size, so if your text is 16 pixels, 1 em would equal 16 pixels. Exes are defined as the width of a lowercase “x,” though most browsers simply treat it as ½ an em.

6. Measurement Continued… Percents: CSS rules inherit from other rules, so the property with a percentage value will be that percent of whatever the size defined in the body. (Example: if you set the size of the body at 90%, and then a paragraph at 80%, the paragraph’s size would be 80% of the 90% of the default size.) IE and Font Scaling: Internet explorer will only allow the user to resize text only if you set your font size in ems, exes, or percents. This applies only to font size.

7. Measurement Continued… Specifying units: Most units have associated abbreviations, so if you want to use pixels, write px.

9. Font-weight Weight values are stated as: Lighter, normal, bold, or bolder You can use the normal value to remove boldness that may be inherited from previous style rules. You can also specify a number value using a multiple of 100 from 100 to 900 to control the boldness level. Not all browsers support this feature. Selector {font-weight: bold} Try it!

10. Font-style Font-style property accepts 3 different values: Italic, oblique, normal Italic and oblique apply similar slanted formatting to text whereas normal makes text non-italic Avoid using italics on small text as it can make it hard to read. Selector {font-style: oblique} Try it!

11. Text-indent You can use the text-indent property to indent your paragraphs to give them the traditional look and feel. You can also use the text-indent property to apply a hanging indent (also called outdent) by using negative values. Can set the value as a specific measurement value or as a percentage of the overall text block width. Selector {text-indent: 30px} Selector {text-indent: 20%} Can also use mm, cm, in, pt, pc, ex, or em Try it!

12. Font-size You can use the font-size property to emphasize or de- emphasize different sections of text on your page. Accepts a variety of measurement units: pt, px, pc, ex, em Can also use xx-small, x-small, small, medium, large, x- large, or xx-large font size Selector {font-size: 20pt} Try it!

13. Font-family Choose the font by name Still want to apply the rules the same as hand-coded html: Stay with safe fonts. Use a few different fonts as browsers accept fonts that others may not. When creating the style, you do not need to place the declaration values in quotations; however, if the name is more than one word, you will have to place the name in quotations. Selector {font-family: arial, “Gill Sans”, “Times New Roman”, verdana;} Try it!

14. Text-transform You can change the text case for a particular tag. There are four case values: Capitalize : if you want the first character of each word to appear capitalized Uppercase: as in putting on the CAPS to your font Lowercase: all characters will remain in lowercase None: Will simply leave the text as is (as it was originally typed) Selector {text-transform: uppercase} Try it!

15. Text-align You can control the horizontal positioning of block- level text in your page. Block-level text includes paragraphs, tables, and other elements that display a blank line and after the element on the page. Values are stated in 4 ways: Right, left, center, and justify Selector {text-align: justify} Try it!

16. Line-height Use this property to adjust the spacing, or leading, between lines of text. The value can be specified as a multiple of the height of the elements font, an absolute value, or a percentage. Using em’s are a great way to set size because it is automatically relevant to the font size. Be careful when applying small values because this can result in overlapping lines. There can be no negative values! Selector {line-height: 1.5em;} Try it!

17. Letter-spacing Also known as “kerning.” Values can be stated in the following: pt, px, pc, ex, em The specified value is added to the default spacing that is normally inserted between letters. Negative values condense the space between letters…not recommended! Selector {letter-spacing: 5px} Try it!

18. Color Values are stated either by stating the 16 predefined html colors, hexadecimal values, or rgb. Used in a variety of ways: To emphasize important information and change other web elements such as tables, borders, and horizontal rules. Selector {color: pink} Try it!

19. Background-color Used to change the background color that will appear behind the text and/or other elements. Stated in one the 16 predefined html colors, hexadecimal values or rgb values. Have seen it as background or background-color Be careful of your selector! Selector {background: #FFFF99} Try it!

20. Color background

21. Background images Can either be stated as background: or background-images: You must know the location of the image file. If the image is small, it will repeat (or will display as tiles) to fill the background area. You can control the repeat using the repeat values. Remember to be careful when choosing a background! Free-backgrounds.com and backgroundcity.combackgroundcity.com public domain Selector {background-image: url(“thenameoftheimage.jpg”);} Preferably within a div or body Try it! Create a style rule in “personal 2” (or the one without the div), using your body as the selector and add your image Background image in browser

22. Background image:

23. Repeat, no repeat, repeat-x, repeat-y Repeat: Repeats the image to fill the background This is the default therefore you really should not have to use it. No-repeat: Prevents a background image from repeating Repeat-x: Tiles the image horizontally Repeat-y: Tiles the image vertically Simply add the command to the outside of the parenthesis though within the declaration following your image location. Try it! Selector {Background-repeat: repeat-x;} body {background-image: url("Hydrangeasresized.jpg"); background- repeat: repeat-y;} Image Repeat-y in Browser

24. Background image repeat-x

25. Border Can add a border to any element to separate the element from other web page objects. Designate a specific thickness value or can specify one of three descriptive values: Thin, medium, or thick You can also specify a color You can even create a single, double, dotted, or other type of line solid, double, groove, ridge, inset, outset, dotted, or dashed Id selector {border: medium dotted teal; padding: 10px} Try it!

26. A:link text-decoration You can control the appearance of links throughout the page to display a different color for visited, unvisited, and active links. Specified using one of the 16 predefined html colors, a hexadecimal color value, or an rgb value. After your “a:” follows the type of link you want to change (link, visited or active) a:active {color: orange} Try it! You can remove the default underlining that normally appears beneath a link using the text-decoration property. a:link {text-decoration: none} Try it!

27. a:hover a:focus Used to control how link text appears when the mouse pointer hovers over it. You can change the font style, add a border, or change the background color. If you have removed the underline from links, you can add it for the hover effect. a:hover {font-weight: bold; border: solid 2px blue; text-decoration: underline; background: red;} Try it! Used to control how link text appears when the TAB is used to navigate a page. You can add the same properties as you have with the hover selector. a:focus {font-weight: bolder; border 4px green; text-decoration: underline;} Try it!