6 4 CSS Tips Techniques

Web Functions Wizard

6.4 CSS Tips & Techniques

  • The general format of a CSS rule is:

    selector   {property : value}

   The Wizard will automatically insert the { } around the declarations (i.e. properties and values) when you build the style sheet.

  • Each property must be separated by a semi-colon. For example:

    H1{ color:"#C00000"; font-family: arial, garamond;}

  • The Tag Assistant will not modify properties and values which are already defined as declarations. To modify a property or value using the Tag Assistant, remove the original reference from the free-format text area then use the Tag Assistant to generate the declaration again.
  • An RDML component can be embedded within a style sheet to simplify maintenance even further. For example, you may have a Web component FONTPREF1 defined as a text component containing the default font family for your Web Function Application. The style sheet may then contain the following tags using the default font component:

       <style type="text/css">

       body     { font-family: <RDML COMPONENT="FONTPREF1">;}

       table    { font-family: <RDML COMPONENT="FONTPREF2">;}

       </style>

  • To reduce the size of a style sheet (and hence the download overhead), selectors can be grouped in a comma-separated group. For example:

    H1, H2, H3{ font-family : helvetica }

  • Style properties are generally inherited from the parent element to the child element. If no color has been assigned to the 'strong' element, the strong "LANSA" will inherit the color of the parent element. There are some obvious exceptions to this rule. For example, the 'background' property does not inherit, but the parent element's background will shine through by default. For example:

    <H1><strong>LANSA</strong> Web Functions Wizard</H1>

  • Comments can be added to your style sheet using /* to open the comment and */ to close the comment. For example:

    H1{ color:"#0000FF" } /* blue */

  • For more information on defining CSS, refer to a good reference book on Dynamic HTML (DHTML) or the World Wide Web Consortium at http://www.w3c.org

 

WIZ006 - Defining a Style Sheet