slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CGS 3175: Internet Applications Fall 2008 CSS In-class Practice PowerPoint Presentation
Download Presentation
CGS 3175: Internet Applications Fall 2008 CSS In-class Practice

Loading in 2 Seconds...

play fullscreen
1 / 11

CGS 3175: Internet Applications Fall 2008 CSS In-class Practice - PowerPoint PPT Presentation


  • 113 Views
  • Uploaded on

CGS 3175: Internet Applications Fall 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/fall2008. School of Electrical Engineering and Computer Science University of Central Florida.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CGS 3175: Internet Applications Fall 2008 CSS In-class Practice' - cairo-michael


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

CGS 3175: Internet Applications

Fall 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/fall2008

School of Electrical Engineering and Computer Science

University of Central Florida

slide2

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

slide3

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.

slide4

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 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.

</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 Beijing Tour</h2>

<p> 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.

</p>

</body>

</html>

slide6

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

slide7

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 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.

</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 Beijing Tour</h2>

<p> 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.

</p>

</body>

</html>

Add the link element for the linked style sheet.

slide8

Rendering Using CSS

Is this what we wanted?

slide9

/* 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

slide10

<?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 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.

</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 Beijing Tour</h2>

<p class="twelvept"> 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.

</p>

</body>

</html>

Modify the XHTML to include style changes