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