Step 6 Make the Style Sheet specific to lists named EMPLIST

Step 6. Make the Style Sheet specific to lists named EMPLIST

As currently defined, the background color changes in your cascading style sheet, apply to all lists.

In this step you will make the style sheet specific to lists named EMPLIST.

1.  Run the begin WebRoutine in the browser for WAM iiiUsingCSS and display a list of employees.

     Use the IE Developer tools, as before, to select the List (click on the edge of the List).

     Expand the tree on the HTML tab, to show the <table….> tag for the list table.

     Note this has an id of EMPLIST. It is given an id equal to the list name defined in the RDML.

2. Switch to Notepad, where you should still have your style sheet file open. Change the code to the following and save the file:

TABLE#EMPLIST tr.list-o > TD
{
     background-color: #fffacd;
}
TABLE#EMPLIST tr.list-e > TD
{
     background-color: #ffe4b5;
}
 

     Your styles for odd and even background colors are now defined for lists named EMPLIST only.

11. Run WAM iiiUsingCSS and display the list of employees, which should reflect your style sheet.

12.  Run WAM iiiSecMaint to display sections for a department. This list should not reflect your stylesheet, which is now specific to a list with an id of EMPLIST.