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
    listnav.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. Positioning a box. Use your finished Example 21 as a starting point.
  9. Fluid layouts (a quick peek)

Validate

CSS Links      (Back to Top)

CSS Zen Garden Reference Page
www.w3.org/Style/CSS/
W3C Cascading Style Sheets, Level 1 (CSS1)
SitePoint CSS Reference
Wikipedia definition of CSS

CSS1 Reference

www.meyerweb.com/eric/css/references/css1ref.html

CSS2 Reference

www.meyerweb.com/eric/css/references/css2ref.html

CSS Properties and Values

www.cookwood.com/html/extras/cssref.html
CSS Properties (pdf)

Hexadecimal Colors

www.houseof3d.com/pete/applets/tools/colors/

New Firefox Browser

www.mozilla.org/products/firefox/

HTML Forms and CSS

Forms tutorial, part one
Forms tutorial (Add CSS), part two

CSS3 Fun

Drop Shadow, gradient fill, and round corners with CSS3
CSSmatic -- free CSS3 generator
CSS3 PIE (IE7, 8 & 9 fixes for CSS3)

Designing with Web Standards

www.webstandards.org
www.webstandardssherpa.com
A List Apart

Fonts on the Web

Browser Fonts -- Common Fonts / OS
Google Fonts
Web safe fonts (W3schools)
Type tester
10 Beautiful CSS Typography Examples and how they did it
CSSTypeset.com type tester and CSS generator

MORE CSS Experiments

www.csszengarden.com
www.mezzoblue.com/zengarden/resources
The Box Model Explained: www.brainjar.com/css/positioning/default.asp
CSS3 Pattern Generator
Creative CSS3 Animated Menus
3d animations using pure CSS3 (requires latest version of Safari or Chrome browser) 3d CSS3 animation explained.

About XHTML and HTML5      (Back to Top)

Wikipedia definition of XHTML
XHTML Tutorial (w3schools)
HTML5 tutorial (w3schools)

Books

CSS Pocket Guide (PDF e-document, Peachpit Press)

Web Standards Solutions, The Markup and Style Handbook, by Dan Cederholm
simplebits.com

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3, 3rd Edition, by Dan Cederholm
abookapart.com

CSS3 for Web Designers, by Dan Cederholm
abookapart.com

HTML5 for Web Designers, by Dan Cederholm
abookapart.com

Responsive Web Design, by Ethan Marcotte
abookapart.com

CSS Mastery, Advanced Web Standards Solutions, by Andy Budd
(check out the website for this book)

CSS Cookbook, 3rd edition, by Christopher Schmitt (O'Reilly)
O'Reilly bookstore

2011 Wordpress stuff

Wordpress codex
Wordpress.org
Using Wordpress for Content Management (CMS)
More Reasons to use Wordpress for Content Management
StudioPress (excellent Wordpress themes)