Creating an Embedded Style Sheet - Exercise

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

Creating an Embedded Style Sheet

Duration: 20 to 30 minutes.

In this exercise, you will add an embedded style sheet to CrashCourse/Exercises/EmbeddedStyleSheet.html. You will be adding several rules to a simple HTML file. Do not worry about learning the CSS properties and values at this point. This exercise is just to give you some practice creating a style sheet.

  1. Open CrashCourse/Exercises/EmbeddedStyleSheet.html in a browser. It should look like this:Embedded Style Sheet
  2. Open CrashCourse/Exercises/EmbeddedStyleSheet.html for editing.
  3. Add a style block in the head of the page. Don't forget to include the type attribute.
  4. Add a rule for the body element that contains the following property-value pairs:
    • background-image: url('Images/Baseball.gif');
    • background-repeat: repeat-x;
    • background-position: bottom;
    • background-attachment: fixed;
    • margin-left: 50%;
    • margin-top: 20px;
  5. Add a rule for div elements that contains the following property-value pairs:
    • padding: 10px;
    • border: 10px groove red;
    • width: 300px;
    • background-image: url('Images/YankeeStadium.gif');
    • margin-left: -170px;
  6. Add a rule for h1 elements that contains the following property-value pairs:
    • text-align: center;
    • font-size: 12pt;
    • color: #000099;
    • margin-bottom: 5px;
    • text-decoration: underline;
  7. Add a rule for table elements that contains the following property-value pairs:
    • margin: 5px;
    • width: 290px;
  8. Add a rule for th elements that contains the following property-value pairs:
    • padding: 3px;
  9. Add a rule for td elements that contains the following property-value pairs:
    • padding-left: 8px;
    • padding-right: 8px;
    • border: 1px solid #990000;
    • background-color: #ffffcc;
  10. Assign an id of "trHeader" to the first table row and add a rule for this id that contains the following property-value pairs:
    • text-decoration: underline;
    • color: #990000;
  11. Assign a class called "centerCell" to all of the center table data cells and add a rule for this class that contains the following property-value pairs:
    • text-align: center;
  12. Re-open EmbeddedStyleSheet.html in a browser. It should look like this:Embedded Style Sheet

Solution:

CrashCourse/Solutions/EmbeddedStyleSheet.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Embedded Style Sheet</title>
<style type="text/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;
	}

</style>
</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>
Next