|
|
|
|
|
|
Helpful Tips & Techniques Cascading Style Sheets
The following is a quick guide to using style sheets with WebExpress. Our approach to style sheets is to make using them easy and manageable. We provide powerful use of style sheets without requiring that you learn the complexity of the cascading rules of CSS. A user familiar with Word Processing styles should have little problem applying those concepts in WebExpress. Because WebExpress takes a slightly different approach to implementing styles, we recommend that you create your style sheets within WebExpress. Imported style sheets (unless they conform to WebExpress conventions) will generally be ignored. As always, you should also remember that Cascading Style Sheets are really only supported in Internet Explorer 4.0 and Netscape Navigator 4.0 and later. Explorer 3.0 purported to have supported styles, but the support is so limited that you can not rely on it. You should keep this and your target audience in mind when developing web pages using styles. Styles in CSS must be applied in conjunction with an HTML tag. For example, a style can be applied with the Heading 1 <H1> tag, the Paragraph <P> tag, or most others. These tags are themselves considered styles as well. You can redefine any of them to take on different characteristics. For example, you can define Heading 1 to have red text. All occurrences of Heading 1 text in the document will then automatically change to red. You can also create a custom style with a name of your own. This allows you to retain the default styles like Heading 1, and still tap into the power of customizable styles. To facilitate the use of styles in conjunction with HTML tags, WebExpress allows you to define new styles based on existing predefined ones. For example, you can create a style based on Heading 1 named Red. When you apply this style, the text takes on all the attributes of Heading 1, plus the text becomes red. By always defining styles based on a pre-existing style, you also obtain the maximum backwards compatibility, which at least for the near term, will be quite important. Using the example above, if you used the style named Red that was based on Heading 1, a non-style browser would still display the text using Heading 1, but the text would be black (or the default color). WebExpress organizes styles by their function. The types of styles available are Character, Paragraph and Document styles. A Character style contains text formatting commands. A Paragraph style can contain almost anything relating to text formatting. Document styles relate to document specific things like page background and hypertext link colors. The Edit Style Sheets command on the Format menu is the control center for defining and editing styles. This dialog box contains two tabs: Styles and Style Sheets. To edit a style, you use the Styles tab. The Styles tab shows all the possible styles available to the current document. this includes default HTML styles, styles defined within the document, and styles linked from external style sheets. You can switch between styles defined in the current document and those defined in an external style sheet with the Style Sheet drop down list near the bottom. Remember that the list will show all available styles, but this will determine what source you are editing. The Description window shows the current settings for the selected style. If it is not defined in the file shown in the Style Sheet field, the description will simply state Undefined. You can switch between the different types of styles with the Style Type field. This changes the list of styles displaying only those styles. To edit a style, you select it from the list and press Edit. This brings up a property sheet to edit the properties for styles of the type you have selected. To create a new named style, you first select the style on which you want to base the new style (for example Heading 1 <H1> or Normal <P>). The next step is to type in a new name for the style in the Style Edit box. Finally you press the New button. You can then edit the style as usual. Using the Style Sheets tab in the Edit Style Sheets dialog, you can link to other style sheets, create new ones, and manage the order in which the linked style sheets are interpreted. To link to an existing style sheet, press the Add button. This brings up a dialog that lets you select from a list of style sheets (.CSS) defined within your web site, or browse the disk for an existing one. Remember our note earlier about style sheets created from a source other than WebExpress. To create a new style sheet, you follow the same steps as above, but simply type in the name you want to give the new style sheet rather than browsing for an existing one. This will automatically add the .CSS extension if you don’t specify it explicitly. As you begin to edit and add styles, the style sheet will automatically be saved. If you link to more than one style sheet, you may want to adjust the order in which they are interpreted by WebExpress and the browsers. To do this, select the style sheet from the list, and move it up or down with the corresponding arrows next to the list. The Current Document entry (those styles defined within the document you are currently editing) always appears last. In general, it is probably best to limit yourself to a master style sheet for your entire web site. Using more becomes something of a logistical problem for you to track. Plus, it allows you to make swift changes to potentially several files simply by modifying a single file. In instances where you need to override the styles in your master style sheet, you can add to it within your current document. Of course if you need these overrides in several files, it may make sense to maintain a secondary style sheet, but this should be the exception rather than the rule. You can import and export styles from style sheets with the corresponding commands on the Format menu. Of particular use is the Export command, when you have defined a number of styles within a document that you want to then use elsewhere. The import command is somewhat less useful. It is generally better to link to a style sheet, rather than importing its styles into your document. After you create styles, you of course want to use them. To apply a paragraph style, it will be listed in the Style drop down on the tool bar. Select the paragraphs to which you want to apply the style, and select it from the list. Character styles are applied with the Character command from the Format menu. By default, only the standard styles are shown. To see the complete list of character styles available, click on the expand button over the Styles field. You can select multiple styles to apply to any selection of text. Since Style Sheets are new to HTML, and have some fundamental differences from word processing styles, we are treading on new ground. We hope our approach gives structure and order to the complexity of Cascading Style Sheets. As the browsers mature, style sheets will play an increasingly important role in the future. We’d love to hear from you on how our approach works for you, and your suggestions on how we might make it easier and more powerful. As styles become more widely used, we want to make their power easily accessible to all WebExpress users. |
|
This web site
was created with WebExpress version 3.0 on February 19, 1998. Please
send your comments or questions to MicroVision Technical Support: [email protected] |
