J. Blustein

Web-centric Computing

Some Example Code

CSS Example 3

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>

  <div class="large">
    <p>These two <code>p</code>s are in a <code>class="large" div</code>.</p>

    <p>Are they the same as the other <code>class="large"</code> elements?</p>
  </div>

CSS Rules

Included from the three.css file.

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; }
  p.large { font-size: 2.0em; }
div.large { background-color: black; color: white }

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.

These two ps are in a class="large" div.

Are they the same as the other class="large" elements?

(Screenshot)

See Also

Example 1 and Example 2

Notes

The notes for the first example are the same as for this one, except that the CSS rules are in the three.css file.


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

Valid XHTML 1.0!, Valid CSS!