|
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&quuot;>
- And this tutorial!
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 of you
have chosen.
| Remember, when you copy code from a web page, you need to paste it into a plain text editor before pasting
it into your wysiwyg html editor.
|
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.
NN4 ignores hover properties, I have used them to enhance my pages for IE and Opera users.
NN4 ignores the BODY style inside tables. It is therefore neccessary to use the TD selector to
ensure proper table background color. |
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. CSS 2
|