What is CSS?

Cascading Style Sheets offer a way for Web designers to gain more control over the style of their Web pages. It is a way for the information (content) presented on a page to be separated from the way it looks (style). This workshop covers the basic elements and uses of CSS. It requires a basic understanding of (X)HTML.

CSS represents part of the effort to return to the original intentions of separating structure and presentation, which have become jumbled together as HTML developed, because of varying browser support (or lack of it), and the wishes of designers to change the look of their pages, and not be stuck with generic pages that look like everyone else's pages on the Web. In conjunction with CSS to style documents, there is the development of XML and XHTML as ways to specify document structure.

Another definition of CSS:

Cascading Style Sheets, style sheets when attached to documents describe how the document is displayed or printed, e.g. a CSS sheet is attached to an HTML document, to influence its layout when accessed via a browser. CSS supports cascading, i.e. a single document may use two or more style sheets that are then applied according to specified priorities (=cascade).

See wikipedia for a complete explanation of CSS: http://en.wikipedia.org/wiki/CSS

Get Started      (Back to Top)

Don't wait until you really have enough time or for just the right project to begin using CSS. 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, try redefining your "P" elements and your Heading elements (H1, H2, H3, H4, H5, H6) in a CSS. Sooner or later it will become second nature to include such use, so that it no longer seems an interruption to your work flow.

Okay, are you ready? Let's begin!

Here's the Plan      (Back to Top)

Following along on your handout, 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 (file name begins with an "x") is to its incomplete form and the second link is to its complete form, i.e., with the added 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.

Basic Hands-on Examples.      (Back to Top)

Basics: Changing Color, Size, Inline and Internal Styles.

  1. xtemplate.html and template.html (bare-bones HTML template.)
  2. xoldnew.html and oldnew.html [contrast HTML (old) and CSS (new) INLINE ways to style text.]
  3. xtext1.html and text1.html [Internal Style Sheets: add basic text styling with INTERNAL styles.]
  4. xtext2.html (almost the same as text1.html) and text2.html [add changes in font and background COLORS and style an h3 head with a BORDER on the bottom.]
  5. xmargin1.html and margin1.html [change MARGINS, add BORDERS]
  6. xclass.html (almost the same as margin1.html) and class.html [add CLASS and a BACKGROUND IMAGE!] (get the image you need here)

External Style Sheets Examples

  1. external.html [ making and using external style sheets external.css.]
  2. hover.html [ using an external style sheet, add a "hover" to an anchor link. hover.css.]
  3. basic.html [ this page is styled using an external style sheet, with just basic html elements redefined. basic.css. ]

Simple Lists

nhmuse List of graphics to download.

  1. xlist1.html and list1.html [ a list with no bullets at all.]
  2. xlist2.html and list2.html [ styling lists, with graphics for bullets as background images.]

Lists and Navigation

  1. Simple List Navigation, no CSS
  2. Simple List Navigation, begin experiment. CSS for this experiment.
  3. Vertical List Navigation with CSS
  4. Tabbed List Navigation and Horizontal List Navigation
    listnav2.css and listnav3.css
  5. Horizontal List Navigation with repeating background images.

- - - - - - - - - - - END OF FIRST WORKSHOP - - - - - - - - -

CSS and the Box Model

Page Layouts and the Box Model

  1. 1col-template.html One-column Fixed-width Layout Template
  2. one-columnfixed.html One-column fixed-width layout Example.
  3. 2col-template.html Two-column Fixed-width Layout template.
  4. two-columnfixed.html Two-column fixed-width layout Example.
    two-columnfixed-nav.html Example of cutting and pasting the navigation scheme from Example 14 above. (Of course, this navigation scheme doesn't fit our design, but it may be adjusted to fit.)
  5. two-columnfixed-addnav.html Using two-columnfixed.html and add our own navigation style.
  6. Continuing on, add background images and floats. nhmuseGraphics used for this example. Finished examples: two-columnfixed2.html
    More background images and Modifying the Navigation:
    Make it look like this!
    (Images used for this transformation.)
  7. two-columnfixed-add-box Add a second "Highlighted" nav area with vertically expandable box. nhmuseGraphics used for this example. Also for this example, a slightly different approach to adding the same "feature" box.
  8. Fluid layouts (a quick peek). And another example of a fluid layout here.