1. Home
  2. How-to Articles
  3. How to Add Inline Styles to CSS

How to Add Inline Styles to CSS

  • google plus

In Brief...

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.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

  1. 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;
}
  2. 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>
  3. Add an inline style to the table data cell that contains the word "Braves". 
    
<td style="font-style: italic; color: #ff0000;">Braves</td>
  4. Add an inline style to the table data cell that contains the word "Yankees". 
    
<td style="font-style: italic; color: #000033;">Yankees</td>
  5. Add an inline style to the table two data cells that contain the word "Giants". 
    
<td style="font-style: italic; color: #cc3300;">Giants</td>
  6. 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>

Need CSS Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss