CSS Basics

If you have been using FrontPage templates from various designers over the years, you may have noticed that many are now using CSS rather than themes to format and style pages. There are many benefits:

• Pages load faster because redundant coding is removed from each page.
• You can change colors, fonts, and more on all of your pages by editing only one CSS page.
• Editing the CSS is much easier than modifying a theme.
• Because style sheets are designed to "cascade", you can easily add extra items to single pages or to blocks of text.
• Many old HTML tags are being "deprecated" or phased out of current browser standards.  By using CSS today, your web pages will be viewable as new browsers are introduced.

There are three types of styles:

• External Style Sheet:  This is a file that is added to your web folder.  FrontPage themes contain several of these.  Open your themes folder and look for themes.css and you will see an example.  If you double-click on this file, it will probably open in your text editor (Notepad).
• Internal Style Sheets:  Because they are easy to use and modify, we began learning CSS by using an internal style sheet in the head of each of our template pages. (Note: We've since moved on to using external style sheets.)
• Inline Styles:  This option allows you to place special formatting on specific areas of text located within a page.

CSS is an excellent addition to plain HTML. With plain HTML you define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will therefore have to work your way through the document and change it. With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site. Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site.

Finally, CSS can be written so the user will only need to download it once - in the external style sheet document. When surfing the rest of your site the CSS will be cached on the users computer, and therefore speed up the loading time.

The biggest benefit of CSS is how easy it is to read.  It actually makes sense!  When you see something in the style sheet that looks like this - border: 1px solid #000000 - you know at a glance that it's a solid border that is 1 pixel wide and is black. As you read through the rest of these Help Center pages, you may decide that your older web pages could be made much better with the addition of a nice style sheet.

The only reason not to use CSS in your design is not knowing how!