In this assignment I need to be creating an external CSS stylesheet , linking it
ID: 3852039 • Letter: I
Question
In this assignment I need to be creating an external CSS stylesheet, linking it to the provided HTML document and uploading both to the Web.
1. Open the provided "USBroadway.html" file (attached)
Familiarize yourself with the content
Think about how you want to style it (sketch it out)
Add <div> tags to group content
Add ID or Class attributes to any element as needed for your design
Open a new document in your code editor and save it as “USBroadwayStyle.css”
Add the following character encoding and document description to the top of your CSS document
@charset "UTF-8";
/* CSS Document */
Add a CSS comment that lists your chosen color palette
Example:
/*ASU Color Palette
#990033 - Maroon
#FFB310 - Gold
*/
Style using ALL of the following CSS properties with any values (don't focus too much on making it look good, focus on using the properties and values).
font-family
font-size
font-weight
background-color
line-height
margin
padding
border
height
width
float
clear
Externally link your “USBroadwayStyle.css” to the “USBroadway.html” file using the appropriate tag and attributes
Here's the HTML code to work off of.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Usha Jagannathan IFT301 Online -->
<head>
<meta name="description" content="The photos from this page were borrowed from http://www.broadway.com/ for educational purposes only" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="USBroadwayStyle.css" />
<title>Broadway Buzz</title>
</head>
<body>
<div id="header">
<h1>Broadway Buzz</h1>
<img src="broadway-buzz.png" width="300" height="90" alt="Broadway Buzz" />
<p>Your un-official guide to the street of stages</p>
</div>
<div id="navigation">
<ul>
<li><a href="http://www.broadway.com/shows/tickets/?category=broadway" title="Now Playing" target="_self">Now Playing</a></li>
<li><a href="http://www.broadway.com/buzz/events/" title="Show Times" target="_self">Show Times</a></li>
<li><a href="http://www.broadway.com/buzz/word-of-mouth-review/" title="Reviews" target="_self">Reviews</a></li>
<li><a href="http://www.broadway.com/buzz/photos/" title="Photos" target="_self">Photos</a></li>
</ul>
</div>
<div id="nowPlaying">
<h2>Now Playing</h2>
<ul>
<li>The Lion King
<ul>
<li><img src="lion-king-playbill.jpg" width="178" height="275" alt="Disney's The Lion King" /></li>
<li>The Serengeti comes to life as never before through the extraordinary vision that is The Lion King. More than 50 million people have felt the thrill of this Tony Award winner for Best Musical, which tells the classic journey of young royal heir Simba. Giraffes strut, birds swoop and gazelles leap in a dazzling panorama that overwhelms the sense and inspires you with the wonder of life. This is The Lion King. Imagination Untamed.</li>
</ul>
</li>
<li>Wicked
<ul>
<li><img src="wicked-playbill.jpg" width="178" height="275" alt="Wicked: A new musical: The untold story of the witches of OZ - picture of a good whispering to a bad witch" /></li>
<li>The untold musical story of The Wizard of Oz’s Wicked Witch of the West and Glinda the Good... before Dorothy dropped in. Based on the imaginative Gregory Maguire novel, Wicked takes a fantasy journey through the unseen side of Oz, sharing a tale of unexpected friendship and love.</li>
</ul>
</li>
<li>Jersey Boys
<ul>
<li><img src="jersey-boys-playbill.jpg" width="178" height="275" alt="Jersey Boys: The story of Frankie Valley and The Four Seasons - picture of the group onstage" /></li>
<li>Winner of the 2006 Tony Award for Best Musical, Jersey Boys tells the story of how Frankie Valli and The Four Seasons went from being unknown New Jersey kids to international pop superstars. The show features over 30 beautifully sung tunes, including “Sherry,” “Big Girls Don’t Cry” and “Can’t Take My Eyes Off You.”</li>
</ul>
</li>
</ul>
</div>
<div id="showTimes">
<h2>Show Times</h2>
<table>
<tr>
<th></th>
<th>The Lion King</th>
<th>Wicked</th>
<th>Jersey Boys</th>
</tr>
<tr>
<td>Today's Matinee</td>
<td>11:00 AM</td>
<td>12:00 PM</td>
<td>1:00 PM</td>
</tr>
<tr>
<td>Today's Evening</td>
<td>6:00 PM</td>
<td>7:00 PM</td>
<td>8:00 PM</td>
</tr>
</table>
</div>
<div id="reviews">
<h2>Reviews</h2>
<ul>
<li>The Lion King
<ul>
<li><blockquote>A jaw-dropping magnificent spectacle. The show and the playhouse are enchanting. The unprecedented production is worth every penny. If this is Disney's idea of a theme park, we are delighted to report that the theme is quality.</blockquote></li>
</ul>
</li>
<li>Wicked
<ul>
<li><blockquote>"Wizard of Oz" fans will be fascinated by all the back stories, answering such questions as "Is Glinda really that good?" and "Where did the flying monkeys come from?" But the best thing about Wicked is its stars, whose talents cast a poweful spell.</blockquote></li>
</ul>
</li>
<li>Jersey Boys
<ul>
<li><blockquote>A winner! Splendid actors and elegant strokes of observation. Direct pedal-to-the-metal stuff! The crowd goes wild. The energy is unstoppable!</blockquote></li>
</ul>
</li>
</ul>
</div>
<div id="photos">
<h2>Photos</h2>
<ul>
<li>The Lion King
<ul>
<li><img src="lion-king.jpg" width="606" height="397" alt="lion king onstage" /></li>
</ul>
</li>
<li>Wicked
<ul>
<li><img src="wicked.jpg" width="606" height="397" alt="Gilda the good witch and the wicked witch of the west onstage" /></li>
</ul>
</li>
<li>Jersey Boys
<ul>
<li><img src="jersey-boys.jpg" width="606" height="397" alt="The jersey boys onstage from the backstage with lighting" /></li>
</ul>
</li>
</ul>
</div>
<div>
<p>This website is not official or real in any way. It has no copyright and for educational use only.</p>
</div>
</body>
</html>
Explanation / Answer
USBroadwayStyle.css
@charset "UTF-8";
body {
background-color: #800000;
color: #ffffff;
}
#header h1 {
width:500px;
float: left;
padding: 0px 10px ;
text-align: right;
margin-right: 20px;
font-size: 35px;
font-family: Copperplate, "Copperplate Gothic Light", fantasy;
}
#header img {
width: 300px;
float: left;
padding: 0px 100px 0px 10px;
margin-right: 100px;
overflow: hidden;
clear: right;
}
#header p {
clear: both;
text-align: center;
font-size: 20px;
}
#navigation {
border-bottom: 2px solid black;
}
#navigation .list1 {
margin: 0px 0px 0px 500px;
}
#navigation li {
display: inline;
margin:20px 20px;
text-align: center;
}
#nowPlaying li {
display: inline;
float:left;
width: 450px;
margin: 10px;
}
#nowPlaying img {
border: 10px solid #893A06;
}
#nowPlaying .img_text {
margin-top: 20px;
width: 300px;
line-height:125%;
}
#showTimes {
clear:both;
text-align:center;
margin-top:20px;
}
#reviews li {
list-style-type: none;
}
.title {
font-weight: bold;
text-decoration: underline;
}
#photos li {
list-style-type: none;
margin: 10px;
}
#photos img {
width:450;
height:300;
border: 10px solid #893A06;
}
USBroadway.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="The photos from this page were borrowed from http://www.broadway.com/ for educational purposes only" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="USBroadwayStyle.css" />
<title>Broadway Buzz</title>
</head>
<body>
<div id="header">
<h1>Broadway Buzz</h1>
<img src="broadway-buzz.png" width="300" height="90" alt="Broadway Buzz" />
<p>Your un-official guide to the street of stages</p>
</div>
<div id="navigation">
<ul>
<li class="list1"><a href="http://www.broadway.com/shows/tickets/?category=broadway" title="Now Playing" target="_self">Now Playing</a></li>
<li><a href="http://www.broadway.com/buzz/events/" title="Show Times" target="_self">Show Times</a></li>
<li><a href="http://www.broadway.com/buzz/word-of-mouth-review/" title="Reviews" target="_self">Reviews</a></li>
<li><a href="http://www.broadway.com/buzz/photos/" title="Photos" target="_self">Photos</a></li>
</ul>
</div>
<div id="nowPlaying">
<h2>Now Playing</h2>
<ul>
<li><span class="title">The Lion King</span>
<ul>
<li><img src="lion-king-playbill.jpg" width="178" height="275" alt="Disney's The Lion King" /></li>
<li class="img_text">The Serengeti comes to life as never before through the extraordinary vision that is The Lion King. More than 50 million people have felt the thrill of this Tony Award winner for Best Musical, which tells the classic journey of young royal heir Simba. Giraffes strut, birds swoop and gazelles leap in a dazzling panorama that overwhelms the sense and inspires you with the wonder of life. This is The Lion King. Imagination Untamed.</li>
</ul>
</li>
<li><span class="title">Wicked</span>
<ul>
<li><img src="wicked-playbill.jpg" width="178" height="275" alt="Wicked: A new musical: The untold story of the witches of OZ - picture of a good whispering to a bad witch" /></li>
<li class="img_text">The untold musical story of The Wizard of Oz’s Wicked Witch of the West and Glinda the Good... before Dorothy dropped in. Based on the imaginative Gregory Maguire novel, Wicked takes a fantasy journey through the unseen side of Oz, sharing a tale of unexpected friendship and love.</li>
</ul>
</li>
<li><span class="title">Jersey Boys</span>
<ul>
<li class="clear"><img src="jersey-boys-playbill.jpg" width="178" height="275" alt="Jersey Boys: The story of Frankie Valley and The Four Seasons - picture of the group onstage" /></li>
<li class="img_text">Winner of the 2006 Tony Award for Best Musical, Jersey Boys tells the story of how Frankie Valli and The Four Seasons went from being unknown New Jersey kids to international pop superstars. The show features over 30 beautifully sung tunes, including “Sherry,” “Big Girls Don’t Cry” and “Can’t Take My Eyes Off You.”</li>
</ul>
</li>
</ul>
</div>
<div id="showTimes">
<h2>Show Times</h2>
<table align="center">
<tr>
<th class="table1"></th>
<th>The Lion King</th>
<th>Wicked</th>
<th>Jersey Boys</th>
</tr>
<tr>
<td class="table1">Today's Matinee</td>
<td>11:00 AM</td>
<td>12:00 PM</td>
<td>1:00 PM</td>
</tr>
<tr>
<td class="table1">Today's Evening</td>
<td>6:00 PM</td>
<td>7:00 PM</td>
<td>8:00 PM</td>
</tr>
</table>
</div>
<div id="reviews">
<h2>Reviews</h2>
<ul>
<li><span class="title">The Lion King</span>
<ul>
<li><blockquote>A jaw-dropping magnificent spectacle. The show and the playhouse are enchanting. The unprecedented production is worth every penny. If this is Disney's idea of a theme park, we are delighted to report that the theme is quality.</blockquote></li>
</ul>
</li>
<li><span class="title">Wicked</span>
<ul>
<li><blockquote>"Wizard of Oz" fans will be fascinated by all the back stories, answering such questions as "Is Glinda really that good?" and "Where did the flying monkeys come from?" But the best thing about Wicked is its stars, whose talents cast a poweful spell.</blockquote></li>
</ul>
</li>
<li><span class="title">Jersey Boys</span>
<ul>
<li><blockquote>A winner! Splendid actors and elegant strokes of observation. Direct pedal-to-the-metal stuff! The crowd goes wild. The energy is unstoppable!</blockquote></li>
</ul>
</li>
</ul>
</div>
<div id="photos">
<h2>Photos</h2>
<ul>
<li><span class="title">The Lion King</span>
<ul>
<li><img src="lion-king.jpg" width="606" height="397" alt="lion king onstage" /></li>
</ul>
</li>
<li><span class="title">Wicked</span>
<ul>
<li><img src="wicked.jpg" width="606" height="397" alt="Gilda the good witch and the wicked witch of the west onstage" /></li>
</ul>
</li>
<li><span class="title">Jersey Boys</span>
<ul>
<li><img src="jersey-boys.jpg" width="606" height="397" alt="The jersey boys onstage from the backstage with lighting" /></li>
</ul>
</li>
</ul>
</div>
<div>
<p>This website is not official or real in any way. It has no copyright and for educational use only.</p>
</div>
</body>
</html>