HOPEX Power Studio (EN) : Customizing Web Sites : Managing Web Sites: Advanced Functions : Style Sheets
   
Style Sheets
 
Style Sheet Presentation
Defining Styles
Styles Available in "Neutral.css"
Modifying Style Sheet .css
Modifying contents page parameters
Modifying menu parameters
Example of .css configuration
Style Sheet Presentation
Style sheets are a way to quickly modify the appearance of pages without having to change each page individually.
A style sheet defines the appearance of each element in Web pages, based on HTML tags and on the styles specified as parameters in the body of the page.
Options for displaying an element can be defined in several ways:
• By explicitly indicating the format (for example <B>text in bold</B>).
• By defining the style in the HTML tag (for example <TABLE BORDER=1 style=“FONT: 10pt Arial”>).
• By linking the HTML document to an external style sheet. This allows modification of the appearance of all Web pages that use the style sheet by acting on the style sheet itself.
This last method is used when generating pages; the Web site style sheet (defined in its properties) is listed in the header (<HEAD>) for each page:
<LINK REL=stylesheet href=“StylSh.Css">
Styles for various elements are then specified. For example, the table is defined with the style “StdConstLayTabProp”:
<TABLE CLASS=“StdConstLayTabProp">
Note that the keyword indicating the style to be used is CLASS, and the STYLE keyword is used to define local tag formatting.
The parameters indicated in the HTML page are added to those indicated in the style sheet and replace those already defined.
The hierarchy of definitions indicated in style sheets varies as a function of the navigator used. They are not recognized by certain navigators.
Redefinition of a style in a page takes priority over the style sheet definition.
*"Defining Styles"
Defining Styles
Styles can be defined in a page header, to avoid repeatedly specifying a particular formatting each time it is used.
<HEAD>
<STYLE>
H1{font: 22pt Arial, Helvetica, sans-serif}
</STYLE>
In the above example, the H1 level header will appear in 22 point Arial font if this font is installed on the computer of the person accessing the page, otherwise in Helvetica, and if neither of these fonts is available, in a sans serif font.
*This possibility can be used in all tags that define which font to use for display.
In the example below, when the H1 tag indicates that style is “Style1Plus” (<H1 class=Style1Plus>), the color red is added, replacing the color used by default.
<STYLE>
H1{font: 22pt Arial, Helvetica, sans-serif}
H1.Style1Plus {color: red}
</STYLE>
It is possible to define a style that applies to all tags, by declaring it as follows:
.StyleName{formatting}
This style can be used in form H1.StyleName, TR.StyleName, etc.
When pages are displayed, priority is given to the format nearest to that of the element concerned. If a style is first defined in a style sheet, then redefined in a header, then defined a third time in the body of the text, it is the final definition that will be taken into account.
*The different definitions will supplement each other if not contradictory: a style defining a color in the style sheet will remain valid if the redefinition concerns, for example, only the font size.
Style sheets are text files, as are HTML pages. They generally have the extension CSS, for Cascading Style Sheet. They are indicated in the META section as follows:
<LINK REL=STYLESHEET TYPE="text/css" HREF="../STANDARD/NEUTRAL.CSS">
 
Defined elements
Font
Size
Color
Style sheet
Arial
12
Blue
Header (HEAD)
 
18
 
Result
Arial
18
Blue
Example of cascading style operation
 
Defined elements
Font
Size
Color
Style sheet
Arial
 
 
Header (HEAD)
 
18
 
Tag
 
size:20
color=red
Result
Arial
20
red
A further example of cascading style operation
Just as there are HTML editors, there is software for modifying style sheets without having to know the formatting codes. These codes are documented in numerous Web sites (including http://www.W3.org/, site for the World Wide Web Consortium).
In pages generated with the HTML generator, default styles are indicated with indication of which object is concerned.
Styles Available in "Neutral.css"
The style sheet “Neutral.Css”, found in MEGA_STD, contains the definitions for these styles without formatting. These styles are: (styles prefixed by “Model” are used to format diagrams, those prefixed by “Std” are used for standard formatting)
 
Modifying Style Sheet .css
Several parameters can be defined in style sheet .css:
• Background color
• Links color
• Visited links color
• Text color
• Default font
Modifying contents page parameters
 
To modify:
Style and parameter to be modified:
Background image
Style 'BODY.Content' or 'BODY', parameter 'BACKGROUND-IMAGE'
Background color
Style 'BODY.Content' or 'BODY', parameter 'BACKGROUND-COLOR'
Links color
Style 'A', parameter 'COLOR'
Visited links color
Style 'A:visited', parameter 'COLOR'
Text color
Style 'BODY.Content' or 'BODY', parameter 'COLOR'
Default font
Style 'BODY.Content' or 'BODY', parameter 'FONT-FAMILY
*’BODY’ style applies to all HTML pages, except if another style takes precedence.
’BODY.Content’ style applies to the contents page only.
Modifying menu parameters
 
To modify:
Parameter to be modified:
Background color
Style 'BODY.Menu' parameter 'BACKGROUND-COLOR'
Links color
Style 'Menu A' parameter 'COLOR'
Visited links color
Style 'Menu A:visited' parameter 'COLOR'
Text color
Style 'BODY.Menu' parameter 'COLOR'
Default font
Style 'BODY.Menu' parameter 'FONT-FAMILY'
Example of .css configuration
Example: image (current repository) without background color
 
BODY.Menu
{
MARGIN-TOP: 10px;
FONT-SIZE: 10px;
BACKGROUND-IMAGE:url(..\standard\HOMEPICTURE.JPG);
MARGIN-LEFT: 5px;
}
 
Example: background color without image
 
BODY.Menu
{
MARGIN-TOP: 10px;
FONT-SIZE: 10px;
BACKGROUND-IMAGE: none;
MARGIN-LEFT: 5px;
BACKGROUND-COLOR: #f5f4ee
}