Page History
...
During this exercise you will use: Microsoft Internet Explorer, Developer Tools (included in Internet Explorer V8, V9 and V10) that enable the structure of a web page and its style rules to be explored in detail.
In order to complete this exercise you will complete the following:
Review What are Cascading Style Sheets? and What CSS files are loaded and how do I add my own?
Step 1. Create WAM iii Using CSS
...
| Anchor | ||||
|---|---|---|---|---|
|
A Cascading Style Sheet tells the browser how to display page elements. Cascading Style Sheet information determines things like the fonts and color schemes, DHTML effects, alignment, border size and color, but may also be used to define images and other features related to the interface. These properties can be assigned to individual elements identified by an ID, or groups of elements identified by type, location and class.
...
Style sheet files (CSS) are simply text and can be edited with any text editor such as Notepad. If you are working with style sheets it's a good idea to obtain a specialist style sheet editor. There are a number available, TopStyle is one example. They will make your editing faster and more accurate and make it easier to navigate through and manage a large number of styles defined in a style sheet. They will also help you to more rapidly learn the options available when defining styles.
| Anchor | ||||
|---|---|---|---|---|
|
The std_style_v2 weblet takes care of creating all the <link> tags needed to load the CSS files so you need to include it in the <head> section of your layouts. The std_style_v2 weblet always loads std_style.min.css into every layout. This defines the non-theme related properties of all LANSA supplied weblets.
...
Next, it adds any CSS files defined as External Resources referenced in the webroutine, layout or weblets used by the webroutine.
Finally, the std_style_v2 weblet loads a stylesheet defined by the variable $lweb_std_css_language_overlay. This variable is defined in the std_locale weblet and provides a means to apply language specific CSS modifications.
For more detail on this topic see the Web Application Modules guide.
What Cascading Style Sheets are available?
...
For an appreciation of how the shipped style sheets combine, this image is the begin WebRoutine in WAM iiiSecMaint – Section Maintenance with the themelet stylesheets removed:
This image is the begin WebRoutine with the SouthStreet theme style sheets applied:
Clearly, to change the appearance of any element on your web page, you need to define a style sheet that overrides the styles defined by your chosen theme.
Use CSS with Lists and Grids
This exercise will demonstrate how to change the appearance of elements in a list. The exercise is about how to identify the elements you wish to change and then implement these changes with your own style sheet.
...
If you are using Internet Explorer 8, 9 or 10 you already have Developer Tools that may be started from the browser Tools menu, or by using F12.Tools like this are essential for understanding how your page is constructed. The Mozilla Firefox browser has a similar optional tool known as Firebug.
This screen picture shows Developer Tools running with a WAM which displays a list of employees:
Note that the Select element by click 
icon in Developer Tools can be used to select the element on the page that you want to examine.
In this example the table containing the employee list has been selected. The Developer Tools then displays the HTML, attributes and styles for the selected element.
| Note |
|---|
| Note: Developer Tools also has good display source features that will help you to see in more detail how part of the screen is defined. You will use these later in this exercise. |
Using Developer Tools Tools and selecting the table containing the list, shows that the browselist EMPLST table is defined as: For clarity, some detail has been omitted from this code.
...