Creating an External Style Sheet - Exercise

Contact Us or call 1-877-932-8228
Creating an External Style Sheet - Exercise

Creating an External Style Sheet

Duration: 5 to 10 minutes.

In this exercise, you will extract the embedded stylesheet that you created in the last exercise to a new external style sheet.

  1. Open CrashCourse/Exercises/EmbeddedStyleSheet.html in your editor and save it as LinkedStyleSheet.html.
  2. Create a new file and save it as StyleSheet.css in the same directory.
  3. Move all the CSS rules from LinkedStyleSheet.html to StyleSheet.css.
  4. In LinkedStyleSheet.html, remove the style block, and add a link tag that points to StyleSheet.css.
  5. Open LinkedStyleSheet.html in a browser. It should look the same as EmbeddedStyleSheet.html.

Solution:

CrashCourse/Solutions/LinkedStyleSheet.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>

<div>
<h1>All-time Home Run Record</h1>
<table>
<tr id="trHeader">
	<th>Player</th>
	<th>Home Runs</th>
	<th>Team</th>
</tr>
<tr>
	<td>Barry Bonds</td>
	<td class="centerCell">762</td>
	<td>Giants</td>
</tr>
<tr>
	<td>Hank Aaron</td>
	<td class="centerCell">755</td>
	<td>Braves</td>
</tr>
<tr>
	<td>Babe Ruth</td>
	<td class="centerCell">714</td>
	<td>Yankees</td>
</tr>
<tr>
	<td>Willie Mays</td>
	<td class="centerCell">660</td>
	<td>Giants</td>
</tr>
</table>
</div>
</body>
</html>

Solution:

CrashCourse/Solutions/StyleSheet.css
body
{
	background-image: url('Images/Baseball.gif');
	background-repeat: repeat-x;
	background-position: bottom;
	background-attachment: fixed;
	margin-left: 50%;
	margin-top: 20px;
}

div
{
	padding: 10px;
	border: 10px groove red;
	width: 300px;
	background-image: url('Images/YankeeStadium.gif');
	margin-left: -170px;
}

h1
{
	text-align: center;
	font-size: 12pt;
	color: #000099;
	margin-bottom: 5px;
	text-decoration: underline;
}

table
{
	margin: 5px;
	width: 290px;
}

th
{
	padding: 3px;
}

td
{
	padding-left: 8px;
	padding-right: 8px;
	border: 1px solid #990000;
	background-color: #ffffcc;
}

#trHeader
{
	text-decoration: underline;
	color: #990000;
}

.centerCell
{
	text-align: center;
}
Next