|
ABC ~ All
'Bout Computers
FrontPage 2003 and 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: http://groups.yahoo.com/group/SEO_Techniques/ The group also contains regular extra classes for HTML and CSS. 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 http://www.bradsoft.com/download/index.asp (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’.
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:
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:
The HTML code for linking to an external style sheet would look like this:
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:
You can find more information about inline styles at: 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.
Learn more about @import at: 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 --- */ /* --- a heading 1 style just for your site --- */ /* --- a different heading 1 style for another site --- */ You can learn more about this at: Cascading Styles Inline Styles will always override embedded Styles and
External Styles Sheet 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
Here also, we have an Embedded Style Sheet that defines SOME of the same properties.
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. article continued on page two...click here |
|
||||||||||||||||
,
