More Eric Meyer on CSS

Eric A. Meyer

Mentioned 2

Offers ten projects that describe how to incorporate CSS into a Web site, covering topics such as styling a photo collection, positioning in the background, CSS-driven drop-down menus, and weblogs.

More on

Mentioned in questions and answers.

I am a programmer doing web development for over two years now. Even though I’ve been doing front end engineering for the past two years I don’t think I have done it the right way
For instance:

  • I still do layout with tables and not with just CSS. I haven’t still found out a way to correctly present data aligned and tabular.
  • I don’t know the difference between display: none and visibility: hidden (well, I know it now. but there are many cases like- padding, margins, overflows etc)
  • I haven’t really followed the inheritance way to writing CSS. Almost every style starts with a # and not a class.
  • Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.
  • I don’t know what this picture in firebug is conveying (by the way, firebug is my savior. Life would have been impossible without Firebug)

alt text

  • Whenever layout’s in a mess I am tempted to use position:absolute. Invariably it ends up in a bigger mess.

I know I am doing a lot of things wrong(and I need to get it right) here but I manage to get things into place and somehow show it up, only to see it messed up in a different browser.

I don’t want do a primer on CSS or CSS for dummies. I know more than that. I want to learn CSS the right way. Focusing on problems like the examples I showed above and rectifying them.

Can you point me to resources or add common suggestions and tips used by CSS developers to get it right.

You could start by reading some good books on the matter. The ones of Eric Meyer are hands on and of very high quality. The other book that of which I learned a lot was the Zen of CSS design book.

And the rest is effort and practice. Be sure that you understand why something works the way it does, don't be satisfied with 'trial-and-error' css development.

Practice, practice, practice. You know what you don't know, and that is the key to success in my mind. Every project you do, try to improve your skills, and eventually it will become second nature to do it the right way.

Eric Meyer's Cascading Style Sheets 2.0 Programmer's Reference is a great resource to understand exactly how selectors and rules work, and serves as a great reference as well.

Some thoughts on what you posted.

  • A Master Reset style sheet will help with browser differences.

  • And Tabular data should use tables.
    It's layouts that should avoid table tags in favor of css.

for me, Pro CSS and HTML Design Patterns by Michael Bowers changed it all. no more endless trial-and-error, but problem - pattern - solution. indispensable.

Well the basics are quite simple, you should really get a hang of the quite easy if you've already don't some css coding.

The best practices, browser quirks, hacks and other sketchy stuff concerning crossbrowser layout is something else.

Here is my suggested reading list, all of them are on my bookshelf and certainly worth reading! If you ask me i'd say these are the book you should have read if you are a webdesigner.

Before reading JavaScript books, what is a good resource for learning HTML and CSS? I'm looking for material that will get me up to speed rather than specify every single compliance standard. So, concepts that are prerequisites for exploring JavaScript. I've done basic web development for about 6 months (HTML/CSS, ASP.Net) but my approach has been a top-down one - I've learnt from tutorials and code examples rather than books.

Many thank you's...

Designing with Web Standards by Jeffrey Zeldman and, Eric Meyer on CSS and, More Eric Meyer on CSS

Read all three of those (or any one) and you'll be rewarded with an excellent foundation in HTML/CSS.