Define page styles for a Web site

Define page styles for a Web site - overview

There are various ways you can create and apply styles to Web pages, including specifying styles within individual Web pages and using an external cascading style sheet (CSS). The primary advantage of using an external style sheet is that you can have a consistent design throughout your Web site, because you maintain the contents (HTML files) and the design (the CSS) separately.

By sharing a style sheet, members of your Web development team can create Web pages in the same style. You can work with style sheets by using CSS Designer for .css files. CSS Designer shows the source of a CSS file and enables you to edit styles with the help of syntax highlighting and content assist. The modifications made in CSS Designer are immediately applied to the Design page of Page Designer if the HTML file has a link to the CSS file.

The CSS Source pane has many text editing features, such as:

Table 1. Text editing features of CSS Designer
Feature Description
syntax highlighting Each tag type is highlighted differently, enabling you to easily find a certain kind of tag for editing. Syntax highlighting is valuable in locating syntax errors.
unlimited undo and redo You can incrementally undo and redo every change made to a file for the entire editing session. For text, changes are incremented by one character or set of selected characters at a time.
content assist Content assist helps you to finish tags or lines of code and insert macros. Choices available in the content assist list are based on tags defined by the tagging standard specified for the file being edited.
element selection Based on the location of your cursor, the element selection indicator highlights the line numbers that include an element in the vertical ruler on the left area of the Source page.
pop-up menu options From the editor's pop-up menu, you have many of the same editing options available in the workbench Edit menu.

When working with style sheets, it is generally advisable to open the Styles view, by selecting Window > Show View > Styles from the Web perspective. The Styles view provides guided editing for cascading style sheets and individual style definitions for HTML elements.

You can select an actual Web page to apply and display styles created by CSS Designer, or use the default skeleton preview, which provides a minimal version of the defined styles. The Preview pane shows you how the currently defined styles are likely to look when viewed in an external Web browser. You can also add and edit styles from the Preview pane.There are three ways to select a Web page for Preview:
Drag and drop an HTML or JSP file from the Project Explorer view .
Click the Browse button at the top of the Preview pane and select a file from the File Selection dialog box.
Select a file or type the file name in the list at the top of preview pane. This list displays files that are already shown in Preview pane.
If you maximize the Preview pane, the file selected in the Project Explorer view is immediately reflected in the sample Web page in the Preview pane. If you want to see style effects in several Web pages, this feature is beneficial because you can change the sample page in the Preview pane by simply selecting a new file in the Project Explorer view.
The Preview pane contains two areas: the Selected Style area and Standard HTML Elements area. The Selected Style area is used to display the style effects of a style definition for the area that the cursor (in the Source pane) is in. The Standard HTML Elements area displays styles for standard HTML elements and is not affected by the cursor location.

The Preview is updated automatically if you modify the .css file using the Source pane or Styles view.

Related concepts
Cascading Style Sheet (CSS) Designer

Related tasks
Creating a style sheet
Editing style sheets

Feature	Description
syntax highlighting	Each tag type is highlighted differently, enabling you to easily find a certain kind of tag for editing. Syntax highlighting is valuable in locating syntax errors.
unlimited undo and redo	You can incrementally undo and redo every change made to a file for the entire editing session. For text, changes are incremented by one character or set of selected characters at a time.
content assist	Content assist helps you to finish tags or lines of code and insert macros. Choices available in the content assist list are based on tags defined by the tagging standard specified for the file being edited.
element selection	Based on the location of your cursor, the element selection indicator highlights the line numbers that include an element in the vertical ruler on the left area of the Source page.
pop-up menu options	From the editor's pop-up menu, you have many of the same editing options available in the workbench Edit menu.