How to Add Inline Styles to CSS

See CSS: Tips and Tricks for similar articles.

Inline styles are created by adding the style attribute to a tag. As with the class and id attributes, almost all elements can take the style attribute. (Exceptions include html, head, title, meta, script, and style.) The value of the style attribute is a list of one or more property-value pairs separated by semicolons. Learn how to add inline styles to CSS in these six steps.

Save the following as StyleSheet.css:

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

Copy this text and paste into a new HTML file named InlineStyleSheet.html. This HTML contains a link to the external style sheet you created above.

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Inline 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>

Add an inline style to the table data cell that contains the word "Braves".
```
<td style="font-style: italic; color: #ff0000;">Braves</td>
```
Add an inline style to the table data cell that contains the word "Yankees".
```
<td style="font-style: italic; color: #000033;">Yankees</td>
```
Add an inline style to the table two data cells that contain the word "Giants".
```
<td style="font-style: italic; color: #cc3300;">Giants</td>
```

Open the HTML file in a browser. It should look like this: Inline Style Sheets

Final HTML should look like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Inline 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 style="font-style: italic; color: #cc3300;">Giants</td>
	</tr>
<tr>
		<td>Hank Aaron</td>
		lt;td class="centerCell">755</td>
		 <td style="font-style: italic; color: #ff0000;">Braves</td>
	</tr>
	<tr>
		<td>Babe Ruth</td>
		<td class="centerCell">714</td>
	<td style="font-style: italic; color: #000033;">Yankees</td>
	</tr>
	<tr>
		<td>Willie Mays</td>
		<td class="centerCell">660</td>
		<td style="font-style: italic; color: #cc3300;">Giants</td>
	</tr>
</table>
</div>
</body>
</html>

How to Add Inline Styles to CSS

Related Articles