How to Create a CSS Embedded Style Sheet

See CSS: Tips and Tricks for similar articles.

Embedded style sheets appear in the style element in the head of an HTML page. Follow these 10 steps to create a CSS embedded style sheet.

Start by creating a simple HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Home Run Record</title>
</head>
<body>
<h1>All-time Home Run Record</h1>

<table>
	<tr>
		<th>Player</th>
		<th>Home Runs</th>
		<th>Team</th>
	</tr>
	<tr>
		<td>Hank Aaron</td>
		<td>755</td>
		<td>Braves</td>
	</tr>
	<tr>
		<td>Babe Ruth</td>
		<td>714</td>
		<td>Yankees</td>
	</tr>
	<tr>
		<td>Barry Bonds</td>
		<td>703</td>
		<td>Giants</td>
	</tr>
	<tr>
		<td>Willie Mays</td>
		<td>660</td>
		<td>Giants</td>
	</tr>
</table>
</body>
</html>

The result will look like this: Basic HTML

Add the style block in the head of the page. Don't forget to include the type attribute.
```
<style type="text/css">
```

Add a rule for h1 elements as follows:

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

Add a rule for table elements that contains the following property-value pairs:
```
table {
	margin: 5px;
	width: 290px;
}
```
Add a rule for th elements.
```
th {
	padding: 3px;
}
	
```

Add a rule for td elements.


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

Assign an id of "trHeader" to the first table row and add a rule for this id.
```
#trHeader {
	text-decoration: underline;
	color: #990000;
}
```
Assign a class called "centerCell" to all of the center table data cells and add a rule for this class.
```
.centerCell {
	text-align: center;
}
	
```
Add the closing </style> tag to the end of your style sheet.

Add the class attribute with the appropriate class to the associated HTML tags to preview the changes, as follows:


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

The result will look like this: Embedded Style Sheets

How to Create a CSS Embedded Style Sheet

Related Articles