Example 1

HTML

  <p>This is some text inside a <code>p</code> element.</p>

  <p>This is <em>some emphasized text</em>.  This is regular text.</p>

  <p class="large"
     >This is some text in class <code>large</code> element.</p>

  <p class="large"
     >This is <span class="large"
                 >some <em>emphasized text</em> in
                 </span> class <code>large</code>.</p>

CSS Rules

  body  { background-color: rgb(80%,80%,80%); color: black }
  em    { text-decoration: underline;
          color: red; background-color: inherit;
          font-weight: bold }
 .large { font-size: 2.5em; }

Results

This is some text inside a p element.

This is some emphasized text. This is regular text.

This is some text in class large element.

This is some emphasized text in class large.

(Screenshot)

Notes

Without the . in .large the rule applies only to the (non-existent) large element.
Because I set the colour for the em I had to set the background colour too. I chose to set the body's colour and have it inherited.
- The default is for the background colour to be inherited from the enclosing element, but because the CSS validator gave me a warning, I explicitly told the em to inherit the colour.
The CSS rules are in the file simple.css and were included with the following instruction in the head of the XHTML:
```
<link rel="stylesheet" type="text/css" href="simple.css" />
```
The CSS rules were checked with the W3C's CSS validation service. You can do that by filling out a form at the site, or by following a link from this page. For the link from this page to work the XHTML DOCTYPE must include the URL of the DTD.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
not just
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "DTD/xhtml1-strict.dtd">
```

Web-centric Computing

Some Example Code

Example 1

HTML

CSS Rules

Results

(Screenshot)

Notes

See Also

`http://www.cs.dal.ca/~jamie/course/CS/4173/examples/CSS/one.html`