learning css more and more professionally

Question

I develop websites since last two years now and I have hard time learning CSS (just spend a whole day creating a login box like twitter...). And sooner or later I fall back to table layout, and get things done (for almost everything I dig deep in to other's source code and Google like hell... but I wish I know how to do it the way I normally figure out my programming problem instead of Google all day...).

And even after sometime if I achieve goal to create a perfect layout, and go back to IE for testing, everything is messed up.

I am the only guy developing it, so normally 70% of my time spend on design and 30% on programming.

I think I need to learn something more so that I spend less time adjusting my layouts and more time program it.

How you all programmer+designer work? And, how to master CSS?

Answer 1

I had similar issue 2 years back. I read the CSS 2.1 spec (free download from W3C) - it was hard read - and load of back and forth with FF to test but it really solidified my CSS understanding (that coupled with projects involving CSS shortly later). Most of marketed CSS books are too practical to get a deep understand (that you can apply freely to your own concepts)

Answer 2

css is hard as hell, so don't expect something magical; a thing I would suggest is wireframing: http://articles.sitepoint.com/article/wire-frame-your-site

Answer 3

I've been doing web work for 12+ years. I lived through table layouts, frames, DHTML, XHTML, CSS, Ajax, ... I remember the first time I saw CSS, I thought "WTH is this mess? I'll never need this." A year later I found myself learning it, and indeed you can do some really powerful things with it. But to learn in and learn it well, it will take time and dedication.

A few hints, use a CSS reset like Eric Meyer's. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/. That will neutralize a lot of browser-specific formatting so you're starting off with a clean slate but not as much overhead as other resets.

Make sure you have a well formed HTML/XHTML document, with the desired DOCTYPE at the top. Different browsers will render pages differently according to different DOCTYPEs.

CSS is also a different way of thinking. Whereas before you maybe had a graphic positioned in this block, suddenly you're thinking in terms of layers and backgrounds. Maybe the graphic isn't in a block at all but has padding and a background image itself. It takes time to see things differently.

And finally, I'll admit after all these years I'll still revert to tables to layout most of my forms. CSS is great, but it's not the holy grail. Be practical. You might want to watch the first portion of http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4 where Crockford outlines a bit of history for these web standards such as HTML and CSS and what he sees with issues with them.

Answer 4

You should check out The Opera Web Standards Curriculum. There are some excellent articles on CSS. At least read Chris Heilmann's Introduction.

Answer 5

How you all programmer+designer work?

When working with CSS, I find it is best to design and build the site first for a standards compliant browser (My preference is FireFox). Then, when you have it looking right in that, check it for Internet Explorer and other browsers.

For a design of any complexity, unfortunately, there will be time spent with multiple browsers open fixing a rule until it is consistant.

And, how to master CSS?

There are several improtant things to wrap your head around that will make your CSS life easier: The first I would learn is the Box model. That's the official W3C article on the subject, which is quite long, so I'll include an image below as well, which simplifies it a bit:

It's important to note that browsers calculate this differently.

Once you know what is causing things to size themselves, layouts should be easier to achieve in the same style as tables.

The second that helped me wrap my head around what was going on was specificity This article helped me a lot with working this out. The essential summary is that each type of selector (element, class, id) has a weight attributed to it and if an element has a css value with a higher weight, then it will nt be overwritten.

#id 0,1,0,0

.class 0,0,1,0

p 0,0,0,1

1,0,0,0

So, it doesn't matter what your css files say, an inline style gets priority. Example:

a {color: red;}                                               (0,0,0,1)
.class1 a {color: blue;}         Overwrites red               (0,0,1,1) 
#id1 a {color: green;}           Overwrites blue              (0,1,0,1) 
#id1 .class1 a {color: yellow;}  Overwrites green             (0,1,1,1) 
#id2 a {color: red;}             Overwrites green, NOT yellow (0,1,0,1) 
#id1 #id2 a {color: black;}      Overwrites yellow and red    (0,2,0,1) 

I'd still read the article. Twice.

The third thing to learn is how to support previous browsers (like IE6) and the bugs with which they will plague you. I am a fan of this site: http://www.positioniseverything.net/ They cover, with clarity and solutions, a great many of the browser bugs you will encounter when implementing cross-browser support with CSS.

Some of the bugs you will likely encounter with IE6 are:

• The 3px float bug.
• The double margin bug.
• The peekaboo bug.

Answer 6

It was easier before the tableless school of thought. But then again, there were no tools like firebug.

Maybe you could practice controlling dom elements first then apply your skills to semantic markup.

Answer 7

I took this class online - http://www.sitepoint.com/courses/css-live

And it was amazing. It's pretty cheap and gives a very good understanding of CSS

Answer 8

Apart from the other great advice here, I've also found developing with the right tools a great help.

To start with, I find writing the CSS in an editor like Notepad++ can help, as syntax highlighting can pick up frustrating minor errors as you go.

I also use Firefox for initial testing, and ensure the DOCTYPE is set, as suggested above.

I also use an excellent Firefox plugin called Firebug, which allows you to inspect the DOM elements of the page and change their CSS in place for an immediate idea of how the CSS will look, amongst many other features.

Then I ensure both the HTML and CSS are valid according to W3C standards. This can be done online at http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ or via another Firefox plugin called Html Validator.

Additionally, I've found that when I want to manipulate a page in Javascript, I've found using the Javascript framework jQuery to be immensely useful, abstracting away from the HTML/DOM/CSS specifics and allowing well-tested cross-browser compatibility.

Maybe have a look at a CSS framework too. These have tried-and-tested CSS styles for many common layout situations. I've heard Frame is recommended, and looks good to me.

I found having a single large CSS file difficult to manage and read. But I was concerned that splitting the file into smaller parts (eg. one CSS file per page) would slow page loading. The solution was to use Minify. It allows CSS files to be served as a single file, as well as 'compressing' the result to remove redundant spacing etc. It's quite easy to use and also removes problems when browsers cache a site's older CSS files.

Answer 9

If you don't totally understand the langage of CSS, you will needlessly waste a ton of time. Programming is time consuming enough as it is!!

I don't recommend starting to learn CSS by visiting web sites. You need a solid foundation first. For that, I recommend CSS Mastery by Andy Budd. It's a quick read (read it cover-to-cover), and a good reference thereafter. There's an example in the book that could have helped you write that login form (in a very flexible way) in only 5 minutes.

Next you will need a CSS reset and base:

• YUI 3: CSS Reset
• YUI 3: CSS Base