CSS Resources

If you made it through the previous CSS lessons, you should have some basic knowledge about how CSS works....but the learning doesn't end here. You've taken the first baby steps to get a grasp of CSS1. Now you can move on to CSS2 and then into CSS3. Each step doesn't get harder, but it does expand on what you have learned.

Writing Your CSS

A lot of how you write and organize your CSS file is just a matter of personal preference.

You can write your rules with properties and values on one line...

css
  1. .myclass {font-weight: bold; text-align: left;}

...or you can place each property and its value on a separate line.

css
  1. .myclass {
  2.    font-weight: bold;
  3.    text-align: left;}

It does save time, however, if you stay organized in the external CSS file. I will normally place all of my HTML selectors first, starting with the body rule. Next I will organize any IDs in the order they are being used on the page. After the IDs, I will list the classes, again in the order they are being used. Last, I will place any miscellaneous classes, etc. that may not be used on every page.

To help you stay organized, you can add comments within your CSS file to help you recognize what a section is for. A CSS comment looks like this:

css
  1. /* -- Anything written here will not be read ----------- */
  2. /* -- This is where I write important notes to you ----- */
  3. /* -- Look for comments in your css file. It helps. ---- */

Books

While you might rather curl up with the latest Dean Koontz thriller, having some good reference books available can be invaluable. The following books sit in my office and I still refer to them often. These books are available through Amazon.com, BarnesandNoble.com, SitePoint.com, or through your local area book dealer.

  • Cascading Style Sheets: The Definitive Guide, 2nd Edition by Eric Meyer
  • Eric Meyer on CSS: Mastering the Language of Web Design by Eric Meyer
  • The CSS Anthology: 101 Essential Tips, Tricks and Hacks by Rachel Andrew
  • HTML Utopia: Designing without Tables using CSS by Dan Shafer
  • The Art and Science of CSS by Cameron Adams, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook

CSS Links

The Web Standards Project: Provides coverage of interim releases of major browsers' CSS implementations: https://www.webstandards.org/

CSS Validator: Validate your CSS file using one of three different methods. https://jigsaw.w3.org/css-validator/

Markup Validation Service: Validate your HTML or XHTML coding at https://validator.w3.org/

CSS School: The best teaching CSS sites available. https://www.w3schools.com/css/

CSS Reference Table: An excellent reference to CSS properties. https://reference.sitepoint.com/css/

CSS Inspiration

Zen Garden: An amazing CSS site. All of the examples use the same HTML coding, only changing the CSS file. https://csszengarden.com/

W3C Sites: A collection of really inspiration sites at https://www.w3csites.com

CSS Play: A bonanza of CSS menus, photo galleries, and more. https://www.cssplay.co.uk

CSS Layouts: A collection of CSS-based page layouts. https://www.dynamicdrive.com