TopStyle Help - Index

Getting Started
Editing Style Sheets
Editing HTML and XHTML
Working with Colors
Previewing
The Style Checker
Site Management
Site Reports
Using Mappings
Customizing TopStyle


Getting Started Index

Getting Started

  • Creating a New Style Sheet
  • Creating a New HTML or XHTML Document
  • Opening an Existing File
  • Opening a File from the Web
  • Using the View Bar
  • Using the File Panel
  • Using the Clip Library
  • Find and Replace
  • Find in Files
  • Auto-Replace


Creating a New Style Sheet

To create a new, blank style sheet, click the "New Style Sheet" toolbutton, or select File > New Style Sheet. You can then begin adding rules to your new style sheet by typing them in by hand or by using the New Selector Wizard. To add and edit properties, use Style Insight or the Style Inspector.

If you're new to CSS, you may want to use the Style Sheet Wizard instead, since it will step you through the creation of a simple style sheet. To use the wizard, select File > New Style Sheet Wizard. At the right of this menu item you'll see a dropdown arrow, which displays the following additional items when clicked:

  • New style sheet from template - create a new style sheet which contains the contents of an existing style sheet.
  • New style sheet from HTML document - choose the HTML file you want to use, and TopStyle will automatically create new selectors for each of the HTML elements and classes used in the page that accept styles.
  • New style sheet using selectors of an existing style sheet - choose a style sheet, and TopStyle will create a new style sheet containing empty rules based on the selectors of the chosen style sheet.

0 Related topics: Creating a New HTML or XHTML Document, CSS Structure and Rules, Opening an File


Creating a New HTML or XHTML Document

Select File > New HTML Document or click the "New HTML Document" toolbutton to create a new HTML or XHTML document. The arrow at the right of the menu or toolbutton displays a list of templates from which you may create a new document.

TopStyle includes templates for HTML 4.01 and XHTML 1.0 documents, but you can easily create your own templates. Simply select "Edit Templates" from this same menu to display the template editor. The template editor enables adding any existing document to the list of templates.

Note: Make sure to choose an XHTML template if you wish TopStyle to insert XHTML-compliant markup.

Related topics: Opening a File from the Web, Opening an Existing File, HTML Definitions


Opening an Existing File

Opening an File

To open an existing HTML document or style sheet, click the Open toolbutton select File > Open. The dropdown menu next to the toolbutton gives you quick access to recently opened files. The list of recent files is split between style sheets and HTML documents for easier navigation.

Related topics: Creating a New Style Sheet, Creating a New HTML or XHTML Document, Opening a File from the Web, Using the File Panel


Opening a File from the Web

TopStyle's Open from Web feature enables you to download any HTML document or style sheet from the Internet. Select File > Open From Web to display the "Open from Web" dialog, then choose whether to download a style sheet or HTML document. When downloading an HTML document, TopStyle will also download all style sheets linked to that document (ex: specifying http://www.bradsoft.com/topstyle/ will download the TopStyle home page along with its style sheet.)

Tip: Some web sites use server-side "browser-sniffing" to serve a different style sheet depending on the visitor's browser, so you may want to specify which browser TopStyle should identify itself as when retrieving your style sheet. To do this, go to the Connection page in Options and change the "User Agent" setting.

Related topics: Creating a New Style Sheet, Opening an Existing Style Sheet


Using the View Bar

At the left of the TopStyle screen you'll see the View Bar, which enables switching between TopStyle's different views. If the view bar isn't showing, you can display it by selecting "Show View Bar" from the View menu.

The following primary views are available:

  • Edit - TopStyle's main editing view, where you work on your HTML documents and style sheets
  • Site Summary - style statistics on the current site
  • Site Links - style links in the current site
  • Site Reports - style class/ID usage reports for the current site
  • TopStyle News - Connects to www.bradsoft.com and displays the latest TopStyle-related news, including new versions and free downloads.

To the left of the view bar is a tab which displays the following secondary items:

  • Sites
    • - displays a list of your TopStyle sites.
  • Thumbnails - displays a preview of all images in a specific folder. Right click on the thumbnail list to choose a differnet folder.
  • Resources - displays a list of external web sites which may be of interest to web authors.

Related topics: Customizing the View Bar


Using the File Panel

TopStyle's file panel provides a convenient way to navigate your file system. The filter selection above the list of files enables limiting the types of files that are shown. The file panel offers the following features:

  • Double-click a style sheet or HTML document to open it in TopStyle
  • Double-click an image or other file type to open it in the associated application
  • Drag-and-drop files to create the appropriate <a>, <img> or <link> tag
  • Right-click to rename a file or view its properties, or to insert a link at the current position in the editor

Use the address bar beneath the file panel to quickly select from a history list of the most-recently visited folders, or simply type the name of the folder into the address bar and hit Enter.

At the far right of the address bar is your favorites menu, which stores a list of folders for quick access. This same menu is available from TopStyle's File Open and File Save dialogs.

tip Tip: For improved performance and maximum workspace, try hiding the folders and using the Favorites menu and address bar to navigate between folders.

Related topics: Opening an Existing File


Using the Clip Library

The clip library (Ctrl+Shift+L) enables you to store commonly-used snippets in a central location. Right-click on the clip library to add or remove items, and double-click or drag-and-drop an item to insert it into the current document.

For even faster insertion, use the quick insert (Ctrl+Q) feature to display a menu of up to 26 style library items. Once the menu is displayed, just type the letter corresponding to the item you want inserted.

Replacement Tokens may be used in clip library items. When TopStyle encounters a replacement token, it will prompt you for custom text before inserting a library item in the editor. Replacement tokens are delimited by %r[..], and the text between these delimiters appears on the prompt. For example, if you have the following item:

value="%r[what is the value]"

TopStyle will display a prompt with "what is the value" on it. If you respond to this prompt with "THIS VALUE" then TopStyle will insert:

value="THIS VALUE"

Related topics: Custom Keyboard Shortcuts


Find and Replace

TopStyle's Find and Replace enables you to search for a specified string of code with another string either in the current document or in all open document. Other options include making the search case-sensitive, searching only for instances of the string as whole words ("thin" would match "thin" but not "thinner").

Regular Expression searches are also supported. If you're unfamiliar with regular expressions, you might want to experiment with some of the expressions built into TopStyle. Just click the arrow button to the right of the "Text to Find" field to select from a list of pre-defined regular expressions.

Related topics: Regular Expressions


Find in Files

TopStyle's Find in Files provides a very quick, customizable tool for searching multiple files. Find in Files enables searching within a specific folder, within a folder and its subfolders, or within a TopStyle site. To use Find in Files, click the toolbutton shown at left, or select Edit > Find in Files.

Find in Files is configured using hyperlinks which describe each setting. To change a setting, simply click the hyperlink to display the options for that setting. For example, in the image shown at left we can choose whether to do a standard (plain text) search, a regular expression search, or a wildcard search.

