CSS - The 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 remain viewable as new browsers are introduced.
Style sheets are designed to be easy to edit. However, keep in mind that we have taken care to coordinate the colors to enhance the main design used in the template package. If you wish to change colors and other attributes, you will change the look of each page in your template.
CSS is an excellent addition to plain HTML. With 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.
Preventing Unnecessary HTML Markup Code
If you are familiar with Microsoft Word, you may already be knowledgeable about “styles”. In FrontPage 2003, however, if you use the formatting toolbar (shown below), you will add a lot of HTML markup code to your pages.
So rather than setting the font, size, etc. within the toolbar shown above, you can instead use the FrontPage Style toolbar. This toolbar can be easily “docked” at the top or bottom of your page. To see this toolbar, go to View > Toolbars > Style.
CSS Crash Course
It is probable that you will want to make minor changes to some elements within the CSS file. The information below will help to deconstruct some of this code and better explain what it all means.
There are three types of CSS Rules: HTML selector, class, and ID
An HTML selector redefines an HTML tag. By setting rules for an HTML tag, you change the way the tag displays its content. All tags keep their default behavior unless they are changed. Below is an example of a redefined Heading 1 tag:
h1 {
color: #e2a55c;
font: bold 22px Georgia, serif;
text-align: left;
padding: 10px 0 15px 0;}
Let's deconstruct this rule...
- h1 { -- This first line begins with the HTML tag to be defined followed by a space then an opening curly brace.
- color: #e2a55c; -- This line defines the font color. Color is followed by a colon and the actual color is shown in hex value. The line ends with a semicolon.
- font: bold 22px Georgia, serif; -- This line defines the font used. The first items sets the font to bold, the second value sets the font size to 22 pixels, and the list item sets the font family. Note that when more than one font is listed, the browser tries to use the first one listed. If that font is not found, it will search for the second font listed. If that font is not found, it will look for the third listed, etc. The line ends in a semicolon.
- text-align: left; -- This sets how the text will be aligned, in this case to the left. The line ends with a semicolon.
- padding: 10px 0 15px 0; -- Since each browser has its own default amount of padding that is places around a heading, this rule sets a specific amount so it can be rendered the same in all browsers. Padding is now set to have 10 pixels of space at the top, no spacing on the right side, 15 pixels of padding at the bottom, and no spacing on the left side. (It goes clockwise starting at the top.) The line ends with a semicolon.
- } -- The closing curly brace ends the rule.
By learning how HTML rules, as well as classes and IDs, are constructed, you can safely make appropriate changes in your style sheet.