Lecture Summaries class 7

Prepared by: Anthony Larrain

These notes serve as an outline to the lecture, they are not intended to be complete. Attend class to get more details.

More on CSS

Used to separate the structure of the document from the presentation.
The CSS syntax is made up Selectors and Declarations.
General form of a CSS command

selector {attribute:value}

Examples

h1 {color:darkolivegreen} p {color:#FF3366}

A selector can contain multiple declarations

p {font-family:Verdana; color:goldenrod}

Study defliststyle.html , right click and view the source

Text Manipulation

letter-spacing Controls the space between letters.

p {letter-spacing: 5px;}

word-spacing Controls the space between words.

h1 { word-spacing: 10px;}

line-height Determines the height of a line.

p {line-height: 5px;}

p {line-height: 2em;}

p {line-height: 2%;}

text-indent Indents the first line of a paragraph

p {text-indent: 5%;}

text-align Aligns the text.

p {text-align: left;} h1 {text-align:right;} h2 {text-align:center;} li {text-align:justify;}

text-decoration Decorates or un decorates text.

p {text-decoration: underline;}

Typically, text should not be underlined unless its a hyperlink.

a {text-decoration:none;}

This removes the underline from the hyperlink.

Font Manipulation

After reading this section you should avoid using the HTML font tag. Use a style.

font-family Specifies the font.

body{font-family:Verdana;}

h1{font-family:"Book Antiqua";}

If the font name has more than one word separated by a space you need to enclose the font name in quotes.

p{font-family:Western,fantasy;}

Can specify more than one font, notice the comma ','.

Check this site out for more information about fonts

font-size: Controls the size.

p {font-size: 14px;}

Liquid designs suggest using relative measurements for sizes pertaining to text.

p {font-size: 1em;}

p {font-size: 1.2em;}

body {font-size: 1em;}

font-style Specifies the style of the font.

p {font-style:italic;}

font-weight Specifies the amount of bold.

p {font-weight:bold;}

h2 {font-weight:bolder;}

span {font-weight:lighter;}

color Specifies the color

p {color:mediumseagreen;}

h2 {color:#ABCDEF}

Lab 6

In today's lab we add some styles to a document prepared by Virginia Debolt. Virginia is the author of the book Integrated HTML and CSS. The document provides some nice tips for beginning designers. Virginia's site

Here is Virginia's document with no styles. 10 design tips
Here is Virginia's document with her styles. 10 design tips with Virginia's styles
Here is Virginia's document with my styles. 10 design tips with your teacher's styles

Notice in each document the HTML remains the same.

Character Entities

Special Characters