We recommend experimenting with the various Find in Files settings, since they enable a great deal of customization. For example, you can:

  • Report files that contain only one match, one or more matches, or more than one match
  • Report files that contain no matches (example: find which HTML documents don't contain a !doctype)
  • Report each match or only the names of files containing matches
  • Specify a file filter to include - or exclude - specific file types
  • Specify a date range to include or exclude files based on their modified or created date.

At the top right of the Find in Files dialog are two toolbuttons, the first of which enables saving a Find In Files "rule" for later use. The second button is used to restore a saved rule.

Related topics: Regular Expressions, Wildcards


Auto-Replace

Auto-replace is similar to Microsoft Word's "Auto Correct" feature, and is a great way to save keystrokes. To see auto-replace in action, type fs: in the editor and then hit the spacebar - your typing will automatically be replaced with font-style:. This can be a real time-saver if you're keyboard-centric and prefer not to rely on features such as style insight.

To configure your own auto-replace items, or to view the list of pre-configured items, go to the Auto-Replace page in TopStyle's Options (under the Editor page).


Editing Style Sheets Index

Editing Style Sheets

  • All About Style Definitions
  • Using Style Insight
  • Style Inspector
  • Property Help
  • Selector List
  • Creating New Selectors
  • Choosing Fonts with the Font Picker
  • Style Sweeper
  • Exporting Style Sheets
  • Editing Styles in HTML Documents


All About Style Definitions

What is a style definition?
In TopStyle, a style definition is simply a set of properties, values and rules that apply to a specific implementation of CSS. For example, the "Internet Explorer 4" style definition contains a list of properties and values supported by Microsoft Internet Explorer 4. Likewise, the "CSS Level 1" style definition contains information about CSS1.

How are Style Definitions used in TopStyle?
Style definitions are used wherever information about a specific CSS implementation is needed. For example, the style checker uses style definitions to determine whether a specific CSS property or value is supported by a particular browser.

What does the Active Style Definition do?
The Active Style Definition tells TopStyle which style definition to consult when displaying properties and values in style insight and the style inspector. To change the Active Style Definition, simply select a new definition from the dropdown shown below. Active Style Definition Selector Only properties and values that are supported by the Active Style Definition will appear in style insight and the style inspector. Properties that are invalid (not supported) by the Active Style Definition will be color-coded red in the editor. To see this in action, select "Internet Explorer 5" from the CSS definition dropdown, and create a rule which contains the CURSOR property. Internet Explorer 5 supports this property, so it's color-coded as normal. However, if you switch to "CSS Level 1," CURSOR will now be color-coded red since the cursor property isn't supported by CSS1.

Related topics: HTML Definitions, Style Checker, Using Style Insight, Style Inspector, Exporting Style Sheets


Using Style Insight

Style Insight

Style Insight Style Insight simplifies the entry of style properties and values as you type them into the editor. Use the arrow keys or PageUp and PageDown to navigate the list, or begin typing the name of the property or value.

Style Insight will display automatically if you hit spacebar and pause after entering a property or value. You can also force insight to display by hitting Ctrl+Space.

Important: Style Insight only displays properties and values that are supported by the Active Style Definition.

Related topics: Style Inspector, Setting the Active Style Definition


Style Inspector

Style Inspector The style inspector displays all properties supported by the Active Style Definition. The value column to the right of each property includes a dropdown containing values that are appropriate for the active style definition. Properties with assigned values are sorted to the top and colored blue.

The image of the style inspector shown here displays an example of a shorthand property. Shorthand properties such as font accept multiple values and are expandable, showing you the "sub-properties" from which they're composed. For example, font is composed of font-weight, font-style, font-variant, font-size, line-height and font-family. When you choose a value for a "sub-property," the value will be added to that of the shorthand property.

Note: Most shorthand properties must follow a specific set of rules. For example, the font property requires font-size and font-family values to be considered valid. For details, please refer to the [image] W3C CSS1 Recommendation.

Beneath the style inspector you'll see property help, which shows which style definitions support the selected property.

Related topics: All About Style Definitions, Property Help, CSS Structure and Rules, CSS Properties


Property Help

Property Help appears below the style inspector and shows the level of support each style definition has for the property selected in the style inspector. The example below is for a property fully supported by CSS1, partially supported by Internet Explorer 4, and not supported by Netscape 4.

Clicking the ? at the right of the property help will display detailed help about the selected property. You can customize which style definitions are shown in property help by going to the Property Help page in TopStyle's Options (F8). The property help settings in Options also includes the ability to hide style definitions which don't support the select property. When this option is chosen, only style definitions which fully or partially support the selected property will be shown.

Tip: Right-clicking on the property help panel will display a context menu that enables you to select the style definitions you wish to appear.

Related topics: style inspector


Selector List

The Selector List displays all selectors in the current style sheet grouped by element, class and ID. Clicking any selector in the list will highlight it in the editor so that you can edit the properties.

The toolbar at the top of the selector list enables you to open the New Selector dialog or to create a new selector with the properties of the selected one -- this is a useful shortcut for creating a new selector whose properties will be similar to an existing one.

Related topics: Style Inspector, CSS Structure and Rules


Creating New Selectors

TopStyle's Selector Wizard helps you create a list of selectors to insert into the current style sheet. To start the wizard, choose "New Selector" from TopStyle's Tools menu.

The first page on this wizard gives you the option to insert your list of selectors as a single, grouped selector or as separate selectors. After you make this choice, click on the item at the top of the wizard that denotes the type of selector you wish to create.

Note that you can create several different types of selectors at once. For example, click the "Simple" item to create a simple selector, then click the "Add" button to add this simple selector to your list of current selectors. Then switch to the "Class" item to add a selector class to this list. When you click the OK button at the bottom of the wizard, every selector in the list of current selectors will be inserted into your style sheet.

If you're already experienced with CSS selectors, you can skip the wizard by going to the "Advanced" page and choosing the option to always go to the advanced page when the wizard is shown. The advanced page enables you to add a single new selector or you can add several at once. By using the different fields in the dialog, you can add selectors of the following types:

  • Tag: choose from the Tag list in the dialog
  • Class: define a class name (which must begin with a period)
  • ID: must begin with a # symbol
  • Pseudo-Class: choose from the pseudo-class list
  • Pseudo-Element: choose from the pseudo-element list (note that browser support is limited)
  • You can also add Grouped selectors (example: P,TD,LI)by typing the appropriate selector name in the Current Selector field and adding it to list on the right

Add all the selectors you wish to the list on the right side of the dialog and order them if you like (the order is only for the readability of the style sheet). Click OK to add the new rules for the selectors.

Related topics: CSS Structure and Rules


Font Picker

Choosing Fonts with the Font Picker

For the Font and Font-Family properties, both Style Insight and the Style Inspector display a dropdown list of font categories as well as specific fonts that are installed on your system. This quick, single-font selection is very useful when designing your style sheets, but in your finished style sheet you should specify additional fonts as alternatives in case your primary font selection doesn't exist.

The Font Picker simplifies the selection of multiple fonts. To display the font picker, click in a font-family row inside the style inspector then click the button shown at left, which will appear at the right of the row.

To use the font picker, simply place a checkmark next to each font you want to add to your list of fonts. Generic fonts - which are fonts that should be supported by all CSS-enabled browsers - are shown in the font picker with a red A next to them. Fonts that are installed on your system are marked with Aa.

To update your style sheet with your font selection, press the OK button. Pressing the Cancel button will close the font picker without updating your style sheet.

Tip: If you have a large number of fonts installed on your system, you may find it easier to work with the font picker if you limit the number of installed fonts it displays. To do this, simply go to the "Fonts" page in TopStyle's Options (under General), then select the fonts you wish to display.

The font picker also enables you to create groups of common fonts, saving you from having to enter them one at a time. TopStyle comes with a list of built-in font groups, but you may modify this list at any time by clicking the font group button on the font picker and selecting "Edit Font Groups" from the resulting dropdown.

Related topics: Font Family, Font


Style Sweeper

The Style Sweeper is a powerful tool for reformatting your style sheets. To set the Style Sweeper options, select "Configure Style Sweeper" from the Tools menu. You'll be presented with a list of available sweepers. The default sweeper in this list is the one that will be used when you click the Style Sweeper toolbutton.

To modify the settings for a specific sweeper, select that sweeper in the list and click the Edit button. This will display the Sweeper Configuration dialog for that sweeper. Click the Add button to create a new sweeper, or select Copy to create a new sweeper using settings from an existing sweeper.

Note: We recommend running the style checker before using the style sweeper on a document for the first time. This will locate syntax problems such as duplicate colons and extra braces which can't be processed by the style sweeper.

Related topics: Style Sweeper Configuration


Exporting Style Sheets

Many web developers use "browser sniffing" on their sites to determine which browser a visitor is using, and then use server-side coding (ASP, CFML, PHP, JSP, etc.) to add a <link> to a style sheet specifically tailored to that browser. While this technique has the benefit of avoiding the process of creating a single style sheet that works across all browsers, it can still be very time-consuming to employ.

Luckily, TopStyle can help by exporting a style sheet to a new style sheet which contains only properties and values supported by a specific style definition.

To export a style sheet, select File > Export. The Export dialog will then appear, displaying a list of target style definitions. Simply select one of these target definitions and click OK, and TopStyle will create a new style sheet based on the current style sheet. This new style sheet will contain only items supported by the target definition.

Note: Although TopStyle can remove properties and values that aren't supported by the target browser, it can't compensate for bugs in the target browser that only appear when styles are used in specific situations (such as in tables, which often cause problems with Netscape 4.x). For this reason, keep in mind that you will still need to test the exported style sheet in the target browser(s).

Related topics: All About Style Definitions, Style Checker


Related Styles

Right-clicking within an HTML tag or CSS rule enables you to see a list of related styles. For an HTML tag, the related styles list will contain selectors that include the current HTML element and/or the class assigned to the current HTML element. For a CSS rule, it will show any selectors which have the same element or class. Clicking on an item in this list will navigate to that item's style. The related styles list can also be shown from the Tools menu.

Related topics: Editing HTML and XHTML Index, Editing Style Sheets Index


Editing Styles in HTML Documents

When editing HTML documents, almost all of TopStyle's CSS editing features are available if the document contains an HTML <style>..</style> block. Simply position the editor within a style block to use the style inspector or style insight to modify the block's style declarations.

The style checker may be used to validate the style rules within your style blocks, and the style sweeper may be used to reformat them.

If your HTML documents contain deprecated (outdated) markup, TopStyle's style upgrade will convert it to valid CSS.

Related topics: Editing HTML and XHTML Index, Style Upgrade


Editing HTML and XHTML Index

Editing HTML and XHTML

  • HTML Definitions
  • DOCTYPEs in HTML/XHTML
  • Hyperlinking in HTML Documents
  • Using HTML Insight
  • Tag Inspector
  • HTML TagComplete
  • Style Upgrade
  • Using HTML Tidy
  • Related Styles


HTML Definitions

What is an HTML definition?
When editing HTML, an HTML definition works much like a style definition does when editing CSS. An HTML definition tells TopStyle which elements and attributes to display in the tag inspector and HTML Insight, and also determines how HTML TagComplete operates.

What happens when I choose an XHTML definition?
If you wish to write XHTML-compliant markup, it's important that you select an XHTML definition instead of the default HTML 4.01 definition. When an XHTML definition is selected, TopStyle will make sure that XHTML-compliant code is inserted by the inspector, insight and TagComplete features.

Note: Rather than manually changing the HTML definition, we recommend letting TopStyle switch the HTML definition based on the current document's DOCTYPE. This setting is enabled by default and can be changed on the "HTML Settings" page in Options. In effect, when an XHTML DOCTYPE is used, TopStyle will switch to the XHTML 1.0 or 1.1 definition; otherwise, it will default to HTML 4.01.

Related topics: All About Style Definitions, DOCTYPEs in HTML/XHTML


Tag Inspector

When editing HTML, TopStyle's inspector displays the attributes and values supported by the current HTML tag in the editor.

When the inspector is categorized by clicking the button shown to the left, the tag inspector will group attributes into the following categories:

  • Required Attributes (if any)
  • (Standard) Attributes
  • Deprecated Attributes
  • Events

Note: The list of items that appears in tag inspector is determined by the active HTML definition. When an XHTML definition is chosen, the tag inspector will insert XHTML-compliant markup.

Related topics: HTML Definitions


HTML Insight

When editing HTML, HTML insight greatly reduces your typing by displaying a menu of valid elements, attributes and values as you type. HTML insight is the HTML equivalent of style insight for CSS.

In order to help you create markup that suits your needs, HTML insight shows required attributes in bold and deprecated elements and attributes in gray. Deprecated markup refers to outdated items which often have CSS replacements. For example, the align attribute of the div element is deprecated because the CSS text-align property serves the same purpose.

Note: The list of items that appears in the insight menu is determined by the active HTML definition. When an XHTML definition is chosen, XHTML-compliant markup will be inserted.

Related topics: HTML Definitions


HTML TagComplete

In our ongoing effort to save you from unnecessary typing, TopStyle will complete HTML tags as you type. Simple enter an HTML tag, and TopStyle will automatically insert the correct closing tag for you. When the active HTML definition is an XHTML definition, TopStyle will insert the XHTML-compliant /> at the end of tags that don't have a closing tag (such as img and br).

Related topics: HTML Definitions


Style Upgrade

TopStyle's style upgrade provides a quick, powerful way to "upgrade" an HTML document to CSS. Select HTML > Style Upgrade, and style upgrade will convert to CSS any HTML markup that has been deprecated (outdated) in favor of CSS.

For example, the HTML font tag has been deprecated in favor of style sheets, so TopStyle will convert all font tags to their CSS equivalents.

Upon completion, style upgrade will insert a <style>..</style> block which contains the classes that replaced your deprecated markup.

Note: Since TopStyle can't guess your preferred naming convention, you may wish to rename the classes that TopStyle generates.

Related topics: HTML Definitions


Hyperlinking in HTML Documents

TopStyle's editor simplifies navigating between documents by using hyperlinks. Simply move the mouse over a hyperlinked item and single click to open it. If the hyperlink is another HTML document (such as an <a href> link) or style sheet (such as a CSS <link>), the hyperlinked document will be opened in TopStyle. If the hyperlink points to a file that can't be opened in TopStyle (such as an <img>), that file will be opened in the application associated with the file's extension.

HTML elements that contain class attributes are also hyperlinked, so you can click on the class to navigate to its declaration. If the class is defined in a style block within that HTML document, TopStyle will scroll the editor to the class definition. If the class is defined in an external style sheet, TopStyle will open the style sheet and then navigate to the class definition.

Note: By default, TopStyle automatically activates hyperlinks as you move the mouse. If you find this distracting, go to the Editor page in Options and place a checkmark in the box labeled "Don't activate hyperlinks unless Ctrl key is down." This way, hyperlinks will remain inactive until you hold down the Ctrl key.

Related topics: HTML Definitions


DOCTYPEs in HTML/XHTML

What is an HTML DOCTYPE?
Also known as the "document type declaration," a DOCTYPE is a way for a document to declare which version of HTML it's using. In the past it was often considered unnecessary to use a DOCTYPE, but the most recent browsers - including those from Microsoft and Netscape - may render pages differently depending on the DOCTYPE, so it's important to choose the right one.

A full explanation of the usage of HTML DOCTYPEs is outside the scope of this help document. For more information about DOCTYPEs, please visit the [image] DOCTYPE reference on our web site.

tip Tip: TopStyle's full screen preview enables experimenting with different DOCTYPEs, so you can see how different DOCTYPEs affect the rendering of your pages.

How TopStyle Uses DOCTYPE
By default, TopStyle uses the DOCTYPE to determine the active HTML definition. When an XHTML DOCTYPE is used, TopStyle will insert XHTML-compliant markup.

To change the current document's DOCTYPE, select from the DOCTYPE list under TopStyle's HTML menu.

Note: TopStyle's list of DOCTYPEs may be modified from the "HTML Settings" page in Options.

Related topics: HTML Definitions, Full Screen Preview, Using HTML Tidy


Using HTML Tidy

Created by the W3C's extlink Dave Raggett, HTML Tidy is a powerful, free tool for validating and reformatting HTML documents. Similar in design to the CSS Style Sweeper, TopStyle's integration with HTML Tidy provides a user-friendly way to tap into its power. Simply choose a built-in Tidy configuration (such as the handy "Convert to XHTML" configuration), or define your own configuration and save it for future use.

After HTML Tidy executes, TopStyle displays its output in two separate tabs within the output panel. The errors and warnings generated by HTML Tidy are displayed in the "Messages" tab, and the reformatted HTML is displayed on the "Tidy" tab. Simply click the "Copy to active editor" toolbutton on the Tidy tab to overwrite the current document with the reformatted ("tidied") HTML.

Important: No changes are made to the current document until you click the "Copy to active editor" toolbutton. This way, you can review the reformatted HTML before it replaces your code.

Related topics: HTML Definitions, Style Sweeper, Style Upgrade, Using CSE HTML Validator, Using the W3C HTML and CSS Validators


Working with Colors Index

Working with Colors

  • Inserting Colors with the Color Picker
  • Using the CSS Palette Editor
  • Creating Custom Color Palettes


Inserting Colors with the Color Picker

To insert color values for properties, you can choose from the drop-down that appears automatically for color properties in the inspector or insight. Clicking the Choose Color item from either of these dropdowns will display the color picker, which enables selecting from a number of palettes.

Beneath the selected color in the Color Picker is a secondary color dropdown which enables viewing:

  1. Harmonious colors - set of colors which work well with the selected color.
  2. Nearest browser-safe - the browser-safe color that's closest to the selected color.
  3. Complementary color - in color wheel terms, displays the color directly opposite the selected color.
  4. Favorite colors - similar to "custom colors" in the previous version, except that favorite colors are also shown in the Windows color dialog.

To update your document, either double-click a color or single-click a color and press the OK button. Pressing the Cancel button will close the color picker without updating your style sheet.

Tip: To change an existing color value in the editor, simply right click on it and select "Edit color value."

assume-xml-procins:no Related topics: Using the Palette Editor, Creating Custom Color Palettes, CSS Color Values Reference


Using the CSS Palette Editor

TopStyle Pro's Palette Editor is a powerful tool for viewing and changing colors in your style sheets and HTML style blocks. To display the CSS palette editor, select View > Panels > Palette Editor.

The palette editor displays an expandable list of all the colors used in the current style sheet or style block along with a count of how many times they're used. Expanding a color will display a list of style declarations which use that color. Clicking one of these declarations will highlight it in the editor.

Tip: To quickly navigate through every usage of a particular color, simply click on that color multiple times.

Any color which is used as the BODY foreground color will be underlined and shown in bold. Any color which is used as the BODY background color will be shown in bold without an underline. In the example shown to the right, White is the foreground color and Blue is the background color.

Tip: Colors may be dragged from the palette editor into the current document. You can also right-click on a color and select "Copy Color" to copy the color value to the clipboard.

The toolbar above the palette editor enables you to manipulate your style sheet's colors. The toolbutton on the far left is used to replace a color and only operates on the color currently selected in the palette editor, whereas the other toolbuttons operate on every color in your style sheet.

Related topics: Inserting Colors with the Color Picker, Creating Custom Color Palettes, CSS Color Values Reference


Creating Custom Color Palettes

The color picker includes a "Palette" menu which enables selecting from a list of pre-defined palettes, but you can also create custom palettes for future use.

Just select "Manage custom palettes" from the color picker's palette menu to display the Palette Manager. The Palette Manager serves as the "control panel" for custom palettes, enabling you to create, delete, edit and rename palettes. The following options are available when creating a new palette:

  1. Create an empty palette
  2. Copy an existing palette
  3. Import a palette from a style sheet - creates a palette by extracting all color values from a style sheet
  4. Import a palette from Adobe PhotoShop (ACT format only)
  5. Import a palette from Macromedia Fireworks
  6. Import a palette from Macromedia HomeSite
  7. Import a palette from Jasc PaintShop Pro (Jasc PAL format only)
  8. Gradient palette - select two colors and the number of steps between them.
  9. Harmonious color palette - creates a palette of harmonious colors from the selected base color.

Related topics: Inserting Colors with the Color Picker, Using the CSS Palette Editor, Color Values


Previewing Index

Previewing

  • Internal Previewer
  • Full Screen Preview
  • Choosing a Preview DOCTYPE
  • Selecting a Page for Previewing Styles
  • Configuring External Browsers
  • Using Preview Mappings
  • Note About Netscape Gecko


Internal Previewer

When editing HTML, TopStyle's preview will always show the current HTML document. When editing CSS, however, TopStyle gives you two choices for previewing:

  1. A default preview which shows every element, class and ID in the current style sheet. The default preview is used when "Create from current style sheet" is selected,
  2. An HTML-based preview which enables selecting an HTML page to use when previewing style sheets. After an HTML preview file is chosen, TopStyle will display it with the current style sheet applied.

If you wish to use pages containing server-side scripting such as ASP, CFML, PHP or JSP as preview documents inside of TopStyle, you should set up a preview mapping in order to view these pages correctly.

At start-up, TopStyle will automatically detect Internet Explorer 4.01 or later and configure it to be used an an internal previewer. TopStyle will also detect whether you have Netscape Gecko installed, enabling you to choose either browser, or both browsers in a split preview window, as your internal preview browser. Versions of Netscape prior to 6.01 cannot be used within TopStyle (or any other application) due to a limitation of Netscape's browser.

Note: Although TopStyle can use Internet Explorer 3.x as the internal previewer, it is strongly recommended that you upgrade to a later version. IE 3.x has very limited CSS support, which may make it unsuitable as a previewer (depending on your target audience, of course). In addition, IE 3.x has a number of resource (memory) leaks that may cause problems after prolonged use in TopStyle.

Related topics: Selecting a Page for Previewing Styles, Configuring External Browsers, Full Screen Preview


Selecting a Page for Previewing Styles

When editing CSS, by default TopStyle uses an automatically-generated HTML page for previewing styles either internally or externally. By clicking the "Select Preview File" toolbutton above the preview, left, you can select an existing HTML or XML page for the preview. When using an existing page, TopStyle's previewer will display the chosen HTML or XML page as it would appear when the current style sheet is applied to it.

Important: TopStyle does not remove existing style links from the selected preview page before displaying it, so if the chosen preview file already has style links, the previewer will show it using both the current style sheet and the linked style sheet(s). If you wish to change this behavior, go to the Preview page in TopStyle's Options and check the box labeled "Remove existing link tags from preview document." Please note that this option does not modify the actual preview file in any way.

Related topics: Configuring External Browsers, Internal Previewer


Configuring External Browsers

The first time you run TopStyle, it will automatically detect most browsers and add them to the external browser list. However, since not all browsers can be detected, you may want to modify this list by selecting Options > Configure External Browsers.

Note: Although TopStyle auto-detects external browsers the first time you run it, it can't detect multiple versions of the same browser. So if you have multiple versions of Netscape installed, only the last installed version will be detected.

When you select an external browser for previewing, it will use the page you currently have set up for internal previewing.

Related topics: Selecting a Page for Previewing Styles, Internal Previewer


Full Screen Preview

TopStyle's full screen preview enables you to view your documents in a preview window sized to your desktop. The full screen preview may be split into two panels, each of which has its own DOCTYPE selection.

Even better, each panel has its own browser-type selection, so you can configure one preview panel to show the current document in Internet Explorer and the other to show you the same document in Netscape Gecko.

Note: To exit full screen preview, press the close toolbutton, hit the Escape key, or press the same keyboard shortcut that you used to show the full screen preview (F12 by default).

Related topics: Choosing a Preview DOCTYPE, DOCTYPEs in HTML/XHTML, Note About Netscape Gecko


Choosing a Preview DOCTYPE

Please visit [image] our site for more information about HTML DOCTYPEs.

The latest browsers from Netscape and Microsoft use the HTML [image] DOCTYPE element to switch on special "modes" that alter the document's rendering. Since these modes may affect how your style sheets are interpreted, TopStyle includes a drop-down DOCTYPE selection above the full screen preview which enables you to see how using a different DOCTYPE in your HTML documents affects their appearance.

When "(None/Unchanged)" is selected from this drop-down, TopStyle will use the existing DOCTYPE in files selected for preview and will apply no DOCTYPE to the default preview. If a DOCTYPE is selected, TopStyle will always apply it to the preview, overriding any existing DOCTYPE. Note that this feature is only for previewing and alters none of your files - no changes are actually made to your documents when a DOCTYPE is selected.

To modify TopStyle's list of DOCTYPEs, go to the HTML Settings page in TopStyle's Options and press the "Edit DOCTYPEs..." button.

Note: By default, TopStyle's internal previewer uses an embedded copy of Microsoft Internet Explorer. DOCTYPE "sniffing" was added in Internet Explorer 6, so choosing a different DOCTYPE will have no effect if you have an earlier version of Internet Explorer. Of course, even if you have IE6 installed, you may see nothing change when you select a different DOCTYPE since only certain CSS features (such as the box model) are affected by the DOCTYPE in IE6.

Related topics: DOCTYPEs in HTML/XHTML, Selecting a Page for Previewing Styles, Internal Previewer


Note about Netscape Gecko

Gecko is the code-name of the layout engine behind the [image] Mozilla and Netscape 7 browsers. If you're having trouble using Gecko in TopStyle, please [image] visit our web site for the latest information about using Gecko with TopStyle.


Style Checker Index

TopStyle's Style Checker is a powerful tool that helps you locate problems in your style sheets. The style checker will validate your style sheet against multiple style definitions, flagging any invalid properties or values it finds. It will also warn you if bugs in popular browsers may cause problems even when your style sheet is perfectly valid.

  • Configuring the Style Checker
  • Reading the Style Checker Results
  • Style Checker Error Levels
  • Style Checker Error Messages


Configuring the Style Checker

To configure the style checker, select Tools > Configure Style Checker. This will activate the style checker page in TopStyle's Options. The first thing you'll see is a list of style definitions. Any style definition with a checkmark next to it will be validated against by the style checker.

After choosing which style definitions you want to include, click the error levels item underneath the style checker item in the Options dialog. This is where you choose which types of errors you want to see reported.

You can also choose how the style checker should handle URL values, such as those used in the background-image property. By default, only local URLs are verified, but you can choose to verify remote URLs if desired.

By default the style checker will report every error that it finds, but in some cases this may result in more error messages than you would like. To reduce the number of messages, place a checkmark in the option labeled "Hide duplicate messages within the same style definition." When this is selected, the style checker will only warn about an error the first time it's found per style definition. For example, if you use the cursor property throughout your style sheet, the style checker will default to flagging every use of cursor when validating against CSS Level 1 (since cursor isn't supported by CSS1). Checking this option will cause only the first use of cursor to be flagged.

