Download
1 / 11
110 likes | 248 Vues
CGS 3175: Internet Applications Spring 2008 CSS In-class Practice. Instructor : Dr. Mark Llewellyn markl@cs.ucf.edu HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs3175/spr2008. School of Electrical Engineering and Computer Science University of Central Florida.
E N D
CGS 3175: Internet Applications Spring 2008 CSS In-class Practice Instructor : Dr. Mark Llewellyn markl@cs.ucf.edu HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs3175/spr2008 School of Electrical Engineering and Computer Science University of Central Florida
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
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 Blue text. Centered on page. font size 14 pt. Red text. Left justified. List elements in purple. 12pt font size List elements in green. Orange text. Font size 12 pt.
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"> <!-- This is the header section --> <head> <title> CSS In-class Practice Problem </title> </head> <!-- This is the body of the document --> <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>
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"> <!-- This is the header section --> <head> <title> CSS In-class Practice Problem </title> <link rel="stylesheet" href=“inclassCSS.css" type="text/css" /> </head> <!-- This is the body of the document --> <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?
/* 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 CSS
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"> <!-- This is the header section --> <head> <title> CSS In-class Practice Problem </title> <link rel="stylesheet" href="inclassCSS.css" type="text/css" /> </head> <!-- This is the body of the document --> <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>
