Writing CSS ID Selectors for Table Cells

Double click the project css sheet in the CSS Styles panel to open the style sheet. While you create ID selectors through the CSS Styles panel you will be able to see the code being added to the styles sheet.

Click the new styles icon (+) at the bottom of the CSS Styles panel Add New Style. This brings up the new styles dialog box.

Fill in the following for the Selector Type, Selector Name, and Rule Definition. Click OK to define the selector properties.

ID Selector

Click on the border category and set the following properties. Click OK to set the mainTable settings.


Your CSS Styles panel should look like the graphic below:

CSS Panel

Your project css code should look like this:

Main Table Code

Create a new CSS style rule by clicking the plus button at the bottom of the CSS panel. This time you will create a compound because you will be creating another rule for your table.

TD Selector

Select the Box category and set the values to match the ones below to ad 20 px padding in the table cells.

TD Selector

The rest of the selectors will be ID and will be included in "This document only." I have listed the code for each selector. Include these values through the CSS Styles panel:

Main Content




Your CSS Styles panel should now look like this:

CSS Style Panel

Creating a CSS Style Sheet