<<< HOME

Cascading Style Sheets (CSS) Excercise

To practice your CSS, alter the code for this entire page (yes, the one you're looking at), remove all the XHTML styling which exists as attributes in the tags, and reformat using CSS. Also replace font, italic and bold tags with formatted span tags. (They go like this: <span class="mystyle"></span>)

But first something about CSS …

The easiest way to imaging what CSS does is to note that it finds tags ( < > ) in HTML and replaces the code with its own. When you write a paragraph style in CSS, p {...}, for example, the style code looks for every p tag ( <p> ) in the document and puts new code into it. It takes only a moment longer to code for a single paragraph tag with CSS than it does in HTML, but when you're done, every paragraph tag is altered with no further work. What a timesaver!

Now the bad news … When you write XHTML or CSS, you're writing instructions for whichever browser the proverbial user is using. Consider what this means: to hear your instructions, the browser must itself be programmed to accept them. Many older browsers are deaf to some XHTML and a lot of CSS, and instructions won't be heeded. Figure out what kind of equipment your user will implement to see your pages before you make use of it.

More bad news: since CSS takes the place of matter in tags, every part of how the code is written is different. Even the equal sign in attributes (=) become a colon ( : ) in properties (even the word "attribute" is replaced with the word "properties"!)

Other Specifications:

  • Set normal font face in the body tag to Verdana 11 pixels.
  • Make h1 heads 15 pixel Arial Black.
  • Make h2,3,4 heads 14,13,12 pixel Verdana bold.
  • Make "-1" attributes for fonts into 10 pixel Arial Black.
  • Set fonts in unordered lists to 11 pixel Arial, with list items 10 pixel Arial.
  • Set bullets in unordered lists to "square".
  • For tables, make all cell and th fonts Verdana 11 pixel.
  • In tables, make table head tags (<th>) Times New Roman, Times, 12 pixel bold.
  • In tables, make table data (cell) tags (<td>) Times New Roman, Times, 10 pixel
Some Tags and Their Corresponding CSS Properties
Tag Property Comment
font font-family, font-size, font-weight Not a stand-alone in CSS, usually used within another tag.
list item disc, square, circle Changes the appearance of a bullet.
cellpadding padding: # # # # (top bottom right left, in pixels), padding-top, padding-bottom, padding-left, padding-right You can control the padding in each separate cell and in four directions!
underline, etc. text-decoration:underline (or none, overline, line-through) You can use this property to change the standard link style.