CSS Introduction

Cascading Style Sheets permit you to define the colors and behaviors of your web site design. You can maintain, without error, a consistent look for all of your pages.

All with the ease of one external file. You won't even have to open your pages, just open the .css file you are going to create here.

It's easier than it looks!

You only need four things to get started!

  • A copy of my CSS
    • This is optional, but will help greatly as either a starter or visual reference. Highlight all of the content in the text area and paste into a new blank style sheet in TopStyle.
  • A copy of TopStyle Lite, a freeware program
    • This is a great starter program, but you can also customize our stylesheet with any text editor. We recommend getting at least the freeware version of TopStyle.
  • This link: <link rel=stylesheet href="server2.css" type="text/css">
  • And this tutorial!

How does it work?

Install TopStyle Lite. As a side note, the pro version is great, but the light version will produce excellent style sheets for you.

Copy my CSS. Open TopStyle Lite. Select New, and paste my CSS. Save as, yourchosenname.css. You are ready to customize and create your own external cascading style sheets!

Copy and paste the link above into the head of your document. Change WD4U.css to the name you have chosen.

Compatibility

Older browsers have some difficulty "reading" stylesheets. We are going to work only on stylesheets that will display correctly in IE, NN, and Opera versions 4+ properly. Our stylesheet has been validated using TopStyle Pro to be compatible with all of the above browsers.

Why should I start with your CSS?

Starting with a functional Style Sheet will help you get started faster. With TopStyle Lite, you can change everything to fit your site.

Let's familiarize you with the TopStyle Lite Interface. Continue to CSS 2 – Screen Shots.