How to Create a Style Sheet

Learn how to create your first style sheet with these step-by-step instructions.

What you need:

• Basic understanding of HTML
• TextEdit (for Mac) or Notepad (for Windows)
• HTML code for a Web page

Directions

1. Open TextEdit or Notepad (If you're using TextEdit, make sure you are using a plain text document.)
2. Create two style sheet tags. The first tag tells the browser that the following code is a style sheet written in CSS. The second tag tells the browser where the style sheet ends.<style type="text/css"></style>

3. Create the first rule that you will place between style sheet tags. Let's assume you want to create white text on a black background.A rule consists of three parts: a selector, a property and a value. In this case, the selector will be "body" because you want to apply the first rule (white text) to the content within the body of the page. The property will be "color", and the value will be "white".
   

   Selector	Property	Value
   body	color	white

   Write the rule like this: body {color: white}

   <style type="text/css">

   body {color: white}

   </style>

4. Write the second rule. Because this rule also applies to the body, it can be added to the first rule. The property will be "background-color" and the value will be "black".  Separate the properties with a semicolon.<style type="text/css">body {

   color: white;

   background-color: black}

   </style>

5. Now you can write a very simple style sheet! Use the table below to come up with some new rules you can apply to your Web pages.
   

   Properties	Values
   border-style	dotted	solid
   	dashed	double
   	groove	ridge
   	inset	outset
   Color border-color background-color	aqua	black
   	blue	fuchsia
   	gray	green
   	lime	maroon
   	navy	olive
   	purple	red
   	silver	teal
   	white	yellow
   background-position	top	center
   	bottom	left
   	right
   margin	Specific length:	Specific percentage:
   	em	x%
   	px
   font-style	normal	oblique
   	italic	inherit
   font-family	Specific fonts:	Generic names:
   	Helvetica	sans-serif
   	Times	serif
   	Courier	monospace
   font-size	xx-small	large
   	x-small	x-large
   	small	xx-large
   	medium
   padding	Specific length:	Specific percentage:
   	em	x%
   	px

Once you're happy with the style sheet you created, learn how to apply your style sheet to a Web page.