When you're done configuring, select Tools > Style Checker to run the style checker.

Related topics: Reading the Style Checker Results, Error Levels, Error Messages


Reading the Style Checker Results

Style Checker Results

As the style checker runs, it reports a list of error messages related to each style definition you selected during configuration. Clicking on an error message will select the associated property or value in the current style sheet.

Note: If no errors are found for a specific style definition, that definition will not appear in the style checker results.

In addition to errors related to each style definition, you may also see a General warning area. This area includes warnings that apply regardless of the style definition. For example, you may have a property defined twice within the same rule, or you may have used the same selector more than once within a style sheet.

Please refer to the Error Message Reference for further details on some of the problems listed in the style checker results.

Related topics: Configuring the Style Checker, Error Levels, Error Messages


Style Checker Error Levels

The Style Checker reports four levels of error messages:

  • Errors: The style sheet contains unknown properties, unbalanced comments, broken URLs and other problems that will significantly impact the style sheet

  • Warnings: The style sheet contains empty rules, duplicate properties (ie: "Color" defined twice in the same rule), duplicate selectors and other problems that may impact the rendering

  • Hints: The style violates recommended practices (example: a color is specified for a rule without a background color)

  • Browser Tips: These are warnings about particular browsers, usually bugs in their CSS implementation (ie: Netscape incorrectly treats URLs as relative to the HTML document instead of the style sheet)

In addition, TopStyle can also report errors concerning unsupported selectors and pseudo-classes. It's recommended that you always leave these two items checked, since unsupported selectors and pseudo-classes are a common source of problems when creating style sheets.

Related topics: Style Checker Error Messages


Style Checker Error Messages

  • Property redefined. The shorthand property "x" already defines "x".
  • Property "x" does not exist in this definition
  • "x" is not a valid value for "x"
  • When using the color property, a background or background-color property should also be defined
  • A generic family name should be included in your font list
  • The font property should include a size value.
  • "x" is defined multiple times in the same rule
  • Value for "x" is empty
  • "x" is not a valid length unit
  • System colors are not supported by this definition
  • Only the standard 16 named colors are supported by this definition
  • RGB colors are not supported by this definition
  • Multiple values are defined for "x", but this property does not allow sub-values
  • Too many values are defined for "x"
  • The number of comments opened (/*) does not match the number closed (*/).
  • The number of open braces does not match the number of close braces
  • Selector "x" redeclared - rule will not be checked
  • Local URL not found: "x"
  • The invalid character "x" is used in selector "x"
  • This selector contains an underscore, which will cause most browsers to ignore it.
  • Empty declaration block for "x"
  • Font names that contain spaces should be enclosed in quotes.
  • The font property requires a font-size
  • There should not be a space between the number and the length unit in this value.
  • Pseudo-class "x" isn't supported by this style definition.
  • "x" selectors aren't supported by this style definition

Property redefined. The shorthand property "x" already defines "x".
Shorthand properties are used to group related values under a single property. For example, the font property is composed of font-style, font-variant, font-weight, font-size, line-height and font-family. So, a rule that includes the font shorthand property shouldn't also include font-family, since in effect this is defining font-family twice. Another common mistake is to redefine background-color by using the shorthand property background.

Top Property "x" does not exist in this definition
The identified property is not valid for the style definition. For example, the CSS1 definition will raise this error if you use the cursor property, since cursor wasn't introduced until CSS2.

"x" is not a valid value for "x"
The value given for the specified property is not valid. Common mistakes that lead to this error are:

  • Failing to add a unit to a length value (ex: 12 instead of 12pt)
  • Using a value that's valid in one style definition but not in another (ex: none is a valid text-decoration value in Internet Explorer 4, but it's not supported by Internet Explorer 3)
  • Using a percentage value for a property that doesn't support percentages.
  • Neglecting to use a hash in front of a hex color value (ex: 99cccc instead of #99cccc)

Top When using the color property, a background or background-color property should also be defined
The background and color properties should be specified together to avoid conflicts with user style sheets.

A generic family name should be included in your font list
Your document may be viewed by many different systems, so there's no guarantee that every visitor will have a particular font. Generic fonts, on the other hand, are fonts that should be understood by every CSS-capable browser. Always add a generic font (such as sans-serif, serif or monospace) to the end of any font-family value. Note that some style definitions (such as WebTV Plus) don't support the full set of generic font names, so you may get this error even when a generic name is used.

The font property should include a size value.
The shorthand font property requires a font size value, but none is given.

Top "x" is defined multiple times in the same rule
The same property is used more than once within a single rule.

Value for "x" is empty
A property is defined with no value. Example: { font-size: ; }.

"x" is not a valid length unit
A length value is using an invalid unit. This may occur if you misspelled the unit name (example: "pz" instead of "px") or if a particular style definition doesn't support the specified unit (example: Internet Explorer 3 doesn't support the "em" unit).

Top System colors are not supported by this definition
System colors aren't real colors, but are instead colors on the user's system. For example, the system color ButtonText refers to the color used for push buttons. System colors were introduced in CSS2 and aren't supported by all browsers, so this error will be generated by any style definition that doesn't understand them.

Only the standard 16 named colors are supported by this definition
Style definitions such as CSS1 only understand the standard 16 named colors (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow), so color values such as AntiqueWhite or Coral aren't supported.

RGB colors are not supported by this definition
You may get this error when the validating against the Internet Explorer 3 style definition, since IE3 doesn't support RGB color values.

Top Multiple values are defined for "x", but this property does not allow sub-values
A property which only accepts a single value has more than one value given.

Too many values are defined for "x"
The specified property only accepts a certain number of values, and you have more than that number of values defined. For example, margin accepts four values, so you'll get this error if you supply five values.

The number of comments opened (/*) does not match the number closed (*/).
You'll see this error if you neglect to close a comment. The style checker will quit if it runs into this problem, since it normally skips comments.

Top The number of open braces does not match the number of close braces
This error will occur if you neglect to close a rule, or if you accidentally type an extra { or } somewhere in your style sheet.

Selector "x" redeclared - rule will not be checked
A selector is used more than once within the same style sheet. You can turn this warning off on the Style Checker page in TopStyle's options.

Local URL not found: "x"
A local URL could not be resolved. Make sure that the URL value points to a valid file.

Top The invalid character "x" is used in selector "x"
Selectors must begin with an alphabetic character, and can't contain spaces or other special characters.

This selector contains an underscore, which will cause most browsers to ignore it.
Some browsers, such as Internet Explorer 5, support the use of underscores in selector names. However, most do not, and will ignore the entire rule.

Empty declaration block for "x"
You have an empty declaration block (ex: BODY { } ).

Top Font names that contain spaces should be enclosed in quotes.
Although most browsers don't enforce this rule, it's a good idea to place quotes around font names that contain spaces.

The font property requires a font-size or font-family value.
A common mistake when using the font property is to neglect to include a font-size or font-family value. These values are required in order for the font property to be considered valid.

There should not be a space between the number and the length unit in this value.
A common mistake is to use a space between a number and its unit (ex: 12 pt instead of 12pt.)

Top Pseudo-class "x" isn't supported by this style definition.
Many pseudo-classes aren't supported by every browser. Most notably, the commonly-used A:HOVER pseudo-class isn't supported by Netscape 4.x.

"x" selectors aren't supported by this style definition
Many selector types aren't supported by every browser, resulting in this error. In particular, CSS2 selectors (such as attribute selectors) are poorly supported by current browsers.

Related topics: Style Checker Error Levels


Validation Index

Validation

  • TopStyle's Style Checker
  • Using the W3C HTML and CSS Validators
  • Using CSE HTML Validator
  • Watchfire Bobby Accessibility Checker


Using CSE HTML Validator

CSE HTML Validator is a popular HTML syntax checker created by [image] AI Internet Solutions. If you own the Pro or Standard versions of CSE HTML Validator, TopStyle will integrate with it to provide a powerful way to check your HTML documents for mistakes.

