FrontPage Resources AccessFP Services AccessFP Mall Web Resources
Index About Advanced Search Home

FrontPage 2003 and CSS - Information about CSS

Why use CSS?

CSS (Cascading Style Sheets) divides one’s content from one’s formatting, enabling the webmaster to instantly change fonts, colours and backgrounds to name just a few, Style is as Styles suggests, which means CSS handles the STYLE of your web page, and lets HTML do the CONTENT. What could be easier?

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:

  • On the Insert menu, the Layer command is unavailable.
  • On the Format menu, these commands are unavailable: Style, Style Sheet Links, Borders and Shading, and Position.
  • In the Font dialog box, some font effects on the Font tab and the Spacing and Position options on the Character Spacing tab are unavailable.
  • In the Page Templates dialog box, the Style Sheet tab is unavailable.
  • In the Paragraph dialog box, the Indentation and Spacing options are unavailable.
  • In the Layers task pane, all of the options are unavailable.
  • In the Theme task pane, you can view thumbnail images of the themes, but you cannot apply a theme to your page.
    •

    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.

  • Create an embedded (or internal) style sheet on a page
  • Link a page to an external (or linked) style sheet
  • Apply inline styles to individual page elements
  • Other types of sheets Imported and Userstyles
    •

    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