Basic CSS syntax: Contained by

  1. Font families
  2. Basic CSS syntax

You have a number of ways of focussing in on specific tags. One of the most common is to try to affect only tags that are contained in other tags. For example, you might have a specific table class, and want to affect the header cells in that table.

Change the table tag from:

<table>

to:

<table class="bookinfo">

Add the following to your style sheet:

table.bookinfo th {

text-align: right;

border-right-style: solid;

border-right-width: .15em;

border-right-color: orange;

}

This definition will only affect “th” tags that appear inside of tables with the class “bookinfo”. This is specified by placing the “th” in the definition after the “table.bookinfo”, separated by a space.

Earlier, we separated different tags by a comma to apply the same definition separately to each of those tags. Hear, we are separating tags by spaces to apply the definition to the final tag, only if it is contained by the previous tag(s). You can have as many tags as you want in the chain. For example:

td blockquote em {

font-style: normal;

font-weight: bold;

}

This will remove the italics from emphasized text and make that emphasized text bold, but only if the emphasized text occurs within a blockquote, and only if the blockquote occurs within a table’s data cell.

image 10
  1. Font families
  2. Basic CSS syntax