COS 125 DAY 10

Agenda  Capstone Proposals Due Recieved 5 Capstone Project Description sp 09.htm  Assignment 4 not corrected  Assignment 5 Posted Due March 9:35 AM  Quiz 1 will be on March 2 Chapters m/c and 4 short essay Open book, open notes Available from 9-11 AM Announcement will appear with password  Lecture/Discuss Formatting With Styles

Learning Objectives Chap 10  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

Formatting with Styles  Allows for more possibilities than xHTML formatting  Separate Format from Content  Examples of everything in this lecture available at tm tm

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}

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 src: url(font.eot)}  You must create the *.eot file with special program mbedding/weft3/default.htm?fname=%20&fsiz 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

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}

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}

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 200%}  1em = 100%,.75em = 75%  Keywords larger or smaller  Examples  h1{font-size:25px}  p{font-size:90%}

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

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}

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 rgb(r%,g%,b%) where each each letter is  Examples h1{color:red} h1{color:#aabbff} h1{color:rgb(128,128,255) h1{color:rgb(50%,50%,100%)

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 scroll) body{background:url(picture.gif) fixed x=center, y=center)

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)

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

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}

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}

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:capitalize) h2{text-transform:uppercase} small{text-transform:lowercase}

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

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

Tony’s Gee-Whiz tip of the day  W3Shools has a website where you can try CSS style rules asp asp Learning by doing

Assignment 5 Cos125 assignment5_9.doc