J. Blustein

Web-centric Computing

Some Example Code

CSS 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

  1. Without the . in .large the rule applies only to the (non-existent) large element.
  2. 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.
  3. 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" />
  4. 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">

See Also

Example 2 (and Example 3)


http://www.cs.dal.ca/~jamie/course/CS/3172/examples/CSS/one.html
Version:
11 Nov 2001
CS 3172 Prof:
J. Blustein <jamie@cs.dal.ca>

Valid XHTML 1.0!, Valid CSS!