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.