CGS 3175: Internet Applications (In-class Practice) Page 1 © Mark Llewellyn CGS 3175: Internet Applications Fall 2008 CSS In-class Practice School of Electrical Engineering and Computer Science University of Central Florida Instructor : Dr. Mark Llewellyn HEC 236,
CGS 3175: Internet Applications (In-class Practice) Page 2 © Mark Llewellyn 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.
CGS 3175: Internet Applications (In-class Practice) Page 3 © Mark Llewellyn 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.
CGS 3175: Internet Applications (In-class Practice) Page 4 © Mark Llewellyn Initial XHTML – without any styling <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " CSS In-class Practice Problem 2008 Softball Season This is an Olympic year for softball, so the Beijing 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. Some Members of the 2008 US Women's National Softball Team Jeanne Finch Cat Osterman Jessica Mendosa Natasha Watley Stacey Neuvman Some Teams the National Team will play UCF Arizona DePaul Bound For Beijing Tour The Bound for Beijing 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.
CGS 3175: Internet Applications (In-class Practice) Page 5 © Mark Llewellyn Initial XHTML Rendering
CGS 3175: Internet Applications (In-class Practice) Page 6 © Mark Llewellyn 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
CGS 3175: Internet Applications (In-class Practice) Page 7 © Mark Llewellyn Modify the Initial XHTML to include linked style sheet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " CSS In-class Practice Problem 2008 Softball Season This is an Olympic year for softball, so the Beijing 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. Some Members of the 2008 US Women's National Softball Team Jeanne Finch Cat Osterman Jessica Mendosa Natasha Watley Stacey Neuvman Some Teams the National Team will play UCF Arizona DePaul Bound For Beijing Tour The Bound for Beijing 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. Add the link element for the linked style sheet.
CGS 3175: Internet Applications (In-class Practice) Page 8 © Mark Llewellyn Rendering Using CSS Is this what we wanted?
CGS 3175: Internet Applications (In-class Practice) Page 9 © Mark Llewellyn 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; }
CGS 3175: Internet Applications (In-class Practice) Page 10 © Mark Llewellyn Modify the XHTML to include style changes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " CSS In-class Practice Problem 2008 Softball Season This is an Olympic year for softball, so the Beijing 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. Some Members of the 2008 US Women's National Softball Team Jeanne Finch Cat Osterman Jessica Mendosa Natasha Watley Stacey Neuvman Some Teams the National Team will play UCF Arizona DePaul Bound For Beijing Tour The Bound for Beijing 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.
CGS 3175: Internet Applications (In-class Practice) Page 11 © Mark Llewellyn Final Rendering