To start CSE HTML Validator in TopStyle, click the toolbutton shown at the left (if you don't see this toolbutton, it may not be showing in the current layout, in which case it should be available from beneath the HTML menu). After a brief pause, the "Messages" tab in TopStyle's output panel will display the results of CSE HTML Validator's syntax checking. If you're using CSE HTML Validator version 4.5 or above, the results will be grouped by category.

Note: We're not the creators of CSE HTML Validator - we simply offer integration between it and TopStyle. If you have any questions about this product, please visit the [image] CSE HTML Validator home page

Related topics: Using HTML Tidy, Using the W3C HTML and CSS Validators


Using the W3C HTML and CSS Validators

Using the W3C HTML and CSS Validators with TopStyle

The [image] World Wide Web Consortium (W3C) offers free HTML and CSS validation services which may be accessed from within TopStyle.

The W3C CSS Validator offers stronger validation than TopStyle's style checker, but it doesn't offer the style checker's browser compatibility warnings. For this reason, we recommend using both tools to check your style sheets for problems. To pass the current style sheet to the W3C CSS Validator, click the toolbutton shown at left, or select Tools > W3C CSS Validator.

To send the current HTML document to the W3C HTML Validator, click the toolbutton shown at left, or choose HTML > W3C HTML Validator.

When the validation has completed, the results will be shown in the Reports tab within TopStyle's Output panel.

Note: The W3C validators are online tools, so you will need to have an active Internet connection in order to use them. Please keep in mind that these services are provided by the W3C and are not under our control.

Related topics: Using HTML Tidy, Using CSE HTML Validator, Style Checker


Watchfire Bobby Accessibility Checker

Watchfire's Bobby aids in locating accessibility problems with your HTML documents by testing for compliance with government standards, including the U.S. Government's Section 508.

Bobby is available both as a free online service and as a commercial desktop application. TopStyle uses the online version by default, but TopStyle may be configured to use the Java desktop version of Bobby instead. To configure Bobby for use with TopStyle, open TopStyle's Options and click on the Validation page.

Bobby icon To access Bobby from within TopStyle, click the toolbutton shown at left, or select HTML > Bobby. After Bobby finishes checking your document, the results will be displayed in the Reports tab of TopStyle's Output panel.

Note: Please remember that we aren't the creators of Bobby - we simply provide a way to integrate it with TopStyle. Questions related to Bobby should be directed to Watchfire.

Related topics: Using HTML Tidy, Using the W3C HTML and CSS Validators, Using CSE HTML Validator


Site Management Index

Site Management

  • Creating a New Site
  • Opening a Site
  • Site Summary View
  • Site Styles View
  • Rebuilding a Site
  • Using the Link Wizard
  • Site Reports
  • Using Mappings when Building a Site


Creating a New Site

To create a new site, select File > New Site to open the new site dialog, then choose the root directory of the site. TopStyle will give the site the same name as the selected folder, but you may change this. After you have chosen the root directory, clicking the Exclusion button will allow you to exclude selected subdirectories from the site. You may also specify a pattern which will be used to exclude HTML files from your site.

Important: When building a site, TopStyle will only include files that match the HTML Document Extensions shown on the File Extensions page in TopStyle's Options.

If your site contains server-side code such as ASP, CFML, PHP or JSP, you should elect to use mappings when building the site. This is critical, since server-side code won't be processed by TopStyle's Site Summary or Site Reports unless the site was built using a mapping.

Related topics: Site Summary, Site Styles, Site Reports, Using Mappings when Building a Site,


Opening a Site

Select File > Open Site to display a list of available sites, then click the icon for the site you want to open. Once a site has been opened, TopStyle will show the site's name at the far right of the status bar.

Note: Information about a site is cached for quick access. If you regularly make changes to files in your site, this cache may become out of date unless you regularly rebuild your site. You can tell TopStyle to automatically rebuild your site on the "Site Options" page in Options.

Related topics: Creating a New Site, Rebuilding a Site


Site Summary View

TopStyle's Site Summary View is a powerful way to get a quick style-based overview of your site. TopStyle's site summary enables you to immediately see the following information:

  • All style sheets in your site
  • All HTML documents in your site
  • All HTML documents with style links
  • All HTML documents without style links
  • All HTML documents with broken style links
  • All HTML documents with <style>..</style> blocks
  • Recently changed HTML documents
  • Recently changed style sheets
  • Unused style sheets
  • External (remote) style sheets
  • All style sheets with @import statements

Note: in order for TopStyle's site summary to report accurate information, it's important that you regularly rebuild your site to reflect the latest changes. Unless your site is exceptionally large and would take a long time to rebuild, it's recommended that you let TopStyle rebuild it automatically. You can configure TopStyle to automatically rebuild sites on the "Site Options" page in Options.

Related topics: Site Styles, Creating a New Site, Opening a Site


Site Styles View

TopStyle's Site Styles View is a great way to find out what pages in your site are - and are not - linked to style sheets. Site Styles view is broken into three lists:

  • Style Sheets - shows all style sheets in your site.
  • HTML documents - shows HTML, CFML, ASP and other browsable web documents in your site. The files which appear in this list depend on the current filter, which enables you to see either all HTML documents linked to the selected style sheet, or all HTML documents NOT linked to the selected style sheet.
  • Linked style sheets - shows all style sheets linked to the document currently selected in the web document list.

Site Styles view also provides an easy way to remove a style sheet link. Simply right-click on a style sheet in the linked style sheets list, then select "Remove Link" from the context menu. When filtered to show documents NOT linked to the selected style sheet, the selected style sheet may be linked to the selected document by right-clicking on the style sheet and choosing "Link to" from the context menu.

Related topics: Site Summary, Opening a Site, Creating a New Site


Rebuilding a Site

When you create a site, TopStyle builds a database of all files in the site along with all style sheets linked within those files and all classes used in those files. Over time this database may become out-of-date as you use other programs to update these files. For this reason, it's important to rebuild your site to make sure it's current.

Select File > Rebuild Site to rebuild the active site. After scanning the files in your site, you'll be presented with a dialog listing all files that have been added, deleted or modified since the site was last rebuilt or created. If no changes were detected, no dialog will appear - instead, you'll see a message in the status bar stating that no changes were found in your site.

If you regularly make changes to the documents in your site, you might find it helpful to tell TopStyle to automatically perform a rebuild every time it opens a site. This way, you don't have to worry about rebuilding the site - TopStyle will do it for you. To turn this feature on, go to the "Site Options" page in TopStyle's Options.

Tip: Select "Recreate Site" from the File menu to create the current site from scratch using the same information you provided when you first built the site.

Related topics: Creating a New Site, Opening a Site


The Link Wizard

Link Wizard

The Link Wizard is used to quickly link a style sheet to multiple HTML documents. Simply select the files or files in folders that you want to link the style sheet to, then select the Insert style.

Note: we strongly recommended inserting a style <link> instead of choosing to insert a <style> block. If you use a <style> block, the contents of the style sheet will be inserted between <style>...</style> tags in every HTML document, defeating one of the main benefits of style sheets. Please refer to the CSS Basics section on using style sheets for more details.

Example of a <link> tag:

<html>
<head>
<title>Linking Style Sheets</title>
<link rel="STYLESHEET" type="text/css" href="styles.css">
</head>


Site Reports Index

Site Reports

TopStyle Pro's Site Management features include a powerful Site Reports view which provides detailed information on style usage in your site.

  • Orphan Classes
  • Undefined Classes
  • Class Usage
  • ID Overview
  • Case Mismatch

Important: If you use server-side scripting such as ASP, ColdFusion or PHP to insert styles into your HTML documents, you must build your site using a mapping. This enables TopStyle to pass your documents through your local web server before reading them, translating any server-side code in the process. If you build your site without using a mapping, then each of the site reports will fail to reflect any style links, include files, etc., added through server-side scripting, resulting in inaccurate information.


Site Reports - Orphan Classes

The Orphan Classes report displays style sheets which contain definitions for classes that aren't used in any HTML documents which link to those style sheets. For example, if your style sheet contains the class .warning but none of the HTML documents which link to that style sheet contain class="warning", then .warning will appear in this report.

If any orphan classes exist in the current site, this report will show an expandable list of style sheets which contain the orphans. Clicking a style sheet in this list will display its contents in the read-only editor. To edit the style sheet, simply click the Edit toolbutton to the left of the editor.

When a style sheet is expanded, a list of its orphan classes will appear below it. Clicking an orphan class will locate it in the read-only editor. If that class is used in more than one selector (ex: .caption, h2.caption, h3.caption), then the "Next" and "Previous" toolbuttons to the left of the editor will be enabled so you can quickly navigate through each usage.


Site Reports - Undefined Classes

The Undefined Classes report displays HTML documents in your site that use style classes which aren't defined in any style sheet linked to those HTML documents. If any undefined classes exist in the current site, this report will show an expandable list of HTML documents which contain the undefined classes. Clicking an HTML document in this list will display its contents in the read-only editor. To edit the HTML document, simply click the Edit toolbutton to the left of the editor.

Note: When editing an HTML document, it will be opened in the HTML editor defined in TopStyle's Options.

When an HTML document is expanded, a list of its undefined classes will appear below it. Clicking an undefined class will locate it in the read-only editor. If that class is used in more than once, then the "Next" and "Previous" toolbuttons to the left of the editor will be enabled so you can quickly navigate through each usage.


Site Reports - Class Usage

The Class Usage report displays an overview of where your style classes are used in the current site. All style sheets with classes that are used in your site's HTML documents will be listed here. When a style sheet is expanded, all classes in that style sheet which are used will be displayed, and each class will show a count of how many HTML documents use that class. Expanding the class will list all HTML documents which use that class.

Note: Classes that aren't used in any of your site's HTML documents are not shown in this report. To see unused classes, refer to the Orphan Classes report.


Site Reports - ID Overview

The ID Overview report displays an overivew of where your IDs are defined and used in your site. All style sheets that define IDs will be listed here. Expanding a style sheet in this list will show each of its IDs. If an ID is used in any of your site's HTML documents, then expanding the ID will show those HTML documents.

Note: Unlike the Class Usage report, which only displays classes which are used in your site's HTML documents, the ID Overview report lists IDs even if they're unused.


Site Reports - Case Mismatch

The Case Mismatch report displays HTML documents which use class names that have been defined in your style sheets using a different case. For example, if your style sheet contains .warning (lowercase) but you use class="WARNING" (uppercase) in an HTML document, then that HTML document will be included in this report.

Most browsers use case-insensitive matching, so using class="WARNING" is the same as using class="warning". However, Netscape 6 uses case-sensitive matching (which is correct, according to the W3C specifications). So, as far as Netscape 6 is concerned, .warning and .WARNING are two different classes.

This, of course, has resulted in a lot of confusion among web authors seeking compatibility with Netscape 6. In order to work with Netscape 6 - and any other standards-compliant browsers released in the future - it's important to use consistent case in your style sheets and HTML documents. The Case Mismatch report will help you locate situations where you've used inconsistent case so that you may correct them.

Tip: For more information about the importance of using consistent case in class names, take a look at this article on Netscape's site.


Mappings Index

TopStyle uses mappings to translate a location on your hard drive to a URL on your local web server. Most TopStyle users will never need to use mappings. However, if you work with HTML documents containing server-side coding, you may find mappings very helpful. These server-side languages require a web server in order to be processed, so by using a mapping you can force your web pages to be passed through a local web server before being seen by TopStyle.

A mapping is simply a way for TopStyle to retrieve local documents via HTTP through a web server, translating any server-side code in the process.

To set up a mapping, go to the Mappings page in TopStyle's Options. A mapping consists of a local directory name and its corresponding URL as seen by your local web server. Normally, "Map From" should contain the name of your local web server's home directory (a.k.a. "Document Root"), and "Map To" should contain http://localhost/.

For example, if you're using Microsoft IIS, in most cases your mapping should be something like this:

Map From: C:\InetPub\wwwroot\
Map To: http://localhost/
  • Using Mappings with the Internal Previewer
  • Using Mappings when Building a Site


Using Mappings with the Internal Previewer

If you develop web sites which employ server-side coding, you'll most likely want any server-side code to be processed before displaying one of your pages in TopStyle's internal preview. To do this, you'll need to configure a mapping, which forces TopStyle to pass documents through your web server before they're previewed.

After you specify your mappings on the Mappings page in TopStyle's Options (as described here), be sure to place a checkmark in the box labeled "Use mappings when previewing." Once this is set, any preview documents that can be mapped will be passed through a local web server before being displayed in TopStyle.

Related topics: Mappings Index, Selecting a Page for Previewing Styles


Using Mappings when Building a Site

If you use server-side scripting such as ASP, ColdFusion or PHP, you'll most likely want to use a mapping when building your site. If your site employs include files or uses server-side code to insert style <link>s in your documents, you must use a mapping in order for the site summary and site reports to give accurate results.

To use a mapping when building a site, simply fill in the "Map From" and "Map To" fields on the New Site dialog. The "Map From" field should contain the location on your hard drive, and the "Map To" field should contain the HTTP address which corresponds to that folder.

Note: Building a site when using mappings may take significantly longer, since each page must be passed through your local web server before TopStyle can process it.

Related topics: Mappings Index


Customizing Index

  • Docking Panels
  • Customizing Toolbars
  • Customizing the Editor Context Menu
  • Working with Layouts
  • Customizing the View Bar


Docking Panels

Docking enables you to rearrange the positions of the following panels:

  • Style Inspector
  • Selector List
  • Output
  • View Bar
  • Palette Editor
  • Files
  • Clip Library

To rearrange a panel, click on its title bar and drag it to the desired location. TopStyle features two different types of docking:

  1. Stacked - panels are stacked in rows or columns when docked.
  2. Tabbed - each panel is shown on a separate tab when docked.

The docking style may be changed at any time by right-clicking in the caption of any docked panel.

Related topics: Customizing Toolbars, Working with Layouts


Customizing Toolbars

TopStyle's toolbars are similar to those used in Microsoft Office, and are very easy to customize. The first - and simplest - customization method is to click the arrow at the far right of any toolbar. This will display a menu listing all toolbuttons that can be displayed on that toolbar. Simply place a check next to any toolbutton in the list to add it to the toolbar.

Right-clicking on any toolbar will bring up a menu listing all available toolbars for you to choose from. If you select the "Customize..." item at the bottom of this menu, the toolbar customization dialog will appear. When this is open, you can completely customize the toolbars by dragging-and-dropping toolbuttons from the customization dialog to any toolbar. In addition, you can remove a toolbutton by dragging it off its toolbar.

You can also create new toolbars from within the toolbar customization dialog.

Related topics: Editor Context Menu, Working with Layouts


Editor Context Menu

The editor context menu is the menu that appears when you right-click on the editor. TopStyle enables you to completely customize this menu, so your favorite features are always a click away.

Select "Customize Editor Menu" from either the Tools menu or the editor context menu itself to display the Menu Editor and the toolbar customization dialog. Simply drag items from the customization dialog to the menu editor to add toolbuttons to the editor context menu. Note that the menu editor will collapse when it doesn't have the focus, but it will re-expand when an item is dragged to it.

Related topics: Customizing Toolbars


Working with Layouts

Layouts are a way to save and restore the position of everything on the TopStyle display, enabling you to define different ways of working with minimal fuss. TopStyle comes with a few built-in layouts, but you can easily create your own by either clicking the Layout toolbutton or selecting Options > Manage Layouts.

When you save a layout, TopStyle retains the location, size and visibility of the following screen elements:

  • Toolbars
  • Inspector
  • Selector List
  • Output
  • Palette Editor
  • File Panel
  • Clip Library
  • Status Bar

To restore a layout, simply click the Layout toolbutton and select the desired layout.

Note: The editor context menu is not stored with each layout. Customizations made to it apply to every layout.

Related topics: Customizing Toolbars, Docking Panels


Custom Keyboard Shortcuts

TopStyle Pro 3.0 takes customizable keyboard shortcuts to a new level by enabling you to create multiple sets of keyboard shortcuts.

Even better, you have the ability to insert different text strings based on the context of what's being edited. For example, you could create a Ctrl+B shortcut which inserts font-weight: bold when editing a style sheet or style block, but inserts <strong>..</strong> when editing HTML.

Create keyboard sets that mimic your favorite text or HTML editor, or create your own from scratch. Just select Options > Keyboard Shortcuts to change or customize the active keyboard set.

Related topics: Appendix A: Default Keyboard Shortcut List, Customizing Toolbars, Working with Layouts


Customizing the View Bar

Right-clicking within the view bar will display a context menu that enables the creation of custom groups or custom items. Creating a custom group will add a new item to the view bar tab. Each custom group (including the "Resources" group) may contain custom items which point to local files, style sheets or external web sites. If a custom item points to a web site, clicking on it will open that site in your browser. If it points to a style sheet or local HTML file, then it will be opened in TopStyle for editing. If the item points to another type of local file, the file will be opened in its associated application.

Note: The "View" and "Sites" groups cannot be modified, but the "Resources" group can be customized.

Related topics: Using the View Bar


Appendix A: Default Keyboard Shortcut List

Default Keyboard Shortcuts

Note: TopStyle offers the ability customize your keyboard shortcuts, so this list will only be accurate if you haven't re-defined any shortcuts.

Alt+X | Exit
Ctrl+- | Collapse all rules
Ctrl+, | Unindent
Ctrl+. | Indent
Ctrl+[ | Previous declaration block
Ctrl+] | Next declaration block
Ctrl+= | Expand all rules
Ctrl+A | Select All
Ctrl+B | Show View Bar
Ctrl+D | Toggle the output panel
Ctrl+F | Find
Ctrl+L | Manage Layouts
Ctrl+M | Find Matching Tag or Delimiter
Ctrl+N | New Blank Style Sheet
Ctrl+O | Open
Ctrl+Q | Clip Library Quick Insert
Ctrl+R | Replace
Ctrl+S | Save
Ctrl+Space | Show style insight
Ctrl+Tab | Next Document
Ctrl+W | Close the current document
Ctrl+Z | Undo
F3 | Find again
F4 | Toggle the display of all visible panels
F5 | Refresh
F6 | Style Checker
F7 | Style Sweeper
F8 | Options
F9 | Toggle the File List
F11 | External Preview
Shift+Ctrl+A | Select Current Rule
Shift+Ctrl+C | Select Color
Shift+Ctrl+D | Select Active Style Definition
Shift+Ctrl+K | Edit HTML Class
Shift+Ctrl+L | Toggle the Clip Library
Shift+Ctrl+M | Comment
Shift+Ctrl+N | New
Shift+Ctrl+S | Save As
Shift+Ctrl+T | Insert HTML Style Block
Shift+Ctrl+Tab | Previous Document
Shift+Ctrl+W | Close all documents
Shift+Ctrl+Z | Redo
Shift+F4 | Toggle the editor/inspector keyboard focus
Shift+F6 | Configure Style Checker
Shift+F7 | Configure Style Sweeper
Shift+F8 | Customize toolbars
Shift+F9 | Toggle the Inspector

Pre-defined HTML/CSS Shortcuts:

Ctrl+7 | &lt;..&gt;
Shift+Ctrl+A | Anchor Tag
Ctrl+5 | ASP Block
Shift+Ctrl+5 | ASP Line
Ctrl+B | Bold
Shift+Ctrl+B | Break (BR)
Ctrl+Enter | Break (BR) and start a new line
Ctrl+H | Horizontal Rule (HR)
Shift+Ctrl+I | Image
Ctrl+L | List Item (LI)
Shift+Ctrl+Space | Non-breaking space (&nbsp;)
Shift+Ctrl+P | Paragraph (P)
Ctrl+6 | PHP Block
Shift+Ctrl+6 | PHP Line
Ctrl+T | Table
Ctrl+U | Unordered List


Appendix B: Regular Expressions

Regular Expressions

TopStyle's search features support Regular Expressions, enabling you to find or replace strings based on patterns. The following regular expression operators are supported:

a+ | One or more occurrences of a
a* | Zero or more occurences of a
a? | Zero or one (i.e. optional) occurence of a
a|b | Either a or b
a||b | a or b or both a and b in any order
abc | a followed by b followed by c
[abc] | A single character, one of a or b or c
[a-b] | A single character, ranging in value from a to b inclusive
[^abc] | A single character, any except a, b or c
(abc) | a followed by b followed by c
"abc" | The letters a followed by b followed by c with no special significance attached to a, b or c
. | Any character except a new line
\t | The tab character
\n | The newline character
\r | The return character

In order to search for literal instances of characters that would otherwise denote RE operators, you must escape them by preceding them with a \ . For example, to find a plus (+) sign, use \+


Appendix C: Wildcards

Wildcards (Find in Files)

TopStyle's Find in Files feature supports the following simple wildcards:

* | match any substring (including null)
? | match any single character
# | match any numeric character (0..9)
@ | match any alpha character (A..Z, a..z)
$ | match any alphanumeric character
~ | match any non-alphanumeric, non-space character

If you need more advanced pattern matching, you should use regular expressions instead of wildcards.


Third-Party Integration with TopStyle

TopStyle offers unsurpassed power as a standalone style sheet editor, and it also offers first-class CSS editing from within a number of popular web authoring tools.

  • Using TopStyle with Macromedia Dreamweaver MX
  • Using TopStyle with HomeSite and ColdFusion Studio
  • Using TopStyle with Microsoft FrontPage

TopStyle integration is also supported by third-party editors such as NoteTab Pro, HTML-Kit, AceHTML, 40tude HTML, SpiderWriter, Multi-Edit, and ASPEdit. The list of tools which support TopStyle is constantly growing, so please stop by [image] our web site for the latest details about products which integrate with TopStyle.


Using TopStyle with Macromedia Dreamweaver MX

Stop by extlink our site for the latest information about integrating TopStyle with Dreamweaver!

Macromedia Dreamweaver MX automatically detects TopStyle and enables it as the external CSS editor, so Dreamweaver MX users benefit from improved TopStyle integration. More details are available from extlink our site.

Versions of Dreamweaver prior to MX enable you to configure editors for different file types. When TopStyle is Dreamweaver's CSS editor, opening a style sheet from a Dreamweaver site will pass it to TopStyle for editing. To enable this, go to TopStyle's Options (F8) and switch to the "Third Party Integration" page, then place a checkmark in the box labeled "Make TopStyle Dreamweaver's CSS editor."

Dreamweaver also enables the use of an external HTML editor, which is launched from Dreamweaver by pressing Shift+Ctrl+E. To set TopStyle as Dreamweaver's external HTML editor, simply click the button labeled "Make TopStyle Dreamweaver's HTML Editor."

Note: To make TopStyle Dreamweaver's CSS editor from within Dreamweaver itself, select Edit > Preferences, then switch to the "External Editors" page (or "File Types/Editors" page, depending on your version), and add .css to the list of file extensions, then add TopStyle to the list of editors for CSS files. If more than one editor is listed for CSS files, be sure to select TopStyle and click the "Make Primary" button. You can make TopStyle Dreamweaver's HTML editor on this same page in Dreamweaver's options by entering the path to TopStyle in the "External Code Editor" field.


HomeSite Integration

Both TopStyle Pro and TopStyle Lite offer integration with HomeSite version 4.01 or later. HomeSite 4.5 and above include TopStyle Lite, so integration is automatically enabled by HomeSite. If for some reason the integration stops working, you may need to manually enable it by opening TopStyle's Options and clicking the button labeled "Enable HomeSite Integration" on the "Third Party Integration" page.

When integration is enabled, TopStyle will be used from within HomeSite whenever a style sheet, style block or style attribute is edited.

  • Adding Styles to Tags in HomeSite
  • Editing Embedded Styles in HomeSite
  • Editing Style Sheets in HomeSite


Using TopStyle with FrontPage

Microsoft FrontPage enables you to configure editors for different file types. When TopStyle is FrontPage's CSS editor, opening a style sheet in FrontPage will pass it to TopStyle for editing. To enable this, go to TopStyle's Options (F8) and switch to the "Third Party Integration" page, then place a checkmark in the box labeled "Make TopStyle FrontPage's CSS editor."

Note: You can also make TopStyle FrontPage's CSS editor from within FrontPage itself. Just select Tools > Options, then switch to the "Configure Editors" tab and set TopStyle as the editor for CSS files.


CSS Basics

What are style sheets?

If you've ever created a web site, you've most likely used an assortment of <font> and other tags to control how your pages look. This ties the presentation of your site with its content, making it hard to modify your site's design. Suppose you later decide you want to change the color scheme or fonts used in your site - you'll have to edit every page in order to do this.

Style sheets provide a solution to this problem. Instead of defining the site's design in each and every page, you can use a style sheet to control the overall layout of your site. Then if you want to change how your site looks, you simply modify the style sheet.

  • What does a style sheet look like?
  • How do I use styles on my site?
  • What are the drawbacks of style sheets?

Please note that only a very basic overview of style sheets is provided here - several important topics, such as positioning, are not mentioned. For a more thorough overview of style sheets, come visit our [image] online bookstore for recommendations on books about style sheets. You may also find it helpful to browse our list of external CSS resources for more information.

Next »


CSS Basics

What does a style sheet look like?

A style sheet is made up of rules that look something like this:

H3 {
font-family: Arial;
font-style: italic;
color: green
}

Each rule begins with a selector, which is H3 in the example above. A selector is normally one or more HTML elements (tags), and the declarations inside the rule describe how those elements should appear. A declaration is simply a CSS property followed by a value. For example, the declaration "font-style: italic;" is composed of the property "font-style" followed by the value "italic". So, this example states that every <H3> HTML tag should use an Arial italic font and be colored green.

You can also use classes as selectors, which aren't tied to specific HTML elements. For example, consider this rule:

.greenitalic {
font-family: Arial;
font-style: italic;
color: green
}

The declaration block is the same as that in the previous example, but instead of using H3 as the selector, we're using the class .greenitalic. Note that .greenitalic doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed).

To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to apply the above style to an <H3> tag, you'd use:

<H3 CLASS="greenitalic">this is greenitalic<H3>

(note that the period before the class name is not included).


CSS Basics

How do I use styles on my site?

There are several ways you can use style sheets. The first is simply to create your HTML documents using the style attribute introduced in HTML 4.0. Most HTML tags now support this attribute, and it enables you to define styles on a tag-by-tag basis. For this reason, we recommend against using the style attribute. By applying styles within your tags, you're missing out on the benefits of keeping your content separate from your design.

The next method is to embed the style using a style block in the <HEAD> section of your HTML document. A style block is composed of an opening <STYLE> tag followed by a set of CSS rules followed by a closing </STYLE> tag. For example:

<STYLE>
BODY { color: navy; }
H1 { font-size: 12pt; }
</STYLE>

While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular HTML document. We recommend using the remaining method, linking an external style sheet, to achieve the greatest flexibility. Linking a style sheet to an HTML document simply requires using a <LINK> tag in the <HEAD> section of every document you wish to apply the style sheet to. For example:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document it's linked to. This is where the benefits of style sheets are most apparent, since you no longer have to update every single page in order to overhaul your site's design.


CSS Basics

What are the drawbacks of style sheets?

Style sheets do have a downside. Right now the biggest problem is the imperfect CSS implementations that today's browsers offer. Even though the [image] W3C issued their [image] CSS1 recommendation way back in 1996, not every browser fully supports it. Although recent browsers from Microsoft and (most notably) Opera Software include fairly complete CSS1 support, older browsers - Internet Explorer 3 and Netscape 4 in particular - are not only incomplete in their CSS support, but what they do support is often very buggy as well.

This makes it very difficult to create style sheets that work across all browsers, since what looks good in one browser may look awful in another. Some web authors use JavaScript to serve up a different style sheet for each browser, but we don't recommend this since it negates some of the reasons you'd want to use CSS in the first place.

This is where TopStyle comes in. TopStyle helps you create style sheets that work across browsers by alerting you of problems as you work. If you're using the Pro version of TopStyle (as opposed to TopStyle Lite), the style checker will validate your code, warning you not only of errors in your style sheet, but also of bugs in popular browsers that may affect its rendering.

« Previous


TopStyle Tutorial

This Tutorial introduces TopStyle's CSS features by stepping you through the creation of a simple style sheet. Cascading style sheet concepts are explained along the way, but basic familiarity with HTML is assumed.

Note: if you launched this tutorial from TopStyle's welcome screen, click skip welcome at the top of the welcome screen before you begin the tutorial.

Begin the Tutorial »


Starting from Scratch

Step 1: Starting from Scratch

Before we do anything else, we first need to set the active style definition. A style definition is simply a set of properties, values and rules that apply to a specific implementation of CSS. Click here for more information about how TopStyle uses style definitions.

Find the style definition dropdown (shown here), then select CSS Level 1. Note that this dropdown is located above the style inspector, so if the style inspector is hidden you'll need to display it either by clicking the "Show Inspector" toolbutton or by hitting Shift+F9. You may also select the active style definition by pressing [Shift+Ctrl+D].

Now that the active style definition has been set, we're ready to create a new style sheet. Normally you create a new style sheet using the Style Sheet Wizard, but for the benefit of this tutorial we're going to start with an empty style sheet. You can create an empty style sheet by clicking [Ctrl+n], or by selecting "New Style Sheet" from the File menu.

Next »


Adding a Selector

Step 2: Adding a Selector

The next step is to add a selector. At its simplest, a selector is just an HTML element (tag), such as H2 or BODY. When you use an HTML element as a selector, you're stating that you want to modify the style for every instance of that element.

To add a selector in TopStyle, click the "New CSS Selector" toolbutton to display the TopStyle Selector Wizard. This toolbutton is located above the CSS Selector List. If you can't find this toolbutton, it may be because the selector list is hidden, in which case choose "New Selector" from the Tools menu instead.

The first selector we're going to add is a simple selector for the BODY element, so click on the "Simple" item at the top of the Selector Wizard, then locate BODY in the list of HTML elements on the left side of the Wizard. Next, double-click on it to add it to the list of current selectors on the right side of the dialog, then click OK to insert the new selector into the current style sheet. Your style sheet should now look like this:

BODY {

}

Before we go any further, you should save the style sheet. You can save it anywhere you like, but give it the name tutorial.css.


Adding a Declaration

Step 3: Adding a Declaration

Now that the first selector has been added, we're going to define its declaration block. As its name implies, a declaration block is composed of declarations, each of which is in turn composed of a property and corresponding value. A selector plus its declaration block is called a rule.

There are several ways to add declarations in TopStyle, but right now we're going to use the style inspector. If the style inspector isn't showing, hit Shift+F9 to make it visible.

Beneath the style inspector is TopStyle's property help, which shows the style definitions that support the current property. Click here for more information about property help.

In TopStyle's editor, place the cursor between the { } braces. Now go to the style inspector and locate background-color in the property column on the left. In the value column on the right, click the arrow to show values that are appropriate for background-color and select Navy. Next, locate the color property and choose the value White. Your style sheet should look like this:

BODY {
background-color: Navy;
color: White;
}

If your style sheet has the same declarations as above but the declarations are formatted onto a single line, select Tools > Format Style Rule as Multiple Lines to reformat the rule.


Using Fonts

Step 4: Using Fonts

Our next step is to assign a value to the font-family property. Unlike most properties, font-family accepts a list of values. This is so you can specify alternative fonts if your first choice isn't available. For example, you may want to use "Verdana," but you need to specify an alternative font for visitors to your site who don't have Verdana.

Always include a generic font at the end of your font list. While fonts such as Arial and Times New Roman are common on Windows, visitors using other operating systems won't have these fonts. By contrast, generic fonts such as sans-serif, serif and monospace are ones that every CSS-enabled browser should understand.

Locate font-family in the style inspector, then click the [image] toolbutton to the immediate right of the font-family row to display the font picker. Place a checkmark by "Arial" to add it to the list of selected fonts. Note the fonts at the top of the list - these are the generic fonts mentioned above. Sans-serif is the generic font that's closest to Arial, so place a checkmark next to it to add it to the list, then click the OK button. Your style sheet should now look like this:

BODY {
background-color: Navy;
color: White;
font-family: Arial, sans-serif;
}


Adding an H2 Selector

Step 5: Adding an H2 Selector

What we've done is simply create a rule for the BODY element. This defines the style of almost everything in the BODY section of your HTML document - in other words, this controls the colors and fonts used throughout the entire document. This is due to inheritance, one of the key concepts of CSS. Through inheritance, the style applied to one element will be transferred to that element's children. We'll talk more about inheritance later on.

The next element we want to define a rule for is H2. Use the Selector Wizard discussed previously to add an H2 selector (or simply type it into the editor), then click inside its declaration block. Go to the style inspector and locate the border-bottom shorthand property. Shorthand properties enable you to set several related properties all at once. The most common shorthand properties are font, margin and border.

The style inspector enables expanding shorthand properties to show the "sub-properties" from which they're composed. Expand the border-bottom property, then assign the value thin to the border-bottom-width "sub-property," solid to border-style, and aqua to color. Note how assigning values to each "sub-property" updates the composite value for the shorthand property.

Your style sheet should now look like this:

BODY {
background-color: Navy;
color: White;
font-family: Arial, sans-serif;
}

H2 {
border-bottom: thin solid aqua;
}


Adding a Class Selector

Step 6: Adding a Class Selector

So far we've only created element selectors, which apply to every instance of that element. For example, the H2 rule we created in the previous step will apply to every instance of H2 used in the associated HTML document. But suppose you want to specify a rule that applies only to specific instances of an element?

This is where class selectors come in. HTML4 introduced the class attribute, which enables you to identify specific classes of elements.

Open the Selector Wizard again, then click on the "Class" item at the top. Next, locate and single-click on H2 in the element list, then enter the word emphasis in the box labeled "Enter a class name." Click the "Add" button to add this class selector to the list of current selectors. Notice what happened? The selector became H2.emphasis when it was added to the list.

Click OK to insert this class selector into your style sheet, and use the style inspector to give it a font-style property with the value italic. This rule will apply to every H2 element whose class is defined as "emphasis." In other words, it will apply wherever you use <h2 class="emphasis"> in your HTML document.

But what if you have a specific style that you want to apply regardless of the element? This is also a case for class selectors. Instead of specifying an HTML element in the selector, you specify only a class name. Open the Selector Wizard once more, then simply enter keyword as the class name without selecting an HTML element, then click Add and OK. Notice that the class selector is inserted into your document with a period in front of it - this is what distinguishes it from an element selector. Now, give this keyword rule a font-weight property with the value bold.

Always give your classes meaningful names, but try to use class names that describe their purpose rather than their style. For example, imagine you have a class called .red which you use to color-code red any vital statements in your HTML document. Suppose later on you decide that blue would be a more appropriate color - see the problem? If instead you named the class .vital, you could change its style without having to rename it.

One way to use this new keyword class selector in your HTML documents is through the <span> tag, which was introduced in HTML4 as a generic way to apply styles without specifying an element. For example, text inside <span class="keyword>..</span> would be styled according to the keyword class.


Intermission

Step 7: Intermission

We're now done creating a simple style sheet. Just to make sure we're on track, your style sheet should look like this:

BODY {
background-color: navy;
color: white;
font-family: Arial, sans-serif;
}

H2 {
border-bottom: thin solid aqua;
}

H2.emphasis {
font-style: italic;
}

.keyword {
font-weight: bold;
}

If your style sheet doesn't match the above, correct it now before we continue in order to avoid confusion.


Using TopStyle's Internal Preview

Step 8: Using TopStyle's Internal Preview

Now that our simple style sheet is done, how can we tell what it looks like? A style sheet by itself can't be displayed by a browser, so instead we'll preview an HTML document that has the style sheet applied to it.

If the preview area of the output panel was showing while you created your style sheet, you're probably already familiar with how it works. If it's not showing, select View > Panels > Output Panel and switch to the Preview tab.

By default, TopStyle generates the preview from the current style sheet, so that every element and class in the style sheet is displayed (if you've skipped ahead and selected another preview document, re-select "Create from current style sheet" from the dropdown above the preview to return to the default). This should make the power of inheritance obvious. Notice that every element has the same background color - this is because every element is inheriting background-color from the BODY rule. In addition, notice how H2.emphasis has the same border-bottom as H2.

The default preview is best used while first developing your style sheets. More than likely, you'll want to see how the style sheet affects the display of an existing HTML document instead. This is done very simply in TopStyle by clicking the "Select Preview File" toolbutton above the preview. Click this toolbutton now, then select the file SAMPLE.HTML located in the main TopStyle directory. TopStyle will apply the current style sheet to this document and display it in the internal previewer. Note that TopStyle applies the current style sheet to a temporary copy of the chosen HTML document when previewing - your original HTML document is not modified in any way.


The Style Checker

Step 9: The Style Checker

One of the most important steps in creating style sheets with TopStyle involves using the Style Checker to locate errors and compatibility problems.

Before running the style checker, select Tools > Configure Style Checker. You'll be presented with a list of style definitions to validate against. Make sure that CSS Level 1, Netscape 4, Internet Explorer 3 and Internet Explorer 4 are selected in the list. Next, click the "Error Levels" item in the options list on the left. This is where you choose the types of messages you want the style checker to display. For now, make sure that only the "Show Errors" item is checked, then click OK to close the Options dialog.

Note: Style definitions are a key feature of TopStyle, and understanding them is very important. If you're not sure what they're all about, please click here for more information.

Click the style checker toolbutton (or hit F6) to run the style checker. The output panel will switch to the style checker results, showing a list of errors in our style sheet.


10. Interpreting the Style Checker Results

Step 10: Interpreting the Style Checker Results

Although the style sheet we just created generates no error messages based on the CSS Level 1 or Internet Explorer 4 style definitions, you'll notice that neither Internet Explorer 3 nor Netscape 4 support the border-bottom property we added in step five. In addition, Internet Explorer 3 doesn't support background-color.

This means that visitors to your site who use Internet Explorer 3 or Netscape 4 will see your pages differently than you intended, so you need to decide whether the errors are serious enough to warrant changing the style sheet. In this case, Internet Explorer 3 and Netscape 4 won't show the border beneath H2 elements. This is a relatively minor problem. However, Internet Explorer 3's lack of support for background-color is more serious - rather than using Navy, Internet Explorer 3 will use its default background color (normally light gray). In this case, you can correct the problem either by specifying the background color in the HTML document's <body> tag, or by using the shorthand background property instead of background-color, like this:

BODY {
background: navy;
color: white;
font-family: Arial, sans-serif;
}

We've only just scratched the surface of the style checker's features - for more details, please refer to the style checker section in TopStyle's help.


11. Using the External Preview

Step 11: Using the External Preview

In step eight we used TopStyle's internal previewer, which is great for quickly viewing your styles. However, as we discovered when using the style checker, each browser may render our styles differently. Because of this, it's important to test your styles using as many external browsers as possible.

The first time you ran TopStyle, it automatically detected which browsers you have installed and added them to your external browser list. You can modify this list at any time by clicking the external browser toolbutton and selecting "Configure Browsers."

To preview using an external browser, simply click the external browser toolbutton and select the desired browser. TopStyle will generate a temporary file based on the current style sheet and current preview document, which is then displayed in the external browser.

If you have Netscape Navigator 4.x on your system, select it in the external browser list now. Notice how the H2 elements don't have the aqua border below them? The style checker warned us about this in the previous step when it reported that Netscape 4 doesn't support the border-bottom property.

Note: Although TopStyle auto-detects external browsers the first time you run it, it can't detect different versions of the same browser. So if you have multiple versions of Netscape installed, only the last installed version will be detected.


12. Linking your Style Sheet

Step 12: Linking your Style Sheet

Now that you have a complete style sheet, you can apply it to your HTML documents. This is done through linking. Linking a style sheet involves using the <link> tag in the <head> section of any HTML document to which you wish to apply the style sheet. For example:

<head>
<link rel="stylesheet" type="text/css" href="tutorial.css">
</head>

While adding a <link> tag to one or two HTML documents is simple enough, what happens if you want to apply a style sheet to dozens - or hundreds - of HTML documents? This is where TopStyle's link wizard comes in handy.

To open the link wizard, choose Tools > Style Sheet Link Wizard, then simply select the HTML documents to which you wish to link the current style sheet. After you click OK, TopStyle will add the correct <LINK> tag to each HTML document. The link wizard also offers the ability to operate on all HTML documents in a TopStyle site. TopStyle sites are discussed in the next section of the tutorial.

By default the link wizard leaves existing style links intact, but you can change this by checking the "Remove existing style links" option. This will remove all style sheet links from the selected HTML documents so that only the current style sheet is linked to them.


13. Site Management with TopStyle

Step 13: Site Management with TopStyle

While using style sheets is a great way to make your site easier to maintain, most site management tools ignore style sheets, focusing instead on HTML-based navigation. TopStyle's site management features are designed to fill this hole, greatly simplifying the use of style sheets across an entire site.

Choose File > New Site to create a TopStyle site. Select the option to create a site from an existing directory structure, then choose the root directory of an existing local web site. Once the root directory has been set, click OK to create the site.

Note: When building a site, TopStyle will only include files that match the document extensions shown on the File Extensions page in TopStyle's Options (F8).

After the site has been built, you'll be presented with TopStyle's site summary view. Site summary shows details about your site from a style-based point of view, giving you information such as how many style sheets are used in your site, what HTML documents use them, which HTML documents contain broken style links, etc.


Where to Go from Here

That's it - you've completed the TopStyle tutorial! You've learned to use many of TopStyle's key features, and hopefully you've learned more about style sheets, too. If you'd like to experiment further with style sheets, try working with the samples located in TopStyle's \Samples folder. In particular, we recommend familiarizing yourself with the style checker to gain a better understanding of both the capabilities and limitations of current CSS implementations.

Use the search function in this help window when you need more information about a specific TopStyle feature.

If you'd like to learn more about style sheets, check out our list of external CSS resources.

Visit us online at www.bradsoft.com


CSS Properties

Syntax Used in Property Definitions

Font Properties

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font

Color and Background Properties

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background

Text Properties

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

Box Properties

  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear

Classification Properties

  • Display
  • Whitespace
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style

Units

  • Length Units
  • Percentage Units
  • Color Units
  • URLs

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


CSS Structure and Rules

[ Basic Syntax | Pseudo-classes and Pseudo-elements | Cascading Order ]

Basic Syntax

Rules

Selectors

Any HTML element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css  { color: #4b0082 }

The above example has created two classes, css and html for use with HTML's CODE element. The CLASS attribute is used in HTML to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#svp94O { text-indent: 3em }

This would be referenced in HTML by the ID attribute:

<P ID=svp94O>Text indented 3em</P>
Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.

There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

Comments

Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

A:link    { color: red }
A:visited { color: green; font-size: 85% }
A:active  { color: blue; font-size: 125% }

First Line Pseudo-element

Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any [image] block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any [image] block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.

  1. ! important

    Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance. A sample use of the ! important statement:

    BODY { background: url(bar.gif) white;
       background-repeat: repeat-x ! important }
  2. Origin of Rules (Author's vs. Reader's)

    As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets.

    Authors should be wary of using ! important rules since they will override any of the user's ! important rules. A user may, for example, require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be ! important, since some styles are vital for the user to be able to read a page. Any ! important rules will override normal rules, so authors are advised to use normal rules almost exclusively to ensure that users with special style needs are able to read the page.

  3. Selector Rules: Calculating Specificity

    Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

    1. Count the number of ID attributes in the selector.
    2. Count the number of CLASS attributes in the selector.
    3. Count the number of HTML tag names in the selector.

    Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

    #id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
  4. Order of Specification

    To make it easy, when two rules have the same weight, the last rule specified wins.

[ Basic Syntax | Pseudo-classes and Pseudo-elements | Cascading Order ]

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


CSS Units

[ Length Units | Percentage Units | Color Units | URLs ]

Length Units

A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier.

Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:

  • em (ems, the height of the element's font)
  • ex (x-height, the height of the letter "x")
  • px (pixels, relative to the canvas resolution)

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

  • in (inches; 1in=2.54cm)
  • cm (centimeters; 1cm=10mm)
  • mm (millimeters)
  • pt (points; 1pt=1/72in)
  • pc (picas; 1pc=12pt)

Percentage Units

A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value.

Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

Color Units

A color value is a keyword or a numerical RGB specification.

The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

RGB colors are given in one of four ways:

  • #rrggbb (e.g., #00cc00)
  • #rgb (e.g., #0c0)
  • rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0))
  • rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))

