How I may help
LinkedIn Profile Email me!
Call me using Skype client on your machine

Permalink CSS (Cascading Style Sheets)

Here are notes on how to figure out CSS to format web pages. In one page are practical advice, links, and examples.

The layers presented by internet browsers (user agents):

  • HTML — the structure layer
  • CSS — the presentation layer on this page
  • JavaScript — the behavior layer


Topics this page:

Site Map Go to a list of all pages on this sites
About this site About/Help on this site
First Topic

CSSPlay lists experiments with CSS

Transcending CSS: The Fine Art of Web Design (Voices That Matter) (New Riders, Nov 15, 2006) by Andy Clarke and Molly E. Holzschlag has a lot of "wasted" space, extraneous photos, and chatty text. But all that makes sense because in this book CSS is presented in the context of excellent web design. Like a conversation with an eccentric artist, there are enough gems of wisdom among the cryptic text and images that makes the exchange interesting, such as its comments on CSS3 support by Firebox 2 and IE7.

Go to top of page Summary: What Is This?

Go to top of page Advice on Getting Started With CSS

  1. Do some reading before diving into CSS. You need to be prepared for quirks, especially with IE browsers.
  2. Examine the templates that already incorporates the various hacks to work around bugs in various versions of internet browser user agents. It is not cost effective to go through extra trouble to accomodate those who ignore the security threats that have forced almost all computer users to upgrade to versions of operating systems that have more modern (and less buggy) internet browsers. But to accomodate the needs of mobile internet phones, we need to make web pages flexible. For example, the internet browser within Microsoft Pocket PCs identifies itself as "IE4".
  3. Take a picture of websites that you like. My list of sites I covet. Save the page as "Complete" so you can analyze it later, even if the site is changed.
  4. Look through websites in my gallery to get an idea of what is possible visually. Make notes of page design elements you want and don't want in your website.
  5. Arrange for tutoring before you need it. I found a tutor by putting ads on Craigslist and various boards. I also looked through galleries of CSS work and contacting the person who created the format I liked the best. We installed VNC and Skye VOIP so we can see each other's desktops and talk at the same time.
  6. Mock up the "look" you want by moving elements around. If you're comfortable with a graphics layout program such as Photoshop, Microsoft Powerpoint, or Visio, use it so you can save various versions. If you're a kinesthetic learner, have individual elements you want on paper, cut out them out and move them around the paper as if you're arranging furniture in a room. Take photos of various arrangements. The advantage of using Photoshop is that it has transparaent layers so that in the mock-up, you can note commonly used position locations such as column locations (4 column designs need them).
  7. Work first on positioning, then on fonts and colors. Work outside, in; top, down. This way, you can catch unintended effects of cascading as soon as it can be observed.
  8. Resist the temptation to go back to using tables to layout pages. Separate content from presentation. Know The Meaning of Semantics Remember that tables for layout is stupid.
  9. When debugging CSS, make only one change at a time. If you approach your time learning CSS as an experiment -- a learning process -- you'll be less frustrated with the journey.
  10. Backup often. Every time you get it working, It helps to use a text editor that saves changes incrementally so that you have an unlimited number of undos. But even then occassionally zip up file sets to a different (preferrably sequential) archive file name.
  11. Work to a list of what you want to fix or what you need to learn. Examples: A). Fix floated images that "stick out" of the bottom of previous div elements B). How do I align text vertically within its box?
  12. Keep a diary of what you tried and the identification of the backup file associated with each variation.
  13. Test each change to see what happens.
    Expand and contract the window to see if the text flows the way you want.
    Enlarge and reduce font sizes.
    If your site supports it, switch css files to set different color schemes.
  14. Validate your html and css files to spot errors using these debugging tools
  15. Look at the page in various versions of several other browsers. Code first within a standards-compliant brower like Firefox, then add work-arounds for Internet Explorer browsers.
  16. Backup often. Better yet, get a text editor that saves every variation automatically.
  17. Did I mention the importance of backing up data often?
3 column layout examples:

Go to top of page List Selectors

Go to top of page The Looks I Covet

Go to top of page Templates and Working Examples

Go to top of page CSS Galleries

Websites Laid Out Using Stictly CSS

Go to top of page What I Learned from Studying Other Sites

Go to top of page External Style Files

Go to top of page Block Names as Design Elements

Go to top of page Rules for Different Media

Go to top of page In-line Styles

Go to top of page Declarations

Go to top of page Important

Go to top of page JavaScript Override CSS

Go to top of page Cascading Order and the !Important Directive

Go to top of page Selector ID and Class Names

Go to top of page Default Style Reset

Go to top of page Sprites, Concatenation, Hover Rollovers

Go to top of page Tabs For Navigation and other jQuery Effects

Go to top of page Rounded Corners with Border Radius

Go to top of page Styling Forms

Go to top of page Movin' on up (to XHTML Strict)

Tutorials on mixing CSS and tables Here is a true ecumenical service!

The CSS Table Gallery provides examples of mixed use CSS with tables, submitted by designers (78 at last count),

HTML Code Tutorial does a good job explaining.

MaxDesigns provides simple and clear examples for cross-browser complexity.

MaxDesign's Lisamatic links to many variations on lists.

Go to top of page Tables

Go to top of page Background Images

Go to top of page Text Effects

Go to top of page Clearing Floating Divs

Go to top of page The CSS Box Model

Go to top of page CSS Tag Reference

Go to top of page Cross-Browser Issues

cross-platform, cross-browser font size issues and accessibility by Mark Pilgrim

Go to top of page Compatibility Among Rendering Engines

Go to top of page Readings

Set screen

Go to Top of this page.
Previous topic this page
Link to Performance Engineer RSS 2.0 XML feed Atom 1.0 XML feed feeds
for Performance and Capacity Engineers...

How I may help

Send a message with your email client program

Your rating of this page:
Low High

Your first name:

Your family name:

Your location (city, country):

Your Email address: 

  Top of Page Go to top of page

Thank you!

Human verify:
Please retype:

Visitor comments are owned by the poster.
All trademarks and copyrights on this page are owned by their respective owners.
The rest ©Copyright 1996-2011 Wilson Mar. All rights reserved.
| | | |