What is Digg?Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
49 Comments
- seanmc303, on 10/10/2007, -1/+33Key number 7. For your own sanity have your first include be a CSS reset file. Cross-browser support is a pain without one of the many CSS reset files out there. I like the Yahoo's, but I'm sure there are plenty other great reset files out there.
http://developer.yahoo.com/yui/reset/ - DeathJux, on 10/10/2007, -6/+28I just use * {margin: 0; padding: 0}
- LucasVB, on 10/10/2007, -0/+12Good luck with your ***** up form widgets.
- jonathansnook, on 10/10/2007, -0/+11yeah, I'm on dreamhost which despite it's reputation has been solid for me, even through previous diggs. A support request is in and I just hope they're in the midst of rebooting this machine. or something.
- spicytuna, on 10/10/2007, -3/+13it's up again...
but just in case:
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.
Box Model
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
Floated Columns
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.
* Floatorial
* Clearing floats
* Faux Columns
* Creating Liquid Faux Columns
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.
* How to size text using ems
* Elastic Design
* Fixed or fluid width? Elastic!
Image Replacement
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
Floated Navigation
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.
* Listamatic
* Sliding Doors
Sprites
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.
* Fast Rollovers without Preload
* CSS Sprites: Image Slicing's Kiss of Death
* Reducing HTTP Requests
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. - donnyburnside, on 10/10/2007, -4/+13I'm pretty sure anyone with the teeniest bit of CSS knowledge does too.
- ttfadia, on 10/10/2007, -0/+8I actually find the reset stylesheets and broad selectors like DeathJux's to be too destructive. Sure, some things like lists (where different browsers use margins or paddings) I reset, but I otherwise code normally without any trouble.
- estvir, on 10/10/2007, -0/+6And I'm pretty sure anyone with slightly above a 'tiny bit of CSS knowledge' doesn't because of how bad it can be.
- remiprev, on 10/10/2007, -0/+6Finally, a web design article that covers the "basic stuff" -- which some people who are attempting to code CSS layouts still don't know.
- darkfate, on 10/10/2007, -0/+6I'm pretty sure Jonathon Snook has good web hosting. I guess that influx killed it though.
- snarkleclackers, on 10/10/2007, -10/+16CSS KEYS!? Someone call the MPAA!
- darlyn, on 10/10/2007, -1/+5Got mirror?
- superwick, on 10/10/2007, -0/+3and your income as a web developer/designer
- JerzyBricklayr, on 10/10/2007, -0/+3counterstrike source???
- Ngai, on 10/10/2007, -0/+2Box Model, Floated Columns, Sizing Using Ems, Image Replacement, Floated Navigation and Sprites
type these in Google and you'll learn what they are...
no mirror in site.. - djm101, on 10/10/2007, -0/+2and watch your hit counter plummet.
- HigherLogic, on 10/10/2007, -1/+3The * {margin:0;padding:0} completely destroys form elements, which is probably why someone with a "tiny bit of CSS knowledge" would use it. Stick with a master/template stylesheet instead: http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/
- inactive, on 10/10/2007, -0/+1huh? duggmirror works..
- nhassan, on 10/10/2007, -1/+2think you can copy and paste the post or something while we wait?
- Drewsky, on 10/10/2007, -0/+1wow there is some great resources in there that are worth reading. I really like explanation of the box model, clears up alot of things with css.
- leobaby, on 10/10/2007, -0/+1Are there any visual css editors out there? I find it hard to believe that in 2007 we are forced to edit text files by hand to create web pages.
- kevisazombie, on 10/10/2007, -0/+1you are correct. They can actually handle 100% height. and are still widely used.
- Dracos, on 10/10/2007, -1/+2Yay, a web design article that isn't a random collection of pretty, sparkly, screenshots. There's actually some technique here!
//Dugg for showing the n00bs a glimpse behind the curtain - HigherLogic, on 10/10/2007, -0/+1Yeah, kind of like hiding stupid comments like this. Simple!
- spicytuna, on 10/10/2007, -0/+1I think that's what Mongoose meant by 'hosting that's worth a damn'
- thailand1972, on 10/10/2007, -0/+1For me, it was understanding the float (left / right), then clearing of floats that was the moment I knew I could be weaned off tables.
- kickarse, on 10/10/2007, -0/+1Firebug will allow you to see in real time the changes in CSS and HTML. Firebug is a Firefox extension.
There's also NVU Editor, which is free and WYSIWYG. - xprole, on 10/10/2007, -0/+0d
- AK444, on 10/10/2007, -0/+0You can also use http://freevideolectures.com/webdesign.html video lessons
- Daniel591992, on 10/10/2007, -2/+2http://duggmirror.com
- crossers, on 07/16/2008, -0/+0yes really they 6 keys for understanding modern CSS!
http://www.shpe-sac.org
http://www.ocflex.com/
http://www.trgovinca.org
http://www.chasr.org/ - masskurec, on 03/04/2009, -0/+0very nice tutorial
http://xptweak.net - thewoodman, on 10/10/2007, -0/+0Useful!!! However, what exactly "What do you got?" means is beyond me! Awful English!
- ndteja, on 10/10/2007, -0/+0Absolutely fantastic source of info. I have always struggled with float, but this explains a lot. I have been trying to use it without totally understanding it... will definitely pass this on to my colleagues.
- benkhoo, on 10/10/2007, -0/+0This article was actually what i was looking for. Great as a beginners guide to introducing CSS.
- XHashmeerX, on 10/10/2007, -0/+0Unfortunately, this article is totally useless without those bullet's linked to their article.
- mkenneth, on 10/10/2007, -0/+0I like this a lot
- nunzi, on 10/10/2007, -0/+0Good thinking, and when your clients enter their basic HTML into the CMS you built for them, and say "why do my bulleted lists look all screwy, where did the bullets go", along with the plethora of other complaints you'll hear, you can explain to them that it's because you don't really know what you're doing. But, you'd know that if you built CSS for clients, instead of just playing around for (with?) yourself.
- xxNIRVANAxx, on 10/10/2007, -2/+1*sigh* look up.
- xprole, on 10/10/2007, -1/+0ad
- michaelinnotts, on 10/10/2007, -3/+2Why digg down the man who speaks the truth?
- AlexFerny, on 10/10/2007, -5/+3Stick with just not supporting IE which does not follow W3 guidelines
- cVioletteRun, on 10/10/2007, -2/+0ouch, down already. quick, everyone digg a 404 error!
- cpk121, on 10/10/2007, -3/+1DuggMirror, Coral Cache, and Google cache all missed it
- cpk121, on 10/10/2007, -3/+0"Got mirror?"
Google cache, DuggMirror, CoralCache, etc. missed it.... - Pottypotsworth, on 10/10/2007, -4/+0i agree with the topped digger, just hide everything from IE. Simple!
- flyingv603, on 10/10/2007, -7/+2I love CSS
- xxNIRVANAxx, on 10/10/2007, -8/+2I just found their number: 09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0
- Mongoose, on 10/10/2007, -15/+8Down after 44 diggs? How 'bout #8: get hosting that's worth a damn.
© Digg Inc. 2009
— Content created and posted by Digg users is