The examples above all specify the same color.

URLs

A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL.

Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.

Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.

Examples:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

[ Length Units | Percentage Units | Color Units | URLs ]

Web Design Group ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


TopStyle Pro 3.10 Release Notes

TopStyle Pro 3.10

What's New and Improved in Version 3.10

  • ADDED: Syntax highlighting of ECMAScript (JavaScript), ASP (both VBScript and JScript), PHP and ColdFusion CFScript within HTML documents. By default only ECMAScript color coding is enabled, but other languages may be enabled on the new "Keyword Tables" page in Options.
    Note: If you're feeling adventurous, the keywords for each language are stored in separate files in TopStyle's \Keywords subfolder, so you can easily customize the list of keywords.
  • ADDED: "Find in Files" (under the Edit menu), with these features:
    1. Search in a folder or a TopStyle site
    2. Filter by created/modified date
    3. Filter by file extension
    4. Only report where match occurs one time, more than one time, one or more times, or not at all
    5. Simple wildcard support in addition to regular expressions
    6. Save "search rules" for future use
    This goes a step further than similar features in other editors by enabling you to specify a date filter, and it also enables you to display only the names of files that don't contain the search string (useful for finding out which files in your site don't have a !DOCTYPE, etc.)
  • ADDED: Integration with W3C HTML Validation service. Click the new toolbutton to pass the current HTML document to the W3C HTML Validator, and the new "Reports" tab (on the Output panel) will display the results. Line number information will be highlighted in yellow - simply click to be taken to that line in TopStyle's editor.
  • ADDED: W3C CSS Validator integration now also works as described above for the W3C HTML Validator.
  • ADDED: Integration with Watchfire's Bobby accessibility checker. By default this uses the free online Bobby checker, but if you own the Java desktop version you can configure TopStyle to use it instead (on the new "Validation" page in options). The results will be displayed as described above for the W3C HTML Validator, with the notable exception that hyperlinked line numbers are only supported if you own the desktop version of Bobby.
  • ADDED: CSE HTML Validator integration now enables showing only specific messages, including an "Accessibility Check." Note that this requires CSE HTML Validator v5.5 and above.
  • ADDED: The Find and Replace dialogs now include the option to search only in the current selection. If a multi-line selection exists when the dialog appears, then the default search location will be the selected text. If no selection exists, this option is disabled.
  • ADDED: "Find matching tag or delimiter" (Ctrl+M) added to Edit menu. When the caret is in an HTML tag, this will highlight the matching tag (ex: when in <table> this will locate </table>). When the caret is beside a brace (either "{" or "}"), this will locate the matching brace (useful for checking brace nesting in JavaScript). This also works for ASP/PHP delimiters and parens.
  • ADDED: "Selection" item to editor's context menu, which includes the following when a selection exists in the editor:
    1. Lowercase selection
    2. Uppercase selection
    3. Capitalize selection
    4. Add line breaks
    5. Convert to list items
    6. Strip HTML tags from selection
    7. Script outermost HTML tags from selection
    Note that you may need to select Options > Reset Editor Menu and restart TopStyle in order to see this new item if you previously customized the editor menu.
  • ADDED: 'accessibility-check' added to Tidy options
  • ADDED: "Make TopStyle Dreamweaver's HTML Editor" added to Third Party page in Options.
  • ADDED: Sub-folders are now listed in the file panel. If you'd prefer not to see sub-folders, uncheck the new "Show Sub-Folders" item in the "options" toolbutton above the file panel.
  • ADDED: "Navigate to Root Folder of Current Site" added to "options" toolbutton above file panel.
  • ADDED: Multiple files may now be selected in the file panel.
  • CHANGED: The "File Settings" page in Options has been renamed "File Extensions."
  • ADDED: The "File Extensions" page in Options now includes a list of extensions for files that shouldn't be browsed in TopStyle's preview. This can be used to prevent Internet Explorer's "download" dialog from appearing when attempting to preview files such as JavaScript (JS) files.
  • ADDED: The "File Extensions" page in Options now includes a list of extensions for binary files, which are files that should always be skipped by the "Find in Files" and "Link Wizard" features. (Note: this feature already existed for the link wizard in previous versions, but the list of binary file extensions wasn't exposed).
  • ADDED: "Use actual file instead of temp file when previewing HTML" added to Preview page in Options. Note that when this enabled, the preview will only update when the file is saved instead of with each change.
  • ADDED: When a selection exists in the editor, the editor's context menu now includes "Add Selection to Clip Library." Selecting this will create a new clip library item beneath the current clip library folder.
  • ADDED: "Default" items in drop-down menus such as the one for HTML Tidy are shown in bold.
  • ADDED: Holding the mouse over a clip library item now shows a hint containing that item's contents.
  • ADDED: Clip library items that contain both "before" and "after" text are shown using a double paperclip icon (high-color toolbuttons only).
  • ADDED: Context menu added to site report view.
  • ADDED: Thumbnail viewer tooltip now includes image file size (KB).
  • ADDED: "Insert @import rule" added to Tools menu.
  • ADDED:"Open from Web" now processes @import statements within downloaded style sheets.
  • ADDED: Scrollbars now appear in full screen preview when browser is sized larger than the screen.
  • ADDED: "User Interface" page in Options now includes a setting to enlarge the inspector font size.
  • ADDED: Color coding of MIVA tags.
  • CHANGED: TopStyle's icon has been replaced with one that matches the new logo.
  • CHANGED: The "Search" menu has been removed, and its items have been placed under the "Edit" menu.
  • CHANGED: Style sweeper now better supports escaped braces (Tantek hack).
  • CHANGED: Previously, the "Messages" tab could display an unlimited number of items. However, this could be a serious memory drain when thousands of messages were displayed (we had one report of HTML Tidy outputting over 15,000 warnings). So, a maximum of 5,000 messages will now be displayed. Once the maximum number of messages has been displayed, only summary information will be shown. This applies to HTML Tidy, CSE HTML Validator and the new "Find in Files" feature.
  • CHANGED: In version 3.0, Ctrl+Shift+A inserted an anchor tag and placed the caret after the href attribute. This has been changed so that caret is placed immediately before the closing </a>.
  • CHANGED: The "Synchronize the preview with editor position" setting has been moved from the HTML page to the Preview page in Options.
  • CHANGED: TopStyle Blog links open within TopStyle instead of spawning a new browser window.
  • CHANGED: !DOCTYPE is now color coded separately from other tags.
  • CHANGED: Hidden characters are now drawn using your system's "gray text" setting when "Show hidden characters" is enabled.
  • REMOVED: The "Run style checker after downloading" checkbox has been removed from the "Open from Web" dialog.
  • FIXED: HTML Tidy topic in TopStyle's help incorrectly states that HTML Tidy isn't included with TopStyle.
  • FIXED: Keyboard shortcuts in help incorrectly states that Ctrl+Q inserts a comment. The correct shortcut is Shift+Ctrl+M.
  • FIXED: Triple-click tag selection fails with tags containing < or > in quotes.
  • FIXED: Clicking an SSI virtual hyperlink fails to locate the correct include file if the URL doesn't start with a "/" character.
  • FIXED: Choosing "Comment Out" from the selector panel may inserts the closing comment at the wrong position if the style rule already contains a comment.
  • FIXED: Some color coding settings - such as script punctuation (brackets) - cannot be changed.
  • FIXED: "Open linked style sheets in TopStyle" fails in Windows Explorer.
  • FIXED: Clip Library doesn't retain expanded folders.
  • FIXED: Blank message after assigning a keyboard shortcut to an action whose shortcut was already changed.
  • FIXED: Selecting lines at the margin should be more accurate now.
  • FIXED: TopStyle sites don't correctly translate local file references that include "localhost" in them.
  • FIXED: Undefined classes report fails to ignore classes inside script blocks, even when site has "Skip scripts" option selected.
  • FIXED: Luminosity slider in color picker can't be dragged all the way to the top or the bottom.
  • FIXED: Style checker reports that "transparent" is an invalid value for color.
  • FIXED: HTML color values inserted as hex triplets when "Use RGB triplets" setting enabled for style sheets.
  • FIXED: Assigning Tab key as a shortcut for indent/unindent overrides tab behavior on search/replace dialog.
  • FIXED: "Keyboard Shortcuts" listed twice in keyboard shortcuts dialog.
  • FIXED: TopStyle starts text selection after clicking in editor to regain focus if current document has been changed.
  • FIXED: CSS rule collapsing may affect JavaScript blocks.
  • FIXED: Inspector preview displays error dialogs (caused by behaviors referencing domains outside the current one, etc.)
  • FIXED: The class hyperlinking doesn't reflect classes contained in style sheets that are linked using @import within another style sheet.
  • FIXED: No reload prompt after using the style sheet link wizard while in split editor view and switching to the HTML document to which you just added the link.
  • FIXED: "Edit color value" in editor context menu not enabled for "transparent."
  • FIXED: "List index out of bounds" error after switching style definition and dropping down a property in the inspector that was dropped down right before changing the definition.
  • FIXED: Custom items added to the View Bar that point to EXE files fail to show the EXE's icon.
  • FIXED: The html element is missing the xml:lang attribute in the XHTML 1.0 and 1.1 definitions.
  • FIXED: Duplicate height/width attributes inserted when using insight to select an image in an existing IMG tag.
  • FIXED: Image dimensions are incorrect when using large fonts.
  • FIXED: Double-clicking a folder icon in the file panel opens the wrong folder.
  • FIXED: Equal sign in script, image, table and anchor tags not correctly color coded.
  • FIXED: Inspector shows CSS Definition selection after creating new HTML document.
  • FIXED: IDs may not be correctly reflected in the default CSS preview.

Known Issues

  • At the time of this release, the W3C CSS Validator strips blank lines that appear at the top of a style sheet, so it will report incorrect line numbers for style sheets that have whitespace before the first rule. For example, if your style sheet has three blank lines at the top, then the W3C CSS Validator will report line numbers that are off by three. We have reported this issue to the W3C, so this may be resolved after this version of TopStyle is released.
  • TopStyle doesn't support editing Unicode/DBCS files (including UTF-8).
  • TopStyle's thumbnail viewer doesn't support PNG images.
  • The style checker doesn't examine HTML style attributes in this release.
  • When calculating specificity, TopStyle doesn't take !important rules into account.
  • Color coding of ASP, PHP, etc., within HTML strings is not supported.
  • The spell checker only checks the spelling of words inside content, so it doesn't check the spelling inside alt attributes, etc.
  • The site reports don't support the use of multiple class names in an HTML element (ex: <div class="one two">). Note that this technique is rarely used since it's not supported by many browsers (including Netscape 4). TopStyle's editor also doesn't color-code multiple classes in HTML elements.
  • Alternate style sheets are incorrectly listed as "unused" in the site summary.
  • The "Edit HTML Class" and class hyperlink features don't support style sheets which are imported (via @import) by a style sheet linked to the current HTML document.


CSS Tips & Tricks

General

  • Let the browser choose the font size
  • Test on different browsers
  • Use linked style sheets instead of inline styles
  • Make sure your pages display on browsers that don't support CSS
  • Validate both your CSS and your HTML

Working Around Netscape 4.x Bugs

Netscape 4.x has a number of CSS-related bugs that can make using style sheets a frustrating experience. These tips will help you work around some of the most common problems. In addition to the tips listed here, be sure to visit the CSS Pointers Group's CSS Bugs and Workarounds page for a much more thorough listing of CSS-related browser bugs.

  • Add TD to the BODY selector
  • Never use relative paths
  • Use @import to hide styles from Netscape 4
  • Avoid using line-height with blocks containing images
  • Make sure all linked style sheets exist!

Advanced Techniques

  • Using JavaScript to serve browser-specific style sheets
  • Using JavaScript to serve platform-specific style sheets


TopStyle Tips & Tricks

Keyboard Shortcuts

  • Press Ctrl and click on a CSS property for help
  • Press F11 for external browsers
  • Press F4 to hide all dockable panels

Editing

  • Right-click to edit a CSS color value
  • Assign a class using HTML tag insight or the tag inspector

User Interface

  • Customize the View Bar Resources
  • Create custom layouts

Related topics: CSS Tips & Tricks, Appendix A: Default Keyboard Shortcut List


TopStyle Pro Ordering Information

TopStyle Pro may be ordered through our online store seven days a week, 24 hours a day.

Click here to order your copy!


Help Unavailable

No help is available for this CSS property. You might want to try looking for it in one of these external sites:

  • W3C CSS1 Recommendation
  • W3C CSS2 Specification
  • Internet Explorer CSS Reference
  • Netscape CSS Reference
  • RichInStyle.com


TopStyle Help - Credits

TopStyleTM is Copyright © 2003 by Bradbury Software, LLC, (a.k.a. "Bradsoft.com") and is protected by U.S. and international copyright laws.

Design and development: Nick Bradbury
Documentation: Nick Bradbury and Robert Crooks
Graphics: Gus Reiber and GlyFX
Background gurgles: Isaac and Hannah Bradbury

TopStyle's CSS Reference was created by the Web Design Group and is used with their permission. TopStyle was written using Borland Delphi and uses several third-party controls from Developer Express.

W3C is a trademark of the World Wide Web Consortium.

Special thanks to Clifford Anderson, Steve Bowen, Christopher Bradford, John Carpenter, Erki Esken, Aaron Gravvat, Brad Halstead, Zack Jones, David Laws, Tim Morris, Noelle Neuwirth, Christopher Owens, Al Rider, Mark Woodward and everyone else who helped test TopStyle 3.0. I'm grateful for all your feedback!


TopStyle Help - Index

TopStyle Help
TopStyle Tutorial
Credits

Third-Party Integration with TopStyle

CSS Basics
CSS Property Reference
CSS Tips & Tricks
External CSS Resources


TopStyle Help - Resources

Style Sheet Resources

  • W3C CSS1 Recommendation
  • W3C CSS2 Specification
  • W3C CSS Validator

  • Dave Raggett's Introduction to CSS
  • Effective Use of Style Sheets

  • Web Review's CSS Master Compatibility Chart
  • WebMonkey Stylesheets Guide

  • glish.com
  • Web Design Group
  • RichInStyle.com


Advanced Tip: Using JavaScript to serve browser-specific style sheets

One way to get around all the browser compatibility issues is to use a different style sheet for each browser. You can do this by adding a JavaScript block such as the one below to the <head> section of your HTML document(s):

   <script language="JavaScript">
   <!--
    if(-1 != navigator.userAgent.indexOf("MSIE"))
    {
    // Internet Explorer
    document.write('<link rel="stylesheet" type="text/css" href="ie.css">');
    }
    else if (-1 != navigator.userAgent.indexOf("Mozilla"))
    {
    // Netscape
    document.write('<link rel="stylesheet" type="text/css" href="netscape.css">');
    }
    else
    {
    // other
    document.write('<link rel="stylesheet" type="text/css" href="other.css">');
    }
   //-->
   </script>

Note: The above example, while perfectly usable, is of course a minimalist approach to browser detection. A more thorough example of using JavaScript to detect both the browser and the platform may be found [image] here.


Advanced Tip: Using JavaScript to serve platform-specific style sheets

There may be situations in which you want to use a different style sheet depending on whether the visitor is using a Macintosh or a Windows system. A simple way to accomplish this is to add a JavaScript block similar to the one shown below to the <head> section of your HTML document(s):

   <script language="JavaScript">
   <!--
   // style sheet for Macintosh
   if (navigator.platform.indexOf('Mac') != -1) {
      document.write('<link rel="stylesheet" type="text/css" href="mac.css">');
   // style sheet for Windows
   } else{
     document.write('<link rel="stylesheet" type="text/css" href="windows.css">');
   }
   //-->
   </script>

Note: The above example, while perfectly usable, is of course a minimalist approach to platform detection. A more thorough example of using JavaScript to detect both the browser and the platform may be found [image] here.


CSS Tip: Use linked style sheets instead of inline styles

Although it's simple enough to apply styles using a <style>..</style> block in the head of each HTML document, doing so negates the maintenance benefits of using style sheets. Instead, create a style sheet that can be applied to several documents in your site (or, better yet, your entire site), and use the <link> tag to link it to each HTML document.

Once you do this, you can simply modify a single style sheet to change the appearance of your entire site.


CSS Tip: Let the browser choose the font size

Style sheets make it tempting to specify font sizes, but before you set a font size you should be aware that doing so has its drawbacks. Most notably, different browsers interpret font sizes differently, so a font that appears readable in Internet Explorer may be smaller when viewed in Netscape Navigator. In addition, font sizes on Windows aren't always the same as they are on other platforms, so while your site may look good to Windows users, it may be illegible to those with a Mac.

Of course, this is a tough tip to follow, and we have to admit that we don't always adhere to it ourselves. However, if you must specify a font size, make sure it's a relative font size instead of an absolute one. Using an absolute length unit such as pt instead of a relative one such as px makes it impossible for many users to resize the text on your site, which may make your site inaccessible to them.

Note: Some CSS references recommend using em units, but we advise caution here. Internet Explorer 3 doesn't support em, and any em units it finds will be treated as px. So, while font-size: 1.2em may look fine on Internet Explorer 4, it will rendered as 1.2 pixels on Internet Explorer 3 - in other words, it will be illegible!


CSS Tip: Make sure your pages work in browsers that don't support CSS

An important step in testing a CSS-enabled site that many authors skip is making sure that it displays well in browsers that don't support CSS. It doesn't have to look as good, but it does have to be legible.

Although it's tempting to convince yourself that everyone who visits your site has a modern browser that supports CSS, keep in mind that Netscape 4 won't display style sheets if JavaScript is turned off. Since some users turn JavaScript off, even visitors with a modern browser may not be able to view your styles. A nice benefit of this, of course, is that you can turn off JavaScript in Netscape 4 to get a quick look at how your site appears without style sheets.


Netscape Tip: Add TD to the BODY selector

Through inheritance, styles set on an HTML element will also be applied to any children of that HTML element. For example, if you define a style for the BODY element like this:

BODY {
color: red;
}

Then every HTML element within the BODY should be displayed with a red foreground color. Unfortunately, Netscape 4 doesn't honor inheritance in tables, so tables in any HTML documents which use the above style won't use red text. A workaround for this is to add TD to the BODY selector so that table cells use the BODY style, like this:

BODY, TD {
color: red;
}

You may also want to add TH to the BODY selector if you want table headings to use the BODY style.

Note: Netscape 4 has a number of other inheritance problems which result in the BODY style not being applied to child elements. If you run into a situation with Netscape 4 in which the BODY style isn't being inherited, try adding child elements to the BODY selector. We've run into cases where the only way to solve Netscape inheritance problems was to create a selector like this one:

BODY,TD,TH,P,DIV,FORM,H1,H2,H3,H4,BLOCKQUOTE,UL,OL


Netscape Tip: Make sure all linked style sheets exist!

If an HTML document includes a <link> to an external style sheet which doesn't exist, the browser should ignore the missing style sheet. Unfortunately, Netscape 4 will fail to render the HTML document, instead displaying an error stating that "The page cannot be found."

So, make sure that all of your external style sheet links are valid, or else visitors who use Netscape 4 may not be able to see your site!


Netscape Tip: Use @import to hide styles from Netscape 4

The @import rule is similar to the <link> element in HTML in that it's used to link to an external style sheet. However, any style sheets linked using @import will be ignored by Netscape 4 since @import isn't supported by Netscape 4.

You can use this fact to your advantage. If you have a style sheet that Netscape 4 chokes on, try moving the problem style rules to a separate style sheet, then link it to the original style sheet using @import. For example:

    @import url(skipnetscape4.css);
BODY {
    color: red;
    }

This method will also skip Internet Explorer 3 since it doesn't support @import, either. This is a nice bonus since IE3's CSS support is even poorer than Netscape 4's (although far fewer people use IE3 than Netscape 4).

Important: In order to be valid, the @import rule must come before any other rules in your style sheet. Failing to do this will cause many browsers to ignore the imported style sheet.


Netscape Tip: Avoid using line-height with blocks containing images

The line-height property is great for controlling the spacing between lines, but a nasty bug in Netscape 4 makes it a very poor choice within blocks containing images. For example, if you have a P or DIV block that contains an image, using a line-height may either cause the image to get chopped off or make it float over text.


Netscape Tip: Never Use Relative Paths

If you use relative paths in your style sheet, Netscape 4 will incorrectly interpret the paths as being relative to the HTML document to which the style sheet is linked instead of being relative to the style sheet itself. This is fine if your style sheet is in the same directory as the HTML document, but if you link your style sheet to any HTML documents in a different directory, then none of the relative paths will be correct.

One way to work around this problem is to use absolute paths or root paths. For example, suppose you have a style sheet located at http://localhost/rootfolder/styles/main.css and you wish to add a background-image property that displays the image located at http://localhost/rootfolder/img/button.gif. You might think you should code this as:

.button {
background-image: url("../img/button.gif");
}

While technically correct, the Netscape bug will prevent the image from being located in the above example. Instead, use a root path like this:

.button {
background-image: url("/rootfolder/img/button.gif");
}


CSS Tip: Test on different browsers

TopStyle's Style Checker can be enormously helpful in tracking down obscure browser-specific CSS problems, but it can't substitute for testing on different browsers. After you fix any problems the style checker reports, you should make sure to test your pages on Internet Explorer, Netscape Navigator, Opera, and whatever other browser(s) you expect your visitors to use.


CSS Tip: Validate both your CSS and your HTML

TopStyle's style checker and the W3C's CSS Validator go a long way to help you find problems in your style sheets, but this won't do much good if you have invalid HTML. It's possible to have perfectly valid style sheets that don't work as intended due to errors in your HTML.

Luckily, TopStyle Pro can help through its integration with HTML Tidy and CSE HTML Validator. You can also validate your HTML by using the W3C's [image] HTML validation service.


Style Sweeper Configuration

Rule Format
Determines whether rules should fill multiple lines or formatted onto a single line. You may also specify to only collapse rules that would be less than a certain length after collapsing. This option is useful for leaving larger rules expanded while smaller rules are collapsed.

Color Format
All colors values will be reformatted to the chosen color format. Keep in mind that some style definitions don't support all color formats, whereas hex color values are supported by all CSS-enabled browsers - so the safest choice is to specify hex colors here.

Remove Extra Spaces
When this option is chosen, the style sweeper will remove extra whitespace from your style sheet, resulting in a smaller - but less readable - file.

Remove Optional Semi-Colons
Normally a semi-colon is used at the end of every declaration, after the value. However, the last value in every rule doesn't require a semi-colon. When this option is chosen, the optional semi-colon will be removed from every rule.

Selector Order
If you choose to order selectors logically, then selectors will be ordered first based on group (elements, classes, IDs, at-rules), and then by name within each group.

Selector Case
Change the case used for selectors.

Property Order
Property order defines how properties are sorted in each rule. Note that if you choose to sort properties based on their group within a specific style definition, then properties that aren't support by that definition will be sorted to the bottom.

Property Case
Determines whether properties should be upper- or lower-case.

Shorthand properties
Properties such as font, margin, background and padding are shorthand properties which are used to group related values under a single property. If this option is chosen, the style sweeper will attempt to create shorthand properties where appropraite. For example, if all four margin values (top, right, bottom and left) are defined, then TopStyle will combine them into a single margin property.

Important: Most shorthand properties follows a specific set of rules. For example, the values used for the margin and padding properties are interpreted as follows:

1. if only one value specified, then it applies to all four sides
2. if two values, then the first is for top and bottom, the second for right and left
3. if three values, the first is top, the second is right and left, the third is bottom
4. if four values, their order is top, right, bottom, left

The Style Sweeper will only create shorthand properties if the required properties already exist. For example, it won't create a font shorthand property for a rule if the rule doesn't already contain font-size and font-family values, since these values are required by the font property.

If you're unsure of how shorthand properties work, we strongly recommend that you familiarize yourself with the [image] CSS1 Recommendation before using this feature of the style sweeper.

Related topics: Style Sweeper, Font, Background, Margin, Padding, Color Units


Site Links View

TopStyle's Site Links View is a great way to find out what pages in your site are - and are not - linked to style sheets. Link view is broken into three lists:

  • Style Sheets - shows all style sheets in your site.
  • HTML documents - shows HTML, CFML, ASP and other browsable web documents in your site. The files which appear in this list depend on the current filter, which enables you to see either all HTML documents linked to the selected style sheet, or all HTML documents NOT linked to the selected style sheet.
  • Linked style sheets - shows all style sheets linked to the document currently selected in the web document list.

Site Links view also provides an easy way to remove a style sheet link. Simply right-click on a style sheet in the linked style sheets list, then select "Remove Link" from the context menu. When filtered to show documents NOT linked to the selected style sheet, the selected style sheet may be linked to the selected document by right-clicking on the style sheet and choosing "Link to" from the context menu.

Related topics: Site Summary, Opening a Site, Creating a New Site


Adding Styles to Tags in HomeSite

Most HomeSite tag dialogs include a style editor toolbutton (shown at left). Clicking this button will display TopStyle Lite's inline style editor, where you can easily edit the contents of the tag's style attribute

Clicking the "Done" button in TopStyle will close the editor and insert the current style declaration into HomeSite. Clicking the "Cancel" button will close the editor without modifying the style in HomeSite.

To see this in action, open an HTML document in HomeSite, right-click on a <body> tag, then select "Edit Tag" from the context menu. On the resulting tag dialog, simply click the style editor button to display the TopStyle Editor.


Editing Embedded Styles in HomeSite

If you embed styles in your HTML documents, you can use TopStyle to edit your <style>..</style> blocks. Simply right click in a style block and select "Edit Style Block" to open it in TopStyle.

When editing style blocks, TopStyle Lite will display the editor window, style inspector, selector list and preview window. When you're finished editing the style block, click the "Done" button to insert it into HomeSite's active document.


Editing Style Sheets in HomeSite

Once HomeSite integration is enabled, you can use TopStyle to edit style sheets from within HomeSite. Simply right-click on a CSS file in HomeSite's file list and select "Edit Style Sheet," and the style sheet will be opened for editing in TopStyle. In addition, right-clicking on a <link> tag in HomeSite and selecting "Edit Linked Style Sheet" will open the style sheet in TopStyle. If TopStyle Pro is installed, it will be used whenever editing CSS files from within HomeSite. Otherwise, TopStyle Lite will be used.

Note: Due to a bug in HomeSite 4.01, you cannot edit linked style sheets that use relative paths. Attempting to do so will cause HomeSite to display a "file not found" message. This problem does not exist in later versions of HomeSite.


Tip: Assign a Class Using HTML Tag Insight or the Tag Inspector

While editing an HTML tag, you'll often want to assign a class that's defined in an external style sheet. TopStyle makes this very simple.

The "class" attribute row in the tag inspector contains a list of all classes that may be applied to the current HTML tag - just select a class from this list to assign it.

You can also use HTML insight to do the same thing. While editing the class attribute, insight displays a list of applicable classes.

Related topics: HTML Insight, Tag Inspector


Tip: Right Click to Edit a CSS Color Value

While editing CSS, you can quickly change a color value just by right-clicking on it. The editor's context menu will show an "Edit Color Value" item which enables using TopStyle's color picker to change the color, and it will also show a luminosity item which enables changing the brightness of the color.

Related topics: Working with Colors Index, Inserting Colors with the Color Picker


Tip: Press Ctrl and Click on a CSS Property for Help

To get help on a specific CSS property, hold down the Ctrl key and move to mouse over the property. The property will turn into a hyperlink which will display help when clicked.


Tip: Hold F11 for a List of External Browsers

Pressing F11 shows a menu of your external browsers, providing a quick way to view your pages in different browsers. After this menu appears, simply press the number assigned to the desired external browser and TopStyle will open the current document in that browser.

Related topics: Configuring External Browsers


Tip: Press F4 to Hide All Dockable Panels

While editing you may wish to hide all dockable panels (output, inspector, etc.), but you don't want to switch to a different layout in order to do so. Instead, just hit F4, and all dockable panels will be hidden. Then just hit F4 again when you're ready to re-display the panels that were hidden.

Related topics: Docking Panels, Working with Layouts


Tip: Create Custom Layouts

TopStyle's layouts enable you to save and restore multiple display configurations. If you've got TopStyle configured just the way you like it, with your favorite docking panels and toolbars in just the right places, why not save the layout so you can use it again later?

This is especially handy if you prefer different layouts depending on what you're working on. You may want certain panels showing only when editing HTML, while others only when editing CSS. Just save different layouts and restore them with a click of the mouse.

Related topics: Working with Layouts, Customizing Toolbars, Docking Panels


Tip: Customize the ViewBar Resources

The resources section of TopStyle's View Bar contains a number of helpful links to external sites. But you don't have to stick with the default links - you can add your own.

Just right click in the ViewBar to add your own items, which can be web site addresses or even local files. You can also add additional custom groups.

Related topics: Using the View Bar, Customizing the View Bar


The Web Design Group Copyright Page

The Web Design Group presents:

WDG's Copyright and Trademark Page

Give me the Non-Technical Version

Except as otherwise indicated any person is hereby authorized to view, copy, print, and distribute this document subject to the following conditions:

  1. The document may be used for informational, non-commercial purposes ONLY.
  2. Any copy of the document or portion thereof must include this copyright notice.
  3. The Web Design Group (hereafter also known as WDG) reserves the right to revoke such authorization at any time, and any such use shall be discontinued immediately upon written notice from the Web Design Group or any of its members.

TRADEMARKS

WDG and all WDG logos and graphics contained within this site are trademarks of the Web Design Group or its members. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

Guide for Third Parties Who Use WDG Trademarks

WDG authorizes you or any other reader of this document to include the Web Design Group's logo on any World Wide Web site, so long as the image is also a link to the WDG's main page located at [image] http://www.htmlhelp.com/.

No non-members of the WDG are authorized to display the WDG Member logo. The current list of members can be found at [image] http://www.htmlhelp.com/about/

Warranties and Disclaimers

THIS PUBLICATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT. WDG ASSUMES NO RESPONSIBILITY FOR ERRORS OR OMISSIONS IN THIS PUBLICATION OR OTHER DOCUMENTS WHICH ARE REFERENCED BY OR LINKED TO THIS PUBLICATION.

REFERENCES TO CORPORATIONS OR INDIVIDUALS, THEIR SERVICES AND PRODUCTS, ARE PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED. IN NO EVENT SHALL WDG BE LIABLE FOR ANY SPECIAL, INCIDENTAL, INDIRECT OR CONSEQUENTIAL DAMAGES OF ANY KIND, OR ANY DAMAGES WHATSOEVER, INCLUDING, WITHOUT LIMITATION, THOSE RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER OR NOT ADVISED OF THE POSSIBILITY OF DAMAGE, AND ON ANY THEORY OF LIABILITY, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS INFORMATION.

THIS PUBLICATION COULD INCLUDE TECHNICAL OR OTHER INACCURACIES OR TYPOGRAPHICAL ERRORS. CHANGES ARE PERIODICALLY ADDED TO THE INFORMATION HEREIN; THESE CHANGES WILL BE INCORPORATED IN NEW EDITIONS OF THE PUBLICATION. WEB DESIGN GROUP MAY MAKE IMPROVEMENTS AND/OR CHANGES AT ANY TIME.

Should you or any viewer of this publication respond with information, feedback, data, questions, comments, suggestions or the like regarding the content of any WDG publication, any such response shall be deemed not to be confidential and WDG shall be free to reproduce, use, disclose and distribute the response to others without limitation. You agree that WDG shall be free to use any ideas, concepts or techniques contained in your response for any purpose whatsoever.

Restricted Rights Legend

Use, duplication, or disclosure by the United States Government is subject to the restrictions set forth in DFARS 252.227-7013 (c)(1)(ii) and FAR 52.227-19.

Home, [image] Questions, [image] Members, [image] WDG Award, [image] Reference, [image] Links, [image] Design

Copyright © 1996. Web Design Group All rights reserved.


Syntax Used in CSS Property Definitions

<Foo>
Value of type Foo. Common types are discussed on the Units page.
Foo
A keyword that must appear literally (though without case sensitivity). Commas and slashes must also appear literally.
A B C
A must occur, then B, then C, in that order.
A | B
A or B must occur.
A || B
A or B or both must occur, in any order.
[ Foo ]
Brackets are used to group items together.
Foo*
Foo is repeated zero or more times.
Foo+
Foo is repeated one or more times.
Foo?
Foo is optional.
Foo{A,B}
Foo must occur at least A times and at most B times.

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Border

Syntax: | border: <value>
Possible Values: | <border-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border property is a shorthand for setting the width, style, and color of an element's border.

Examples of border declarations include:

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Bottom Border

Syntax: | border-bottom: <value>
Possible Values: | <border-bottom-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-bottom property is a shorthand for setting the width, style, and color of an element's bottom border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Bottom Border Width

Syntax: | border-bottom-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-bottom-width property is used to specify the width of an element's bottom border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-bottom, border-width, or border shorthand properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Border Color

Syntax: | border-color: <value>
Possible Values: | <color>{1,4}
Initial Value: | The value of the color property
Applies to: | All elements
Inherited: | No

The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Left Border

Syntax: | border-left: <value>
Possible Values: | <border-left-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-left property is a shorthand for setting the width, style, and color of an element's left border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Left Border Width

Syntax: | border-left-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-left-width property is used to specify the width of an element's left border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-left, border-width, or border shorthand properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Right Border

Syntax: | border-right: <value>
Possible Values: | <border-right-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-right property is a shorthand for setting the width, style, and color of an element's right border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Right Border Width

Syntax: | border-right-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-right-width property is used to specify the width of an element's right border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-right, border-width, or border shorthand properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Border Style

Syntax: | border-style: <value>
Possible Values: | [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Initial Value: | none
Applies to: | All elements
Inherited: | No

The border-style property sets the style of an element's border. This property must be specified for the border to be visible.

Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Top Border

Syntax: | border-top: <value>
Possible Values: | <border-top-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-top property is a shorthand for setting the width, style, and color of an element's top border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Top Border Width

Syntax: | border-top-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-top-width property is used to specify the width of an element's top border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-top, border-width, or border shorthand properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Border Width

Syntax: | border-width: <value>
Possible Values: | [ thin | medium | thick | <length> ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted.

If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

This property is a shorthand for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Clear

Syntax: | clear: <value>
Possible Values: | none | left | right | both
Initial Value: | none
Applies to: | All elements
Inherited: | No

The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. This property is similar in function to [image] HTML 3.2's <BR CLEAR=left|right|all|none>, but it can be applied to all elements.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Float

Syntax: | float: <value>
Possible Values: | left | right | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The float property allows authors to wrap text around an element. This is identical in purpose to [image] HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the [image] images and [image] tables that HTML 3.2 allows.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Height

Syntax: | height: <value>
Possible Values: | <length> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each [image] block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed.

As with the width property, height can be used to scale an image:

IMG.foo { width: 40px; height: 40px }

In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file. However, scaling through the width and height properties is a useful option for user-defined style sheets in order to overcome vision problems.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Margin

Syntax: | margin: <value>
Possible Values: | [ <length> | <percentage> | auto ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The margin property sets the margins of an element by specifying between one and four values, where each value is a length, a percentage, or auto. Percentage values refer to the parent element's width. Negative margins are permitted.

If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Examples of margin declarations include:

BODY { margin: 5em }             /* all margins 5em */
P    { margin: 2em 4em }         /* top and bottom margins 2em,
                                    left and right margins 4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Horizontal margins are not collapsed.

Using the margin property allows one to set all margins; alternatively, the properties margin-top, margin-bottom, margin-left, and margin-right may be used.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Bottom Margin

Syntax: | margin-bottom: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-bottom property sets the bottom margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

DT { margin-bottom: 3em }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Left Margin

Syntax: | margin-left: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-left property sets the left margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

ADDRESS { margin-left: 50% }

Note that adjoining horizontal margins are not collapsed.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Right Margin

Syntax: | margin-right: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-right property sets the right margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

P.narrow { margin-right: 50% }

Note that adjoining horizontal margins are not collapsed.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Top Margin

Syntax: | margin-top: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-top property sets the top margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

For example, the following rule would eliminate the top margin of a document:

BODY { margin-top: 0 }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Padding

Syntax: | padding: <value>
Possible Values: | [ <length> | <percentage> ]{1,4}
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.

An element's padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:

BLOCKQUOTE { padding: 2em 4em 5em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Bottom Padding

Syntax: | padding-bottom: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-bottom property describes how much space to put between the bottom border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Left Padding

Syntax: | padding-left: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-left property describes how much space to put between the left border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Right Padding

Syntax: | padding-right: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-right property describes how much space to put between the right border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Top Padding

Syntax: | padding-top: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-top property describes how much space to put between the top border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Width

Syntax: | width: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each [image] block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed.

This property could be used to give common widths to some INPUT elements, such as submit and reset buttons:

INPUT.button { width: 10em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Display

Syntax: | display: <value>
Possible Values: | block | inline | list-item | none
Initial Value: | block
Applies to: | All elements
Inherited: | No

The display property is used to define an element with one of four values:

  • block (a line break before and after the element)
  • inline (no line break before and after the element)
  • list-item (same as block except a list-item marker is added)
  • none (no display)

Each element typically is given a default display value by the browser, based on suggested rendering in the HTML specification.

The display property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value none will turn off display of the element to which it is assigned, including any children elements!

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


List Style

Syntax: | list-style: <value>
Possible Values: | <list-style-type> || <list-style-position> || <url>
Initial Value: | Not defined
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties.

Examples:

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


List Style Image

Syntax: | list-style-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-image property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the list-style-type property.

Examples:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


List Style Position

Syntax: | list-style-position: <value>
Possible Values: | inside | outside
Initial Value: | outside
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-position property takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented. An example rendering is:

Outside rendering:
 * List item 1
   second line of list item

Inside rendering:
   * List item 1
   second line of list item

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


List Style Type

Syntax: | list-style-type: <value>
Possible Values: | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial Value: | disc
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-type property specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off.

Examples:

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Whitespace

Syntax: | white-space: <value>
Possible Values: | normal | pre | nowrap
Initial Value: | normal
Applies to: | Block-level elements
Inherited: | Yes

The white-space property will determine how spaces within the element are treated. This property takes one of three values:

  • normal (collapses multiple spaces into one)
  • pre (does not collapse multiple spaces)
  • nowrap (does not allow line wrapping without a [image] <BR> tag)

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background

Syntax: | background: <value>
Possible Values: | <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to 0% 0%.

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Attachment

Syntax: | background-attachment: <value>
Possible Values: | scroll | fixed
Initial Value: | scroll
Applies to: | All elements
Inherited: | No

The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

Authors may also use the shorthand background property, which is currently better supported than the background-attachment property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Color

Syntax: | background-color: <value>
Possible Values: | <color> | transparent
Initial Value: | transparent
Applies to: | All elements
Inherited: | No

The background-color property sets the background color of an element. For example:

BODY { background-color: white }
H1   { background-color: #000080 }

To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.

Authors may also use the shorthand background property, which is currently better supported than the background-color property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Image

Syntax: | background-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The background-image property sets the background image of an element. For example:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

When a background image is defined, a similar background color should also be defined for those not loading images.

Authors may also use the shorthand background property, which is currently better supported than the background-image property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Position

Syntax: | background-position: <value>
Possible Values: | [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial Value: | 0% 0%
Applies to: | Block-level and replaced elements
Inherited: | No

The background-position property gives the initial position of a specified background image. This property may only be applied to [image] block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)

The easiest way to assign a background position is with keywords:

  • Horizontal keywords (left, center, right)
  • Vertical keywords (top, center, bottom)

Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.

When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element.

If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

The keywords are interpreted as follows:

  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%

If the background image is fixed with regard to the canvas, the image is placed relative to the canvas instead of the element.

Authors may also use the shorthand background property, which is currently better supported than the background-position property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Repeat

Syntax: | background-repeat: <value>
Possible Values: | repeat | repeat-x | repeat-y | no-repeat
Initial Value: | repeat
Applies to: | All elements
Inherited: | No

The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally.

Authors may also use the shorthand background property, which is currently better supported than the background-repeat property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Color

Syntax: | color: <color>
Initial Value: | Determined by browser
Applies to: | All elements
Inherited: | Yes

The color property allows authors to specify the color of an element. See the Units section for color value descriptions. Some example color rules include:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font

Syntax: | font: <value>
Possible Values: | [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | Yes

The font property may be used as a shorthand for the various font properties, as well as the line height. For example,

P { font: italic bold 12pt/14pt Times, serif }

specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Family

Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values: <family-name>
  • Any font family name may be used
<generic-family>
  • serif (e.g., Times)
  • sans-serif (e.g., Arial or Helvetica)
  • cursive (e.g., Zapf-Chancery)
  • fantasy (e.g., Western)
  • monospace (e.g., Courier)
Initial Value: Determined by browser
Applies to: All elements
Inherited: Yes

Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present.

A sample font-family declaration might look like this:

P { font-family: "New Century Schoolbook", Times, serif }

Notice that the first two assignments are specific type faces: New Century Schoolbook and Times. However, since both of them are serif fonts, the generic font family is listed as a backup in case the system does not have either of these but has another serif font which meets the qualifications.

Any font name containing whitespace must be quoted, with either single or double quotes.

The font family may also be given with the font property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Size

Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (in relation to parent element)

Initial Value: medium
Applies to: All elements
Inherited: Yes

The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user.

Some example size assignments would be:

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Authors should be aware that [image] Microsoft Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these units unreadable. The browser also incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parent element's font size. This makes rules like

H1 { font-size: 200% }

dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODY would most likely be the parent element, and it would likely define a medium font size, whereas the default level-one heading font size imposed by IE would probably be considered xx-large.

Given these bugs, authors should take care in using percentage values for font-size, and should probably avoid em and ex units for this property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Style

Syntax: | font-style: <value>
Possible Values: | normal | italic | oblique
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). A sample style sheet with font-style declarations might look like this:

H1 { font-style: oblique }
P  { font-style: normal }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Variant

Syntax: | font-variant: <value>
Possible Values: | normal | small-caps
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-variant property determines if the font is to display in normal or small-caps. Small-caps are displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants. An example of a font-variant assignment would be:

SPAN { font-variant: small-caps }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Weight

Syntax: | font-weight: <value>
Possible Values: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-weight property is used to specify the weight of the font. The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

Note: Since not all fonts have nine possible display weights some of the weights may be grouped together in assignment. If the specified weight is not available, an alternate will be chosen on the following basis:

  • 500 may be switched with 400, and vice versa
  • 100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise
  • 600-900 may be assigned to the next darker weight, if any, or the next lighter weight otherwise

Some example font-weight assignments would be:

H1 { font-weight: 800 }
P  { font-weight: normal }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Letter Spacing

Syntax: | letter-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The letter-spacing property defines an additional amount of space between characters. The value must be in the length format; negative values are permitted. A setting of 0 will prevent justification.

Examples:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Line Height

Syntax: | line-height: <value>
Possible Values: | normal | <number> | <length> | <percentage>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The line-height property will accept a value to control the spacing between baselines of text. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not permitted.

Line height may also be given in the font property along with a font size.

The line-height property could be used to double space text:

P { line-height: 200% }

Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Text Alignment

Syntax: | text-align: <value>
Possible Values: | left | right | center | justify
Initial Value: | Determined by browser
Applies to: | Block-level elements
Inherited: | Yes

The text-align property can be applied to [image] block-level elements (P, H1, etc.) to give the alignment of the element's text. This property is similar in function to HTML's ALIGN attribute on paragraphs, headings, and divisions.

Some examples follow:

H1          { text-align: center }
P.newspaper { text-align: justify }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Text Decoration

Syntax: | text-decoration: <value>
Possible Values: | none | [ underline || overline || line-through || blink ]
Initial Value: | none
Applies to: | All elements
Inherited: | No

The text-decoration property allows text to be decorated through one of five properties: underline, overline, line-through, blink, or the default, none.

For example, one can suggest that links not be underlined with

A:link, A:visited, A:active { text-decoration: none }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Text Indentation

Syntax: | text-indent: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | Block-level elements
Inherited: | Yes

The text-indent property can be applied to [image] block-level elements (P, H1, etc.) to define the amount of indentation that the first line of the element should receive. The value must be a length or a percentage; percentages refer to the parent element's width. A common use of text-indent would be to indent a paragraph:

P { text-indent: 5em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Text Transformation

Syntax: | text-transform: <value>
Possible Values: | none | capitalize | uppercase | lowercase
Initial Value: | none
Applies to: | All elements
Inherited: | Yes

The text-transform property allows text to be transformed by one of four properties:

  • capitalize (capitalizes first character of each word)
  • uppercase (capitalizes all characters of each word)
  • lowercase (uses small letters for all characters of each word)
  • none (the initial value)

Examples:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

The text-transform property should only be used to express a stylistic desire. It would be inappropriate, for example, to use text-transform to capitalize a list of countries or names.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Vertical Alignment

Syntax: | vertical-align: <value>
Possible Values: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial Value: | baseline
Applies to: | Inline elements
Inherited: | No

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

  • baseline (align baselines of element and parent)
  • middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
  • sub (subscript)
  • super (superscript)
  • text-top (align tops of element and parent's font)
  • text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

  • top (align top of element with tallest element on the line)
  • bottom (align bottom of element with lowest element on the line)

The vertical-align property is particularly useful for aligning images. Some examples follow:

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Word Spacing

Syntax: | word-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The word-spacing property defines an additional amount of space between words. The value must be in the length format; negative values are permitted.

Examples:

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.