1. COS 125 DAY 17

2. Agenda  Assignment #5 Corrected 6 A’s, 2 B’s, 3 C’s 2 D’s, and 2 non-submits  Next Capstone Progress Report Due April 6  Exam #3 Graded 3 A’s, 4 B’s, 3 C’s, 2 D’s, 1 F, and 2 non-takes  WebSite for text book http://www.cookwood.com/html5ed/  Lecture/Discuss Formatting With Styles

3. Learning Objectives  Understand how to set a style for a font family  Describe how to embed fonts on a page  Understand how to write style rules to make text in italics, in bold, in varying sizes, and with varying line height.  Understand how to control tracking and kerning, white space and text alignment  Understand how to write font styles in shorthand  Review how to set text Color and text background  Understand how to use both positive and negative indents  Learn to change text case, create small caps and use text decorations

4. Formatting with Styles  Allows for more possibilities than xHTML formatting  Separate Format from Content  Examples of everything in this lecture available at http://perleybrook.umfk.maine.edu/samples/StyleFormat.h tm http://perleybrook.umfk.maine.edu/samples/StyleFormat.h tm

5. Choosing a font family  Not all fonts are available on all PCs  Allows you a pick of group of possible fonts to use  There is no limit to the names of fonts you can use for a font-family group  Font name will be tried in the order given until one of the fonts is available to browser  Selector {font-family:“font 1”, “font 2”, “default font”}  Generic fonts for default serif, sans-serif, cursive, fantasy and monospace  Example h1{font-family:“Times New Roman”, serif} H2{font-family:“courier”, “helvetica”, sans-serif}

6. Embedding Fonts on a Page  Force browser to use a font you choose Must make font available to Browser  Use the following before your refer to “yourFont” @font-face{font-fanily:”yourFont” src: url(font.eot)}  You must create the *.eot file with special program http://www.microsoft.com/typography/web/e mbedding/weft3/default.htm?fname=%20&fsiz e http://www.microsoft.com/typography/web/e mbedding/weft3/default.htm?fname=%20&fsiz e  Doesn’t work with all browsers  Advice: Don’t bother.. Too much effort with little results Create a transparent gif instead

7. Creating Italics  Use to Italicize fonts selector { font-style:italic} Can also use oblique for fonts that do not have a italicize version  To remove italics Selector {font-style:normal}  Example.emph{font-style:italic} h3{font-family:sans-serif, font-style:oblique}

8. Applying Bold Formatting  Allows you to vary boldness of text selector{font-weight:bold} Can also use “bolder” or “lighter” Can also use a multiple of 100 to 900  400 is normal  700 is bold Can also set to “normal”  Examples h1{font-weight:normal} em{font-weight:800}

9. Setting Font Size  Two methods Specific Font size  Selector{font-size:18px}  Size in pixels  keywords xx-small, x-small, small, medium, large, x-large or xx-large Relative to parent  Selector{font-size:2em or %}  1 em = 100%,.75 me = 75%  Keywords larger or smaller  Examples  h1{font-size:25px}  p{font-size:90%}

10. Setting Line Height  Sets the amount of space between lines  Selector{line-height:2 or 150% or 18px} In pixels use 18px For percentage above font size in line use 150% For twice font size use 2

11. Setting all Font values at once  Use the property font: First set font-style (italic, oblique or normal) Then set font-weight (normal, bold, bolder, lighter or n*100) Then set small caps (normal small-caps) The above 3 can be omitted, if so they are set to normal Type font size If desired /N where N is line-height Then type in font-family values  Examples h1{font:italic,bold,small-caps, 20px, “Arial”, serif} h2{font: 20px/150%, “Times New Roman”, serif}

12. Setting the Text Color  Sets the color of the text Selector{color: blue or #0000ff or rgb(0,0,255) or rgb(0%, 0% 100%)} Value can be one of 16 predefined colors #rrggbb hexidecimal rgb(r,g,b) where each letter is 0-255 rgb(r%,g%,b%) where each each letter is 0-100  Examples h1{color:red} h1{color:#aabbff} h1{color:rgb(128,128,255) h1{color:rgb(50%,50%,100%)

13. Changing the Text’s Background  Each element can have a background color or image  Selector{backgound:blue or #0000FF} Can also set to “transparent” Can also be set to an image using url(image.gif)  Type “repeat” to tile  “Repeat-x” or “repeat-y” to tile direction only  no-repeat to prevent tiling  Fixed or scroll to determine whether background moves with element  Can also to a specific location using X Y  Examples body{background:blue} body{background:url(picture.gif) repeat fixed) p{background:url(picture.gif) repeat fixed) body{background:url(picture.gif) fixed x=center, y=center)

14. Controlling spacing  Spacing between words (tracking) Selector{word-spacing:length)  Spacing between letter (kerning) Selector{letter-spacing:length)  Length can be Size in pixels 16px 20px “normal” for default browser setting Relative to parent length 1em 1.4em  Examples p{word-spacing:1.3em,letter-spacing:12px)

15. Adding indents  Indentation is how much space before first line in paragraph  p{text-indent:lenght}  Length can be Size in pixels 16px 20px 0 for no indent Relative to parent length 1em 1.4em Negative number for “hanging” indent

16. Setting White Space Properties  With spaces (blanks and returns) in xHTML are ignored or displayed as a single space  You can use white-space property to modify that behavior  Selector{white-space:pre or nowrap or normal} pre shows all space (preformatted) nowrap ignores returns normal is default behavior  Example p{white-space:pre}

17. Aligning Text  Allows you to align text for certain elements May effect spacing  Selector{text-align:left or right or justify or center} Left means align to left border Right means align to right border Justify means align top both borders Center means align to center of screen  Examples h1{text-align:center} p{text-align:justify}

18. Changing text case  Can change text from uppercase to lowercase or vice versa or capitalize first letter of each word  Selector{text-transform:capitalize or uppercase or lowercase}  Examples h1{text-transform:captalize) h2{text-transform:uppercase} small{text-transform:lowercase}

19. Using Small Caps  Some fonts have smaller versions of uppercase letters  Selector{font-variant:small-caps}  Example h2{font-variant-small-caps)

20. Decorating Text  Lets you modify text with underlines, overlines, lines through text and blinking  Selector{text-decoration: value} “value” can  underline  overline  line-through  blink  Examples h1{text-decoration:blink} h1{text-decoration:underline}  Blink does not work with all browsers

21. Heads up for Assignment #6  For assignment #6 I gave you a xHTML page with lots of texts and various elements  You cannot modify the xHTML page  You will have create several different style sheets to format this page Style sheets will be IAW formatting rules I give  You will have to produce a menu that shows the same pages formatted with each different style sheet