How to Create a CSS Embedded Style Sheet

  • google plus

In Brief...

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.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

  1. 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
  2. Add the style block in the head of the page. Don't forget to include the type attribute.
    <style type="text/css">
  3. Add a rule for h1 elements as follows:
    h1 {
    	text-align: center;
    	font-size: 12pt;
    	color: #000099;
    	margin-bottom: 5px;
    	text-decoration: underline;
    }
    
  4. Add a rule for table elements that contains the following property-value pairs:
    table {
    	margin: 5px;
    	width: 290px;
    }
    
  5. Add a rule for th elements.
    
    th {
    	padding: 3px;
    }
    	
  6. Add a rule for td elements.
    
    td {
    	padding-left: 8px;
    	padding-right: 8px;
    	border: 1px solid #990000;
    	background-color: #ffffcc;
    }
    	
  7. Assign an id of "trHeader" to the first table row and add a rule for this id.
    
    #trHeader {
    	text-decoration: underline;
    	color: #990000;
    }
    
  8. Assign a class called "centerCell" to all of the center table data cells and add a rule for this class.
    
    .centerCell {
    	text-align: center;
    }
    	
  9. Add the closing </style> tag to the end of your style sheet.
  10. 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

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