digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

A Handy Little CSS Cheat Sheet

lesliefranke.com — Great for CSS newbies, especially the diagram on the box model. A good reference while you get your style feet off the ground.

Bury
show profanity settings
expand all
  • Harmless, on 10/12/2007, -1/+6That's nice. Very concise and well organized. Thanks.
  • danlangevin, on 10/12/2007, -30/+1nice, but most of these browsers are used by very few people? what about IE 6 & 7, Firefox, Opera 10, etc?
    • TenebrousX, on 10/12/2007, -3/+16learn what you are talking about before commenting...
    • spindrift, on 10/12/2007, -14/+0What the hell?
    • phaed, on 10/12/2007, -8/+1wtf?!?!?
    • armbar, on 10/12/2007, -1/+2Opera 10? You must be really on top of things. I get the weekly builds, and I'm still on 9.10.
  • theskullboy, on 10/12/2007, -0/+11Very convenient. Mad props to whoever did this.
  • cliner, on 10/12/2007, -32/+3I thought you meant Counter Strike Source. -_-
    • tacooo, on 10/12/2007, -4/+27Well then you'd be a retard.
    • Strabo4, on 10/12/2007, -14/+1Me too. And then I noticed the programming label.
    • Pedlya, on 10/12/2007, -12/+2Me too ;__;
    • rynoon, on 10/12/2007, -0/+6Nobody cares that you're illiterate. -_-
    • bmartin, on 10/12/2007, -0/+5That's three more blocked retards for me.
    • LabThug, on 10/12/2007, -1/+1"Me too"

      AAAARRRRGHHHH it's "AO Friggin' L" all over again. Make it Stop. Won't someone please Make it stop!!!!
  • fearofcorners, on 10/12/2007, -1/+6It would be good to include the order of elements in certain shorthands like font:, margin:, padding:, etc. (ex. padding: top right bottom left) I forget those all the time but I feel that those shorthands are necessary to keep my code to a more reasonable, readable size.
    • crawfishsoul, on 10/12/2007, -0/+4For border, padding and margin, just remember "TRouBLe". Top, Right, Bottom, Left.

      That's also clockwise.

      I don't have any easy way to remember font: other than repetition
      1. font-style
      2. font-variant
      3. font-weight
      4. font-size
      5. font-family
    • armbar, on 10/12/2007, -0/+1crawfish, don't forget line-height as well.

      Order: font-style font-variant font-weight font-size/line-height font-family

      Ex:
      font: italic small-caps bold 1em/1.4 sans-serif;

      If line-height doesn't have a unit, it's used as a multiplier.
  • cliner, on 10/12/2007, -11/+3@tacooo

    Or a gamer. Ass.
    • estvir, on 10/12/2007, -1/+16Not being able to use the reply button isn't helping your "I'm not a retard" argument.
    • cliner, on 10/12/2007, -7/+2What is with the Dig community? Everyone is out for blood, sheesh.
    • mikev, on 10/12/2007, -0/+9I don't know what's with the Dig community, but I have a pretty good idea about the digg community.
    • dygel, on 10/12/2007, -0/+2Maybe gamers shouldn't be reading headlines in the Programming category, then.
  • dragonbladev, on 10/12/2007, -3/+5I'm a css newbie... and well... i don't understand this cheat sheet...
  • subxero37, on 10/12/2007, -1/+5Why no selector help, like for operators like > , + and []? Those are some incredibly useful selector operators, IMO, whether or not IE supports them. (It's always good to program for IE and Firefox both, but some hacks for IE are so dirty that it makes you want to rip your hair out.)
    • xmilky, on 10/12/2007, -0/+0I think it's more important to tell newbies about the common mistakes. Unlike IDs, class selectors may not contain underscores (instead use minus signs), and such stuff...
  • muffins, on 10/12/2007, -6/+2Oh joy another CSS cheat sheet.
  • TheBlackNinja, on 10/12/2007, -0/+1This will help if I try to decide trying to learn CSS again. I mean, right now I have no use for it, so I just gave it up, but this is very helpful.
  • CoffeeNut, on 10/12/2007, -1/+4Somewhat ironic, don't you think, that this page uses mostly tables instead of CSS for layout!
    • armbar, on 10/12/2007, -0/+1Not really, since most of it is being used for the data. It's just 30% evil.
  • Skotasma, on 10/12/2007, -0/+0It's kinda neat, but I don't think it's too good for newbies and others shouldn't need most of that anymore.
    I rely on copy/past and selfhtml.org - sorry, guys, basically only German.
    The best way would be to make one for yourself - so you got on it what YOU need and comments you understand.
    What I'm missing most about this one is the IE-Box Model Problem. What good is the pic of the box model if it doesn't work like this for sure.
  • keikun, on 10/12/2007, -1/+2PNG version for those who want to save it on their harddrives:
    http://www.ilovejackdaniels.com/css_cheat_sheet.png
  • FunnyStuffff, on 10/12/2007, -12/+0dont cheat

    -- Tony
    -- http://www.ashareware.com
  • rynoon, on 10/12/2007, -4/+1Cute site. Now...

    Behold the mother of all web references!

    http://www.w3schools.com/
  • coditza, on 10/12/2007, -0/+0I saw a big bounch of "cheat sheets", from css to c++, a couple of years ago. I have a couple of them printed somewhere.

    I don't get why people makes these so small. Make them bigger so I can print it on A3 paper or bigger and hang it on a wall. That will be usefull.
  • tlink211, on 10/12/2007, -0/+1Link to a PDF of the sheet in the original article...and some others.
    http://lesliefranke.com/files/reference/
  • planetmatt, on 10/12/2007, -0/+0I think thats great but I would add that an ID can only be used once per page whilst a Class can be given to multiple elements as the difference between the two isnt stated and CSS beginners can easily get the two confused.
  • MWeather, on 10/12/2007, -0/+0Nice cheat sheet, but it's not going to help CSS newbies much. Knowing how CSS is supposed to work is one thing, knowing how it actually works is quite another. If you're new to CSS, read up on how IE messes up CSS. A cheat sheet for THAT would be very helpful for newbies.
  • SpeKopuZ, on 10/12/2007, -0/+1it is good for newbies ;) but you must know a little bit about how css works and what it is...
  • brian4572, on 10/12/2007, -1/+1They are not perfect, they have 7 errors

    http://validator.w3.org/check?uri=http%3A%2F%2Flesliefranke.com%2Ffiles%2Freference%2Fcsscheatsheet.html

    Nonetheless, I digg, very useful, very handy.
    • armbar, on 10/12/2007, -0/+2It's actually only 2 errors (arguably 1, since the other is part of an example), but the ridiculously dumb W3C validator counts errors multiple times. Also, you should get off the "it doesn't validate" train pretty soon.
  • Veign, on 10/12/2007, -1/+1Check out this one too:
    http://www.veign.com/downloads/guides/qrg0007.pdf
  • NiGHTSChao, on 10/12/2007, -0/+1Is there like a Adobe Illustrator and Photoshop cheat sheet, that has like a list and kinda short detail about all the tools?
    (illustrator, really really need a cheat sheet)
  • irvin666, on 10/12/2007, -3/+0I thought this was talking about CSS keys, the ones you use for dvd encryption

    silly me =P
  • srtech, on 10/12/2007, -0/+0More CSS cheatsheets:
    http://techcheatsheets.com/tag/css/
  • abramburel, on 10/12/2007, -0/+0really really handy ... thanks for sharing it
  • shaiba81, on 11/25/2007, -0/+0thank you for this useful URL http://wslaat.com
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.