Cascading Style Sheets (CSS):
Hands-on Packet.

author: jim.cerny@unh.edu

---

Here's the Plan.

We will practice the syntax of CSS styles to demonstrate practical use of CSS, selecting from the examples below. I will discuss one or more examples, then give you time to do them on your own. Most of the examples are linked below in two forms. The first link is to its complete form and the second link (file name begins with "x") is to its incomplete form, i.e., minus the CSS code that is the focus of the example (to minimize the typing when keying these for practice). The idea is to click on the incomplete form, view source, make the edits, then save it to your desktop and display the result in your browser. There are more examples than we normally get to in class, so we will pick and choose, leaving some for you to explore on your own.

Beware of simple syntax mistakes and typos. Make sure you have colon (":") and semicolon (";") delimiters where they are needed. Watch where white space is allowed or disallowed. And make sure your curly braces ("{ }") match-up and that they are not confused with parentheses.

Advice for Later.

The important thing about CSS is to get started. Don't wait until you really have enough time or for just the right project. Next time you need to create or revise a Web page, try to incorporate some simple CSS uses, something that will "degrade gracefully" if a browser doesn't support it. For example, promise yourself that you will no longer use the FONT tag, but CSS instead. Or use CSS to set a left margin or to control Hn (header) elements. Sooner or later you will reach a threshold where it becomes second nature to include such use, that it no longer seems an interruption of your work flow. Trust me.

Hands-on Examples.

Part 1.

• template.html and xtemplate.html
  bare-bones HTML template.

• oldnew.html and xoldnew.html
  contrast HTML (old) and CSS (new) ways to style text.

• text1.html and xtext1.html
  add basic text styling with internal style.

• text2.html and xtext2.html
  add changes in background color.

• text3.html and xtext3.html
  add inlined cascade to internal style.

• text4.html and xtext4.html
  add drop-caps to first letter of paragraphs.

• decor.html and xdecor.html
  changing text "decoration" of a hyperlink.

• margin1.html and xmargin1.html
  change left and right margins for paragraphs.

  Part 2.

  List of graphics to download for these examples.

• csscheck.html
  use a syntax checker to verify your CSS code.

• list1.html and xlist1.html
  a list with no bullets at all.

• list2.html and xlist2.html
  styling lists, with graphics for bullets.

• box1.html and xbox1.html
  contrast HTML styling of a box with CSS styling of a box.

• box2.html and xbox2.html
  more box styling.

• external.html
  making and using an external style sheet external.css.

• clip1.html
  try positioning and clipping of layers -- several images. (CSS2)
  see the clipping discussion.

• position1.html
  try positioning of layers -- text and image. (CSS2)