Exercise 1: HTML page



Advanced HTML Lab

Internet Resources (Computer Science 170)

Cascading Style Sheets

Setting up External Style Sheets

In a separate file saved as “nameoffile.css”

body {color:blue;

font-family: "Times New Roman",Georgia,serif}

h1 { font-size: 48px;

font-style: italic;color:green;text-align:center; font-family: Verdana,Arial,Helevetica,san-serif}

h2 { font-size: 36px;

text-align:center;

font-family: Verdana,Arial,Helevetica,san-serif}

.quotes{ color: red;

font-size:18px}

Within each HTML page attached to the style sheet:

HTML tags (or other "situations") that can be redefined:

h1, h2, h3, h4, h5, h6, p, body

a:link, a:visited, a:hover

To use redefined HTML tags: apply the tags as usual.

To apply classes to:

Phrase A quote

Paragraph A quote

More than a paragraph A quote

Options for style sheet definitions:

• color: any of the 16 predefined colors or a hexidecimal number preceeded by "#"

• font-style: normal, italic, oblique

• font-weight: normal,bold,bolder

• line-height, font-size, text-indent: XXpx;

• text-decoration: none,underline,overline,line-through,blink

• text-align: left, right, center

• font-family: any font used in HTML. Fonts with more than one word should be placed in quotes. Can also use serif,sans-serif,cursive,fantasy,monospace.

Background color and image:

Within the body tag, place

body {background: color url(imagename) RepeatOrNot ScrollOrFixed DistancefromLeft DistanceFromTop}

• color: any of the 16 predefined colors or a hexidecimal number preceeded by "#"

• url(imagename): for imagename, replace with the background image

• RepeatOrNot: use repeat, repeat-x, repeat-y, no-repeat

• ScrollOrFixed: use scroll or fixed

• DistancefromLeft DistanceFromTop: use XXpx format

Frames

My page

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download