| Cascading Style Sheets |
|
| Jump to a Topic |
|
Cascading Style SheetsStyles provide a convenient way of controlling the appearance of your web page. If you haven't already done so, take a look at the accompanying tutorial on Working With Styles. Using the style tool to create an Embedded Style Sheet on the current page is of limited usefulness. Its definitions can be accessed only on that page. What if you would like to apply a style sheet's definitions to several of, or perhaps all of your pages? Fortunately HTML provides an easy way to do this. It's called a Cascading Style Sheet (often referred to simply as CSS) and FrontPage both supports them and provides the tools to help you make them. Creating a CSS FileA Cascading Style Sheet is a simple text file with the file extension ".css". The stylesheet controlling the appearance of this page is called "fontstuffie.css". Before you start defining your styles you need to create an empty style sheet file. FrontPage provides an easy way to do this, or you can do it manually. In FrontPage 2002Go to Page View. Choose File > New > Page or Web to open the Task Pane and choose Page Templates. When the Page Templates dialog opens click on the Style Sheets tab. Choose Normal Style Sheet and click <OK>. FrontPage creates a new empty style sheet file with the temporary name "new_page_1.css"...
In FrontPage 2000Go to Page View. Choose File > New > Page to open the Page Templates dialog and click on the Style Sheets tab. Choose Normal Style Sheet and click <OK>. FrontPage creates a new empty style sheet file with the temporary name "new_page_1.css"...
In both FrontPage 2002 and FrontPage 2000 you will be reminded to save the file when you close it. You can locate it wherever you wish. I keep mine in the root folder of the web. In FrontPage 98 and FrontPage 97You'll have to create it manually! Follow the instructions below. To Create a CSS File ManuallyFrontPage 98 and FrontPage 97 were not "aware" of cascading style sheets but you can still create and edit your CSS files manually. A style sheet file is just a text file with a .css extension. I use FrontPage 2002 but still find it quicker to create a stylesheet this way. Here's how to create one...
When you double-click on a style sheet file in FrontPage 2000 or FrontPage 2002 the file opens for editing in page view. In FrontPage 98 and FrontPage 97 double-clicking on a style sheet file opens the file in Notepad. It is a simple matter to write and edit the necessary HTML for a style sheet in Notepad (my first web site was created entirely with Notepad!). Just copy out the code you see here, or copy and paste it straight into Notepad before adapting it to your needs. Defining Your StylesAll versions of FrontPage provide you with a tool for creating an HTML style. Refer to the article Working With Styles to find out how it's done. FrontPage 2000 and FrontPage 2002 allow you to use this tool directly with your style sheet in page view. With earlier versions you have to edit your style sheet file in Notepad, but this need not be a problem. You could create a temporary page in FrontPage Editor. Use the styles tool to create a your code then switch to HTML view, copy the style definitions, then paste them into your stylesheet in Notepad. You can then throw away your temporary page. The style sheet file does not need the style tags that are necessary in embedded style sheets. So if you are copying code from a page to a style sheet file you don't need these bits... <style> <!-- --> </style> ... just copy the code in between. Linking Style Sheets to Your PagesHaving created a style sheet file, you need to link the file to the pages that you want the style sheet to control. This may be all your pages, or just some of them. Your web can have as many style sheets as you need. Different style sheets can control different groups of pages. Or individual pages can be linked to more than one style sheet (as long as the styles in them don't conflict). In FrontPage 2002 and FrontPage 2000
The Link Style Sheet dialog also allows you to both add and remove style sheet links. After linking your style sheet you will see that a line has been added to the <head> section of your page's HTML telling the browser where to find the style sheet... <link rel="stylesheet" type="text/css" href="../fontstuffie.css"> In FrontPage 98 and FrontPage 97You should type this line of code into the HTML of each page that is to be linked to your style sheet. NOTE: the syntax ../ means "in the folder above the current one". If your stylesheet is in the same folder as your page, simply write its filename. If it is two folders above, write ../../mystylesheet.css. This method is shorthand for writing link paths - you can enter the full path if you want. Using Multiple Style SheetsYou can link a page to more than one style sheet. I'm not really sure why you'd want to do this, but you can so here's how it works! When you use the Link Style Sheet dialog you will see that you can add more than one style sheet to the list. You can even move items up and down the list, which implies some sort of priority. But don't bother asking Help to explain why because there's nothing there! A brief search of my library, then the web also came up with no information on the subject - so the following is the result of my own experiments... When you add multiple style sheet links using the Link Style Sheet dialog the resulting code looks something like this: <link rel="stylesheet" type="text/css" href="mystylesheet1.css"> <link rel="stylesheet" type="text/css" href="mystylesheet2.css"> The browser reads both style sheets and applies them in the order that they appear in the code. Suppose the first style sheet contains the line... p { font-size: 80% }
... and the second style sheet contains the line... p { font-style: italic }
The result will be paragraph text (controlled by the <p> tag) which is 80% in size and italic. However, if the styles conflict the one that the browser applied last (i.e. the one further down the code) takes priority. Suppose the first style sheet contains the line... body { font-family: Verdana; color: #FF0000 }
... and the second style sheet contains the line... body { color: #0000FF }
The result will be that all the text will be in Verdana and Blue. This is because the <body> style in the first style sheet makes everything Verdana and Red, but the <body> style in the second style sheet, whilst not specifying a font, makes everything Blue. In other words, style sheets lower down the list take priority (or at least I think they do!). They add to the style definitions of the other style sheet(s) unless there is a conflict, in which case they overwrite them. Further ReadingA great deal has been written about Cascading Style Sheets so I don't propose to repeat it here. For a good introduction to CSS, take a look at Elizabeth Castro's book on HTML (reviewed in my Bookshelf section). There's a wealth of help on the web. The World Wide Web Consortium (W3C) at http://www.w3c.org is the definitive source for web standards and its page on CSS has lots of links to information and tutorials. There is also a "CSS Validator" that allows you to submit the URL of your style sheet (e.g. "www.mysite.com/mystylesheet.css") for validation. Within a few moments you are returned a full report on your style sheet with any errors noted and a list of suggested corrections - and it's free! Find it at http://jigsaw.w3.org/css-validator/validator-uri.html. For the full low-down with lots of examples visit the Microsoft Developer Network Library page on CSS at: http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp or just go to your favourite search engine and ask for "CSS". And finally...Just in case you thought Cascading Style Sheets were the answer to all your prayers... read my tutorial on Troubleshooting Style Sheets.
|
||||||
| ^ top | |||||||
|
|
