CGS 3175: Internet Applications Spring 2008 CSS In-class Practice

CGS 3175: Internet Applications (Assignment 1) Page 1 © Mark Llewellyn

CGS 3175: Internet ApplicationsSpring 2008

CSS In-class Practice

School of Electrical Engineering and Computer ScienceUniversity of Central Florida

Instructor : Dr. Mark Llewellyn [email protected]

HEC 236, 407-823-2790http://www.cs.ucf.edu/courses/cgs3175/spr2008


Web Page Layout

Header – Level 1

Paragraph of text.

Header – Level 2

Ordered list with 5 elements.

Header – Level 2

Unordered list with 3 elements.

Header – Level 2

Paragraph of text.


Web Page Layout With Desired Styles

Header – Level 1

Paragraph of text.

Header – Level 2

Ordered list with 5 elements.

Header – Level 2

Unordered list with 3 elements.

Header – Level 2

Paragraph of text.

Blue text. Centered on page.

font size 14 pt.

Red text. Left justified.

List elements in purple. 12pt font size

List elements in green.

Font size 12 pt.

Orange text.


Initial XHTML – without any styling<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> CSS In-class Practice Problem </title></head><body><h1> 2008 Softball Season </h1><p>This is an Olympic year for softball, so the Bejing Games are dominating the international softball season. The US National Team is about to begin a national tour in which they will play many different training games around the country. They will play the UCF softball team on February 29th.</p><h2>Some Members of the 2008 US Women's National Softball Team</h2><ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li></ol><h2>Some Teams the National Team will play</h2><ul> <li>UCF</li> <li>Arizona</li> <li>DePaul</li></ul><h2>Bound For Bejing Tour</h2><p> The Bound for Bejing Tour (B4B Tour) will canvas more than 25 states in the US. In June, the US team will meet both China and Mexico in training games in Oklahoma City. ESPN will televise several of these games.</p></body></html>


Initial XHTML Rendering


Creating the CSS

/* CSS for CSS In-class Practice */

/* define the h1 element */h1 { color:blue; text-align: center;}

/* define the h2 element */h2 { color: red; text-align:left;}

/* define paragraph element */p { font-size: 14pt;}

/* define list elements */li {color:purple; font-size: 12pt;}

Don’t forget to validate the CSS


Modify the Initial XHTML to include linked style sheet<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> CSS In-class Practice Problem </title><link rel="stylesheet" href=“inclassCSS.css" type="text/css" /></head><body><h1> 2008 Softball Season </h1><p>This is an Olympic year for softball, so the Bejing Games are dominating the international softball season. The US National Team is about to begin a national tour in which they will play many different training games around the country. They will play the UCF softball team on February 29th.</p><h2>Some Members of the 2008 US Women's National Softball Team</h2><ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li></ol><h2>Some Teams the National Team will play</h2><ul> <li>UCF</li> <li>Arizona</li> <li>DePaul</li></ul><h2>Bound For Bejing Tour</h2><p> The Bound for Bejing Tour (B4B Tour) will canvas more than 25 states in the US. In June, the US team will meet both China and Mexico in training games in Oklahoma City. ESPN will televise several of these games.</p></body></html>

Add the link element for the linked style sheet.


Rendering Using CSS

Is this what we wanted?


Modify the CSS

/* CSS for CSS In-class Practice */

/* define the h1 element */h1 { color:blue; text-align: center;}

/* define the h2 element */h2 { color: red; text-align:left;}

/* define paragraph element */p { font-size: 14pt;}

/* define list elements */li {color:purple; font-size: 12pt;}

/* define class for green list elements */li.green {color:green; font-size: 12pt;}

/* define class for orange text */.orange {color:orange;}

/* define 12 pt font class */.twelvept {font-size:12pt;}


Modify the XHTML to include style changes<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> CSS In-class Practice Problem </title><link rel="stylesheet" href="inclassCSS.css" type="text/css" /></head><body><h1> 2008 Softball Season </h1><p>This is an Olympic year for softball, so the Bejing Games are dominating the international softball season. The US National Team is about to begin a national tour in which they will play many different training games around the country. They will play the UCF softball team on February 29th.</p><h2>Some Members of the 2008 US Women's National Softball Team</h2><ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li></ol><h2>Some Teams the National Team will play</h2><ul> <li class="green">UCF</li> <li class="green">Arizona</li> <li class="green">DePaul</li></ul><h2 class="orange">Bound For Bejing Tour</h2><p class="twelvept"> The Bound for Bejing Tour (B4B Tour) will canvas more than 25 states in the US. In June, the US team will meet both China and Mexico in training games in Oklahoma City. ESPN will televise several of these games.</p></body></html>


Final Rendering

Documents

CGS 3175: Internet Applications Spring 2008 CSS In-class Practice