6 Keys to Understanding Modern CSS-based Layouts
Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.
These are the six things that will help people get over the hump.
At the very core of it, is an understanding of the box model within CSS. Sure, you may know your margin and padding but what happens when elements start to interact with each other. Suddenly things that look good in one browser go all to hell in the other. Consistently in working with the box model comes from understanding the difference between quirks mode and strict mode. It's also a good idea to know how to hack it up for older browsers.
- W3C CSS2.1 Spec
- The Box Model
- Tantek's Box model hack
- Quirks mode and strict mode
- Activating the Right Layout Mode Using the Doctype Declaration
While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Along with learning how to float, you must also learn how to clear floats so that content that follows or backgrounds will appear correctly.
Sizing Using Ems
There are two different issues at play here when it comes to sizing with ems: fonts and layouts.
With fonts, Internet Explorer 6 and lower don't allow you to resize the text when specified using pixels (px). Those with vision issues may wish to set their font size larger in order to more readily read what you've written. Specifying your font sizes using ems has proven to be the popular approach to this problem. The importance of sizing text using ems is waning as users move on to better browsers.
Sizing layouts with ems can also offer up a whole other avenue of flexibility. When playing with text size, it can often throw an entire design out of whack. Styling elements using ems allow the containers of content to grow along with the text, maintaining the consistency of the design.
Boring text elements dont' excite us. We want to use lots of graphical flair along with gradients and glass effects. And we want to use custom fonts; fonts that browsers just can't offer us yet. Image replacement techniques allow us to replace the existing content-rich and SEO-friendly text with stylish images or Flash files with embedded fonts.
- Revised Image Replacement
Sums up most, if not all, of the image replacement techniques currently in use
- sIFR 2 with documentation and sIFR 3 is in development
If you've mastered floating columns, the other tricky piece to the puzzle and one that is heavily used, is floated navigation. The web-standards-lovin' folk love their unordered lists of navigation and there are a myriad of ways to style them up.
Like video games of yore, packing multiple images into one single image has become a popular technique to solve a couple problems. The first is CSS-based rollovers. More recently, it's been proven to be advantageous to combine multiple images — in particular background images used in image replacement techniques — into a single file. This reduces the number of requests your browser has to make, improving the time required to download all files from your server.
What do you got?
Of course, there's always more to learn and if you think there's a technique that you think is especially important for the beginner, be sure to add it to the comments.
mmm defiantly some links there worth reading and keep bookmarked for later reference, thanks for that.
Lots of resources worth checking out thank you. I hadn't even thought about liquid faux columns so a big thank you for that.
Great article Jonathan, as usual. The thing that I think causes the most problems to newcomers is cascade. I've seen folks use the most elaborate hacks and load of !important nonsense to circumvent such an easy principle. It's not that they don't get it, its just that they don't know about how cascade works.
You forgot about IE hacks! HTML Comments causing problems in some instances (last character repeat bugs) fixing problems in others (fixing foated images) setting height to 0.001% to stop things disappearing etc.
Also, the issues related to relatively positioned elements in floated containers, ie unclickable items etc.
Love the redesign btw, I haven't checked back here in a while!
All good points! But sometimes even the basic parts of CSS can be tricky for Web designers. I agree with Miha Hribar on the cascade including specificity is hard for new CSS users to use well.
Let's not forget liquid layouts, which are still a bane for most people. I keep a lot of resources at Liquid Designs for anyone who needs help.
How about IE conditionals?
Learning about those saved me from having to apply a million hacks to make IE happy within my base css file. Now I can serve IE its own css file if it needs special attention.
A great set of links, but I agree with Miha that you're missing what I think is the most crucial concept necessary to "get over the hump", and that's cascading/inheritance. (OK, maybe the box model is more important.)
I mean, it's called Cascading Style Sheets, and yet how many stylesheets have you seen where the author has created an endless number of class specifications, each of which sets the same font-family, font-size, etc., each delegating to it's own small set of elements.
I think most CSS "dabblers" don't understand the power of the various types of selectors (or they're still afraid of sketchy browser implementation), and they don't understand how to utilize cascading. Those are the things necessary to get over the hump.
This is a great reference article, thanks for writing it.
One thing that comes to mind is the idea of false columns, that's something that continues to come up when I'm teaching new people about CSS.
I've never seen (nor thought of) anyone doing their rollover images in the way mentioned. A technique I used to address the issue is to put the "hover image" as the background of the containing list item, and then the "off image" on the a. Upon a:hover, background:none.
Seems like it would be a pain to setup every button like that, especially if they have unique text. Good post.
Great article, and yes alot of great resources in there. This is the great thing about programming, is finding more efficient ways to do things that your currently doing in a less then optimal fashion.
Sprites, takes me back to the Commodore 64 days and full screen scrollers. :)
Ah, well, a great article! If only I had found one of these before I was finding all of this out by trial-and-error.
Still, some of these links did provide me with something new to work with!
Article was a bit above my head, but I understood enough of it to learn that I should brush up on my CSS skills!
bad link? "Listamatic" goes to http://www.alistapart.com/articles/fauxcolumns/
Thanks. I haven't designed a site in years and now I'm having to relearn all this new css layout. The article provided a lot of help to me....but I still miss tables....
Very cool stuff
Some good links there! Well worth a read, nice artice.
@Joseph Oster: thanks. Fixed the link to Listamatic.
Some good info here for dealing with CSS. Marked for reference. Thanks!
Great article. I totally agree there is a "hump" in the learning curve right before it all comes together in peoples minds. I like that you mentioned DOCTYPE as well. People can avoid a lot of confusion and achieve consistent behavior if those are understood.
Wow very nicely written :) Going to share this with my readers on P2L, thanks!
great resources for css beginners and advanced too. I bookmarked the page ...I know I will need the tips sooner or later. Cheers,
I have a tip that's more geared towards effective layout. It's a mash up of Jason Santa Maria's gray boxes wireframe approach and traditional newspaper column layouts, but I basically made a fluid layout with a transparent PNG grid overlay. It knocks out the links when viewing, but during production, it's okay.
Warning not suitable for IE viewers. :-) Best for FF. (It's just production stuff!)
Go ahead change the size of the window and watch the scaling of columns and elements:
Same with wireframes:
One technique I myself employ each and every time, is the global whitespace reset..
Simply put, start off your stylesheet at the very top, like this;
The asterisk (*) is a universal selector, ie. affecting every single element throughout your (x)HTML.
What it really does is zeroing out differences between browsers, and keeping everything in check.
Of course, you'll have to apply margin, padding and borders yourself, to elements that'd otherwise have these properties set by default, eg. paragraphs, lists and especially the body tag itself (opera applies padding, IE margin).
Get used to this method, and you'll quickly become a master of the grid, not a slave ;)
<h3>When a (Microsoft) Problem Comes Along, You must ZOOM it!</h3>
Many, many coded designs ago, I too discovered the virtues of 'overflow: auto' with regard to clearing floats. Of course, setting width or height is often not a very good way to get IE6-and-below to clear the float, especially when the element in question has padding. Luckily, though, Microsoft has given us an out by providing conditional comments. Now, I just have an IE6-and-below style sheet with a few tweaks in it.
The best part of this scheme is that I can use the MS-proprietary CSS property 'zoom' in the IE style sheet. 'zoom: 100%' bestows 'hasLayout' on any element to which it is applied, which fixes a whole subset of rendering issues in one fell swoop. Parent elements expand to clear floated children; floated anchor elements containing images set to 'display: block' don't get all wonky; list items using background-image bullets don't flake out; dogs and cats, living togeth- well, you get the idea.
I'm sure there are edge cases where 'overflow: auto' and/or 'zoom: 100%' aren't suitable. I just haven't found one yet, after coding dozens of designs.
Floats take a little getting used to, but I wouldn't do it any other way now that I've gotten through learning it. I'm also a big fan of the sprites and image replacement techniques. Again, a bit tricky to get used to, but once you do... look out.
Forms are teh sux.
HTML forms are the bane of my CSS existence.
I'd have to agree with most of the people on here about conditional statements, I don't think they're as vital as the six categories mentioned here but with CSS3 getting closer and closer who knows what things will have to be kept away from IE to keep things sane.
They definitely are a major help already.
Great article, I've mined it for whatever I can learn.
Nice article, will certainly come in handy.
Great read. I've bookmarked this article. Thanks for putting things together.
All well put Jonathan.
I could not agree more with the â€œcascadeâ€ issue. It is the main bottleneck to rookies. I will have to add to that the semantic meaning to markup and CSS. It is hard for beginners to grasp the value of semantic meaning to code. Same applies to server side code and even in SQL statements.
Nice article. This is a great list for beginners and experts!
It's a good sensation...
I mean: this is my (and many other's) normal way to act and think.
Well, not in all points but most of them.
For months - no - years! - many people keep on thinking 'bout a different web.
What once was weired, today is normal!
Yes, I have a good feelings about that! :D
Thanks for these pointers. Its good to get an overview of doing things the CSS way.
Great article. Thanks!
What an amazing article! I was searching the web for an article like this, and a couple of hours later this one cropped up on my RSS feeds. Crazy luck! Thanks very much Jonathan.
good article. but in my opinion it's now obsolete to consider quirks mode (nobody uses ie<6 nowadays)
Great list for novice as well as for professionals too
I'm glad to see many designers / developers around the world acknowledge the importance of CSS / Web Standards.
It's just sad that in my part of the world, people don't care! :) Well I do, just bought a SitePoint book on CSS and it's great!
I look forward to learn more from you.
btw, are you ever going to STYLIZE the "Add my comment" button? ;) To match it with the site's beauty.
Great post. Your list was most comprehensive.
Great roundup of CSS goodness. I just got stymied from a custom component I had written for a customer. Turns out that my doctype had been stripped out and replaced with a doctype that rendered my code in quirksmode. Truly evil.
Clearfix is what I use for handling floats. Its by far the easiest and best cross browser approach to handling the clearing of floats I have seen. I know many people will use various "overflow" properties to pull off the clear, and that is great so additional classes (i.e; class="clearfix") doesn't have to get amended to various containing divs, but I have found using the overflow approach can have its cross browser pitfalls.
I'm an aspiring web developer (pretty young too - not even in college yet) and its sites like these that I love to read. Keep it up Snooks.
I also think the Sitepoint book is great.
Thanks for sharing this nice reference article. I tried that Liquid Faux Columns technique and it works perfect!
Ya the liquid faux columns worked great for me too!
I dream of a day when there will be solid standards across browsers, I just hope google Chrome doesn't have its own CSS nuances.
I agree with both James and NewYoka that the liquid faux colomus article is great. I have been looking for this for a while now and finally found it :)
Great reference article, thanks for writing it. I love the fast rollovers article. Bookmarked!
Floated Navigation, there is a bug in ff 2...
I am using these techniques in almost every project, especially floated list and sprites/image replacements for navigation... nice list :)
Great list, I bookmarked a few that will be really helpful in my work. Thanks.
Great post! Really informative post. Thanks for sharing with us.
These are great techinques I have been using them for a little bit now. The floated list is a great tool as well as the replacements for navigation, thanks so much for your valued work !
css examples - www.cssportal.com
Great reference article, thanks
Thanks for the helpful information
Outstanding article sir!Bookmarked cheers.
Ð¯ Ð½Ð¸ÐºÐ°Ðº Ð½Ðµ ÑÐ¼Ð¾Ð³Ð»Ð° Ð²ÑÑ‚Ð°Ð²Ð¸Ñ‚ÑŒ Ñ€Ð¸ÑÑƒÐ½Ð¾Ðº Ð² ÐºÐ¾Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¹. Ð’ÑÑ‚Ð°Ð²Ð»ÑÑŽ ÑÑÑ‹Ð»ÐºÑƒ Ð½Ð° Ñ€Ð¸ÑÑƒÐ½Ð¾Ðº Ð° Ð¾Ð½ Ð½Ðµ Ð¿Ð¾ÐºÐ°Ð·Ñ‹Ð²Ð°ÐµÑ‚ ÐµÐ³Ð¾ ÐºÐ°Ðº Ñ€Ð¸ÑÑƒÐ½Ð¾Ðº. Ð§Ñ‚Ð¾ Ð¼Ð½Ðµ Ð´ÐµÐ»Ð°Ñ‚Ð¬?
Ð¤Ð¾Ñ‚ÐºÐ¸ Ð±ÐµÑ€Ñƒ Ð¾Ñ‚ÑÑŽÐ´Ð° - images.yandex.ru/yandsearch?text=snook.ca