COS 125

DAY 17

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

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

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

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 “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/em

bedding/weft3/default.htm?fname=%20&fsize 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 %}

1 em = 100%, .75 me = 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 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%)

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)

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:captalize) 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

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