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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- 1 4 page ad template
- html home page examples
- html web page design examples
- html web page example
- html web page code example
- fragments exercise 1 answers
- exercise 1 data interpretation answers
- basic html page code
- sample html page designs
- export html page to excel
- create html page with python
- turn html page to excel