FrontPage 2003 and CSS - Information about CSS
- Why use CSS?
- Alternative Tools for CSS
- Configure Authoring properties in FrontPage to use CSS features
- Turn support for cascading style sheets on or off
- Ways to apply CSS Formatting
- Embedded cascading style sheets
- Inline cascading style sheets
- Other Types of sheets
- Cascading Styles
Why use CSS?
- Easier maintenance
- Better Usability
- Increased Accessibility
By deleting all your font tags etc., etc., etc. from your HTML and using an external style sheet not only will your pages reduce in size, but the sheet only needs to be downloaded once, which makes for a MUCH faster loading site, and, as we all know, visitors won’t stay around for long.
If you have a page you wish to convert there is a FrontPage Addin called FrontPagePowerEdit that will remove unwanted code from all your pages at once.
Remember also that if your user’s browser does not support CSS, they will still be able to retain functionality; your content will still be available as plain text.
Increased accessibility allows you to cater to everyone (something the search engines like) and is likely to increase your SEO standing. You can check my comments on this with free classes at: Seo Techniques The group also contains regular extra classes for HTML, CSS and web design techniques. I highly recommend you join.
Alternative Tools for CSS
Using FrontPage to work with CSS or styles does not give you the best interface in the world, but it can be done. If you are serious about your Styles I recommend you use TopStyle Lite (a free version and a Pro version if you wish to upgrade). It meshes nicely with FrontPage and other applications that help you maintain your site such as CSS and HTML Validators. There is also a very supportive forum.
If FrontPage is installed, TopStyle will detect it during installation and configure itself as FrontPage's CSS editor. You can also do this manually in FrontPage by selecting Tools | Options | Configure Editors and adding TopStyle as the editor for CSS files.
Once TopStyle is configured as FrontPage's CSS editor, double-clicking on a style sheet in any of FrontPage's views will open it in TopStyle for editing.
NOTE: If you wish to open the sheet in
FrontPage right click on the sheet you want and choose ‘Open with’
mouse over the dropdown arrow and select ‘FrontPage (Open as CSS)’.
Configure Authoring properties in FrontPage to use CSS
features
However, in this article we are considering working with CSS/styles
from within FrontPage so the first thing we need to do Configure
Authoring properties in FrontPage to use CSS features
NOTE: Authoring properties determine what types of browsers can view your pages and what types of scripts will run correctly on your pages.
Because FrontPage uses CSS to implement some style features, some menu items will be unavailable when support for CSS is turned off.
Some of these options are:
Turn support for cascading style sheets on or off
On the ‘Tools’ menu, go to ‘Page Options’, and then click the ‘Authoring tab’.
To turn support for commands that use cascading style sheets version 1.0 on or off, select or clear the CSS 1.0 (formatting) check box.CSS 1.0 enables you to add attributes to a tag, such as increasing the space before or after a paragraph.
To turn support for commands that use CSS version 2.0 on or off, select or clear the CSS 2.0 (positioning) check box.
CSS 2.0 enables pixel-precise positioning and grouping of page elements.
Ways to apply CSS Formatting
There are typically three ways in which you can apply CSS formatting, but there are more types.
Embedded cascading style sheets
When you create or modify a style to be used on a single page, FrontPage creates a cascading style sheet for you. Called an embedded cascading style sheet, it is a collection of code stored between HTML <STYLE> tags between the <HEAD> tags of the page. Any style you create for that page is stored in the embedded style sheet as a class selector.
The comment tags <!-- --> are inserted so older browsers won’t see the coding.
NOTE: Embedded Cascading style sheets are sometimes called Internal Style Sheets. Remember they will only work on the specific HTML pages they are placed on.
Embedded CSS are very useful for Overriding. For example: if you have properties defined on the External style sheet that declare all paragraph text is rendered in black, but you want the paragraph text to be rendered in white for only one specific page, you could add an embedded style sheet rule directly below the linked style sheet that redefines the paragraph text as white. (See box below)
This is paragraph text defined as white P { color:white } you can see it highlighted below. In the HTML file the external CSS link would be added first
An embedded style sheet looks like this:
<style> <!-- body { background: black; font-family: times, serif; font-size: 10pt } a:link { text-decoration: none: } P { color:white } --> </style> |
External cascading style sheet External cascading style sheets are the most useful because they can be attached to multiple Web pages. You can apply the same styles consistently across an entire Web site.
If you decide to change a style, you need only make one change - in the external cascading style sheet - and the pages in your Web site will reflect the change. Typically, an external style sheet uses the .css file name extension, such as mystyles.css.
An external style sheet might look like this:
body {
background: white;
color: black; font-family: times, serif; font-size: 2pxt } a:link { color: blue } a:visited { color: red } h1 { font-family: arial, helvetica, sans-serif; font-size: 24px;
font-style: bold } |
The HTML code for linking to an external style sheet would look like this:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css">
</head> |
As you can see in the above example, the code is situated between the <head> </head> tags at the top of the page in the html view. (See how to apply the sheet throughout your site further on in the article.)
Inline cascading style sheets
Inline CSS contains user-defined styles that are applied to a single page element. This type of cascading style sheet is usually created when you add styles using the ‘Style’ button on a page element's ‘Properties’ dialog box.
An inline style looks like this:
<H1 STYLE="color: red"> |
You can find more information about inline styles at Blooberry
Other Types of sheets
Imported Style Sheets
The @import rule is used to call an external style sheet which can be from another External Sheet or from within the <head> </head> tags in your HTML file. The rule MUST come first before all other css rules. @import sheets are good for hiding styles from some browsers because they can’t cope with them and would most likely crash. There are also different versions of the @import rule as well and different versions work in different browsers.
Here is how you would present the link in your HTML file.
To
call an external style sheet
<link rel="stylesheet" type="text/css" href="simple.css" />
<style type="text/css"> @import "modern.css"; </style> To call from within a HTML file <STYLE TYPE="text/css"> <!-- @import url(http://mydomain.com/path/style.css); -->
</STYLE> |
Learn more about @import
Userstylesheets (Accessibility)
IE/Win users can check under Tools > Internet Options > Accessibility to set their user stylesheet and options.
You can even make userstyles with this free bookmarklet, try it it’s fun.
Adding an ID="yoursite" attribute to the BODY element of each of your site's pages allows visitors to define their own styles for your site by combining CSS's ID selectors with descendent selectors:
/* --- default heading 1 style --- */
H1 {font-family: Helvetica, sans-serif;}
/* --- a heading 1 style just for your site --- */
#yoursite H1 {font-family: Impact, sans-serif;}
/* --- a different heading 1 style for another site --- */
#anothersite H1 {font-family: Univers, sans-serif;}
You can learn more about combining CSS's ID selectors
Cascading Styles
Inline Styles will always override embedded Styles and
External Styles Sheet
Embedded Styles will always override an External Styles Sheet
and the order in which you insert external Style sheets such as
Imported Style Sheets
This is, of course, known as the cascading effect and why they are called Cascading Style Sheets. Each are stepping stones to the other. Your rule of thumb is that the style nearest to the content is the one in charge, like a chain of command.
An imported style sheet is further way from the actual element than a linked style sheet, (external sheet) so the linked style sheet would ‘be in charge’. Any conflicting property stored in a linked style would override an imported style sheet.
Conflicting properties
Properties 'conflict' when more than one source defines the same property differently. So go back through your styles if something is not working properly. It’s just a matter of ‘proper chain of command’ and, once you understand this, it’s easy to spot any mistakes you may have made.
For example here we have an External Style Sheet
H1 { color:
green;
font-family: Helvetica, san-serif;
font-size: x-large;} |
Here also, we have an Embedded Style Sheet that defines SOME of the same properties.
H1 ( color: red;
line-height: 150%; font-size: xx-large; } |
The conflicting properties are color & font-size. The font-family and line-height do not conflict.
The Embedded Style Sheet is CLOSER to the content (text) so that is the sheet that is ‘in command’ for those properties, in the case of the other two properties they work together because they are not conflict.This is a two part article please see the next page Creating CSS
All articles are Copyright © 2005 Tina Clarke All Rights Reserved