Most people that I've taught CSS actually have a pretty simple time of it once they get the basic concept down.
At its core, CSS positioning revolves around the DIV tag. DIV is short for DIVIDER, and the DIV tag does what that name implies...it divides the page up into a series of boxes. CSS-P is simply the way to define the properties of those boxes...width, height, background colors, positions relative to each other or the browser window, even whether or not you want to stack them on top of each other. CSS positioning is simply the art of stacking boxes.
My personal method for page design is as simple as it is old fashioned. I figure out what I want the page to LOOK like first, and then sketch it onto a piece of paper (you can prototype any way you're comfortable with, but I prefer paper). Too many people get this step backwards. They want to jump into the CSS, start coding the look of the page, and complain when the resulting look isn't as professional as they'd like. Design first, THEN figure out how to make that design real through CSS. When the prototyping is done, I take a few copies and start carving the design apart by pen, dividing it into it's element boxes. When I come up with a box design that will allow the structure I want, I give each box a name and work out the basics...i.e. "Box A holds the header logo and is 768 pixels wide. It's at the very top of the page and should be 90 pixels tall." That way, when I start writing the initial CSS I'll already know what elements I need and roughly what its properties should be.
As to the learning curve, all languages have learning curves so there will be some trial and error, but I have yet to meet one developer who didn't think that the CSS transition was worthwhile after completing it. That said, I completely agree that the W3 CSS docs are horrible for beginners. While there may be
http://www.w3.org/MarkUp/Guide/Style">some reasonably written tutorial content on their site, it certainly isn't a great place to start. It's references are better suited to people who have a handle on basic CSS and are looking to improve their knowledge.
One resource that I recommend is at W3Schools:
http://www.w3schools.com/css/. If you're not familiar with it, W3Schools has some of the most approachable CSS tutorials on the Internet. While there are a lot of great resources, they'd be the first I'd recommend checking out. You'll have to ignore their constant attempts to sell you one of their certifications, but since that's the only cost to access their high quality tutorials, it's worth it.
As for hacks to deal with browser incompatibilities, I recommend first looking at
http://www.quirksmode.org. This is the personal site of an extremely experienced CSS developer, and one who hates hacks. Rather that show you all the ways to break the rules to fix browser bugs, he shows you how to adapt your designs to work in all browsers AND validate when they're done.
http://www.alistapart.com also has article archives covering most common CSS issues and non-hack ways to work around them (it's also a really great web resource in general).
As to true CSS hack sites; there aren't any good compilation sites, but a quick Google search typically brings up dozens dealing with just about every specific problem you could conceive of. One that popped up was
http://www.sitepoint.com/article/browser-specific-css-hacks, which covered the most common workarounds in a short and easy to read tutorial.
And if you really question the value of CSS, take a look at
http://www.csszengarden.com. As you click through the designs, realize that NOTHING in the page is changing other than the called CSS file. It really shows off the power and flexibility of CSS better than any other site on the Internet. Just to show you the practical value of this sort of thing, I personally have clients who want to redesign their websites once a year or so to keep them "fresh". I have clients with thousands of pages who have told me repeatedly that other web developers want thousands of dollars to redesign their site and rebuild it with a new design, and that the process would take months. I charge existing clients $499, take less than a week, and do it by updating a single CSS file. I turned these people into lifetime clients by offering them a service that nobody else wanted to offer (complete separation of design and content) at a price that nobody else was willing to match.
Printer-friendly format
Email this thread to a friend
Bookmark this thread
(1000+ posts)
Send PM |
Profile |
Ignore
