79 Comments
- chris9902, on 10/11/2007, -1/+27I carve my code into rock with my fingernails. anything else is for big girly girls.
- daleeburg, on 10/11/2007, -4/+25notepad++ is the dope when it comes to coding anything.
- spoiled1, on 10/11/2007, -6/+25I got sick of reading a text-only version of the page.
Perhaps, it can be made easy to read if the author used a CSS style sheet behind the page. - KevinJB, on 10/11/2007, -0/+16Interestingly enough, if you look at the URL of the page, you'll see a part of the URL that reads 'textonly'. Wonder what it does?
( http://itwales.com/997814.htm ) - Buttercup, on 10/11/2007, -10/+25people like to use shorthand because it takes less time to type, and more importantly because it takes less time for the user to download...
also, everyone knows, everyone whos anyone uses notepad to write code. - inactive, on 10/11/2007, -2/+17I find Notepad++ or Aptana to be good for writing web application code, including CSS.
Oh hey, and its free. - screwzluse, on 10/11/2007, -4/+14meh, I used to use notepad but it's just too plain. If I'm not using dreamweaver, I'm using notepad2 when I'm using Windows. I love my color coding.
- Otto, on 10/11/2007, -0/+9>>>"Am I the only one who doesn't like using the shorthand for specifying all the "font" (and others) values in one line?"
Yes. The rest of the web design community thinks you're a tool.
Seriously, it makes way more sense to keep it all in one line. The only time you should be using the individual properties is if you are overriding only that property or if you're not specifying both the font-size and font-family. - HalFTW, on 10/11/2007, -0/+8http://getfirebug.com/
"Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page." - MrSunshine, on 10/11/2007, -0/+7A precaution to save bandwidth and not getting taken down by Digg visitors?
- dancerobots, on 10/11/2007, -1/+7and knowing is half the battle
- ext237, on 10/11/2007, -1/+6G.I. Joe!
- inactive, on 10/11/2007, -7/+12everyone whos anyone and uses a text editor uses textpad, not notepad
- daleeburg, on 10/11/2007, -0/+5My priceless resource:
http://lesliefranke.com/files/reference/csscheatsheet.html - rosefu, on 10/11/2007, -0/+4Run your style sheet through a CSS optimizer if you initially can't get out of the habit of doing shorthand CSS. Sooner or later you'll see just how much cleaner shorthand form really is.
http://www.cdburnerxp.se/cssparse/css_optimiser.php - Oatmeal, on 10/11/2007, -1/+5I already knew all of these, but it's still a handy resource for beginners.
If CSS articles with sensational titles are your thing , here's a few more:
5 time-saving CSS tips
http://mingle2.com/blog/view/5-really-useful-css-tips
The (only) Ten Things to Know About CSS
http://blog.jm3.net/2007/03/16/the-only-ten-things-to-know-about-css/
Everything you ever wanted to know about lists and CSS
http://css.maxdesign.com.au/listutorial/
Ultimate list of CSS hacks
http://centricle.com/ref/css/filters/ - BoomWav, on 10/11/2007, -0/+4CSS is cleaner and can be used on multiple web pages wich make your website lighter. It also give you the ability to change (for example) all the links in your page for green..
a {
color: #00FF00;
}
if you link this to your page, all your links in it will be green. Isn't it better then putting tags every times?
Be open minded.. check it by yourself.. it's easy to learn and you'll save time... a lot of time. - hotpepper, on 10/11/2007, -1/+5Nothing new to see here folks. Keep moving along. Nothing to see folks.
- zeroMPHfallover, on 10/11/2007, -1/+5Use Textmate.
http://macromates.com/ - p0tent1al, on 10/11/2007, -0/+4I don't mean to seem elitist or anything, but haven't we already learned these from the hundreds of CSS articles that hit the front page every month?
Seriously it's seeming like anything with CSS in the topic title hits the front page regardless of content. That and hacks are never good to use. Defeats the purpose of using CSS in the first place. - Akuma66, on 10/11/2007, -0/+3Yep, I've used pspad as well for ages, great app.
- creoderiot, on 10/11/2007, -0/+3this page is invaluable:
http://www.blooberry.com/indexdot/css/propindex/all.htm - hifiDesign, on 10/11/2007, -0/+3Marked as "Lame" for a halfassed list. There are many more thorough and worthwhile CSS resources out there. Hit up de.licio.us and run a search. But this "Top 10 for Dummies"-style stuff needs to stop.
- Hexxagonal, on 10/11/2007, -2/+5This should really be titled "Ten CSS tricks you already know" as I think CSS for Dummies chapter 1 page 1 paragraph would be the other place you find this list.
- rspeed, on 10/11/2007, -0/+3Remember that #8 only works with text.
- dogshaft, on 10/11/2007, -1/+4Firebug rocks for debugging javascript/ajax.
- SiRwhilms, on 10/11/2007, -1/+4Yeah... I was, at the very least, expecting something that SOMEBODY might not know, like element[attribute=value] selectors or similar.
- Chesh, on 10/11/2007, -0/+2He seems to also forget that the default border widths are determined by the user agent, not the css.
- ataylor32, on 10/11/2007, -0/+2height: 100% will only make it 100% of the *window's* height, not the document's height. So if the user's window is 700 pixels tall, that's what the height will be, regardless of how much longer the document is.
I'm not trying to be a jerk or anything; I'm just informing you. - bjerkeweb, on 10/11/2007, -0/+2Marked as lame. That list was terrible. Pretty much all of those things should be known by just about every designer who has ever seen CSS. (tip #10 = WTF?!)
And why does a guy who's supposedly an authority on CSS have a site without a doctype? - whoadave, on 10/11/2007, -0/+2More like "Ten CSS tricks you probably know (if you know the first thing about CSS)". Not only that, but some of them aren't necessarily best practice, or the best way of achieving a desired result. And the 'vertical-align' trick fails to mention that it only works when your text stays on one line... Burry.
- fjodor, on 10/11/2007, -0/+2#9 works flawless only if parent elements has dimensions set. This is why I started to hate this sort of lame "top tricks", most of them are very inaccurate.
- chromogenic, on 10/11/2007, -0/+2For larger sites you can actually start saving some substantial file weight by using shorthand, but there's practical reasons for using longhand, too (for example, overriding one property of a parent block and leaving the rest intact.)
- ataylor32, on 10/11/2007, -0/+1Just a quick note about #5 (Image replacement technique):
It's not always a good idea to do this for important images like site logos because most browsers, by default, don't print background images. I've read that any image that's important enough to be printed should be put in an img tag. - n0va, on 10/11/2007, -0/+1good choice? I think it is a very good choice.
1. It is almost impossible to find a user agent that do not display images. That is not counting the "gigantic" number of text browsers there are, and the number of those that honor all the CSS rules.
2. Almost anybody would agree that the Core Web fonts (Arial, Verdana, Tahoma... you get the idea) are not really suitable for the job all the time. I mean, do you really think that they have aesthetic qualities?
3. Another alternative is sIFR, which requires both Javascript and Flash. Which do you think is more common: JS and Flash, or images? - davidgolding, on 10/11/2007, -0/+1You could also do a search in Google using the query string "site:digg.com css" (of course you will find that CSS tips stories like this have been done before and more thoroughly than this article).
- bfaulk04, on 10/11/2007, -2/+3Counter-Strike stuff in News >> Technology >> Programming?
- chapium, on 10/11/2007, -0/+1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
From the original page. - Justizzle, on 10/11/2007, -0/+1UltraEdit32 is the poo
If you are like me, and line everything up, UE32 is the way to go... why? Column mode FTFW... - BoomWav, on 10/11/2007, -2/+3I use Dreamweaver in code mode. It allow me to use templates (when making a HTML+CSS sites).. and my own snippets I made. It also offer an interface to reorganize my CSS rules.. I guess everybody has his own tools..
- kitta, on 10/11/2007, -0/+1I can't wait to read the same article for the twelfth time in about, oh, say three months and five days from now.
- thebraineater, on 10/11/2007, -0/+1It's ironic because that site looks like a pile of *****. This article is super gay. first off, the article's description is as long as *****. say "CSS controls the colors, layout, fonts and overall styles of your site. Trenton Moss demonstrates some CSS tricks." or better yet, cut out the part telling you what css is since if you're looking at the article, you should already know. also, the headline should be "Ten CSS Tricks You Probably Know," since it's all pretty much common knowledge
- findhostcoupons, on 03/22/2009, -0/+1Thanks for these tricks, I really didn't know about most of them!
- btraut, on 10/11/2007, -1/+2If he practiced what he preached, he probably wouldn't go too far. He claims he started his own consultancy, but after designing for just a few years, I know enough to be weary of these suggestions.
1. There's no need to list them explicitly? Wrong! Writing them out will allow you to override specific properties (and add !important if needed). It is also easier to read and comment.
2. The bottom property doesn't take precedence always. There is a point system assigned to CSS definitions - ID definitions are worth more than class definitions are worth more than selector definitions.
3. You're listing the defaults as if they were defaults for every browser. Each browser has its own style sheet for defaults, many of them with no table border.
...there's more... - dantoro, on 10/11/2007, -0/+1Shouldnt this be titled "10 CSS tricks you already know and dont want to use"
- disturbedmind, on 10/11/2007, -0/+1Pure VI all the way!! That's the way real men edit code
- kuyman, on 10/11/2007, -0/+1Taco is a great tool for HTML and CSS as it has upload and download buttons built right in, syntax hilighting, great search and find, etc. But it's only for Mac, sadly.
- roosterjm2k2, on 10/11/2007, -1/+1e beats all of them...
textmate (mac) powerhouse for windows...
and free for a while...
e-texteditor.com - jhecht, on 10/11/2007, -0/+0I was honestly surprised to not have seen what i call the global reset in there. I'm sure everyone who reads this knows about it, how in css you can use the *{} to indicate every item on the page. It comes in handy on those days you get really annoyed with the differences between the browsers padding and margins and just don't have the time to edit all of your properties by hand.
Some of the stuff in there was kinda stupid. -2000px ????? wtf. If you want to be known by the words "Buy Widgets" thats what the meta tags are for. - adigitaldove, on 10/11/2007, -0/+0Ummm.... Mac + CSS Edit app. I only write when I have to, this awesome CSS program won an Apple Software award this year and is by far the best CSS editing tool out there.
-
Show 51 - 78 of 78 discussions



What is Digg?
Check out the new & improved