CGS 3175 Internet Applications Spring 2008 CSS Inclass
- Slides: 11
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/cgs 3175/spr 2008 School of Electrical Engineering and Computer Science University of Central Florida CGS 3175: Internet Applications (Assignment 1) Page 1 © 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 (Assignment 1) Page 2 © Mark Llewellyn
Web Page Layout With Desired Styles Header – Level 1 Blue text. Centered on page. Paragraph of text. font size 14 pt. Header – Level 2 Red text. Left justified. Ordered list with 5 elements. List elements in purple. 12 pt font size Header – Level 2 Unordered list with 3 elements. List elements in green. Header – Level 2 Orange text. Paragraph of text. Font size 12 pt. CGS 3175: Internet Applications (Assignment 1) Page 3 © Mark Llewellyn
Initial XHTML – without any styling <? xml version="1. 0" encoding="UTF-8" standalone="no" ? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. 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> <h 1> 2008 Softball Season </h 1> <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 29 th. </p> <h 2>Some Members of the 2008 US Women's National Softball Team</h 2> <ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li> </ol> <h 2>Some Teams the National Team will play</h 2> <ul> <li>UCF</li> <li>Arizona</li> <li>De. Paul</li> </ul> <h 2>Bound For Bejing Tour</h 2> <p> The Bound for Bejing Tour (B 4 B 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> CGS 3175: Internet Applications (Assignment 1) Page 4 © Mark Llewellyn
Initial XHTML Rendering CGS 3175: Internet Applications (Assignment 1) Page 5 © Mark Llewellyn
Creating the CSS /* CSS for CSS In-class Practice */ /* define the h 1 element */ h 1 { color: blue; text-align: center; } Don’t forget to validate the CSS /* define the h 2 element */ h 2 { color: red; text-align: left; } /* define paragraph element */ p { font-size: 14 pt; } /* define list elements */ li {color: purple; font-size: 12 pt; } CGS 3175: Internet Applications (Assignment 1) Page 6 © Mark Llewellyn
Modify the Initial XHTML to include linked style sheet <? xml version="1. 0" encoding="UTF-8" standalone="no" ? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <!-- This is the header section --> <head> <title> CSS In-class Practice Problem </title> <link rel="stylesheet" href=“inclass. CSS. css" type="text/css" /> </head> <!-- This is the body of the document --> <body> <h 1> 2008 Softball Season </h 1> <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 29 th. </p> <h 2>Some Members of the 2008 US Women's National Softball Team</h 2> <ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li> </ol> <h 2>Some Teams the National Team will play</h 2> <ul> <li>UCF</li> <li>Arizona</li> <li>De. Paul</li> </ul> <h 2>Bound For Bejing Tour</h 2> <p> The Bound for Bejing Tour (B 4 B 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. CGS 3175: Internet Applications (Assignment 1) Page 7 © Mark Llewellyn
Rendering Using CSS Is this what we wanted? CGS 3175: Internet Applications (Assignment 1) Page 8 © Mark Llewellyn
/* CSS for CSS In-class Practice */ Modify the CSS /* define the h 1 element */ h 1 { color: blue; text-align: center; } /* define the h 2 element */ h 2 { color: red; text-align: left; } /* define paragraph element */ p { font-size: 14 pt; } /* define list elements */ li {color: purple; font-size: 12 pt; } /* define class for green list elements */ li. green {color: green; font-size: 12 pt; } /* define class for orange text */. orange {color: orange; } /* define 12 pt font class */. twelvept {font-size: 12 pt; } CGS 3175: Internet Applications (Assignment 1) Page 9 © Mark Llewellyn
Modify the XHTML to include style changes <? xml version="1. 0" encoding="UTF-8" standalone="no" ? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <!-- This is the header section --> <head> <title> CSS In-class Practice Problem </title> <link rel="stylesheet" href="inclass. CSS. css" type="text/css" /> </head> <!-- This is the body of the document --> <body> <h 1> 2008 Softball Season </h 1> <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 29 th. </p> <h 2>Some Members of the 2008 US Women's National Softball Team</h 2> <ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li> </ol> <h 2>Some Teams the National Team will play</h 2> <ul> <li class="green">UCF</li> <li class="green">Arizona</li> <li class="green">De. Paul</li> </ul> <h 2 class="orange">Bound For Bejing Tour</h 2> <p class="twelvept"> The Bound for Bejing Tour (B 4 B 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> CGS 3175: Internet Applications (Assignment 1) Page 10 © Mark Llewellyn
Final Rendering CGS 3175: Internet Applications (Assignment 1) Page 11 © Mark Llewellyn
