ProblemYou want to stylize links within a table cell to make them appear visually different from the rest of the page. SolutionUse a descendant selector (sometimes referred to as a contextual selector) to manipulate the styles for content in a table cell: td a { display: block; background-color: #333; color: white; text-decoration: none; padding: 4px; } DiscussionBy using the type and descendent selectorsthe TD a in the CSS ruleto apply the styles, you reduce the amount of markup needed to perfect your designs and you reduce the document's file sizes. The style affects only the a elements within the table cells, TD. If you need more control over the design of the content within a table cell, use a class selector: <td > <a href="/">Home</a> </td> You then can apply the CSS rules to the cell's content through a combination of class and descendant selectors: td.navText a { font-size: x-small; } If you want to stylize content within a table cell that contains more content or markup than a link, wrap a div element around the content in order to use a class selector. In the following example, an unordered list is enclosed within a div element set with a class attribute: <td> <div > <p>To-do list on your day off.</p> <ul> <li><a href="http://www.imdb.com/title/tt0120737">Watch <cite>Fellowship of the Rings</cite>, Extended Version</a></li> <li><a href="http://www.imdb.com/title/tt0167261/">Watch <cite>Two Towers</cite>, Extended Version</a></li> <li><a href="http://www.imdb.com/title/tt0167260/">Watch <cite>Return of the King</cite>, Extended Version</a></li> <li>Start or join local Elvish society.</li> </ul> </div> </td> The CSS rules to stylize the content within the table cell could look like this: .tblcontent p { margin: 0; padding: 0; font-weight: bold; } .tblcontent ul { margin: 0; padding: 0; } .tblcontent li { margin: 0; padding: 0; line-height: 1.5; } .tblcontent li a { padding-left: 15px; background-image: url(bullet.gif); background-repeat: no-repeat; } See AlsoThe CSS 2.1 specification regarding type selectors at http://www.w3.org/TR/CSS21/selector.html#type-selectors; http://www.w3.org/TR/CSS21/selector.html#descendant-selectors for information about descendant selectors. For a more thorough example of styling content within table cells, see Recipe 8.10. |