You are currently browsing comments. If you would like to return to the full story, you can read the full entry here: “css tips that every beginning developer should know about”.
css tips that every beginning developer should know about
40 Comments & Reactions
You can follow all the replies to this entry through the comments feed.
Trackbacks/Pingbacks
- zabox.net
- AndySowards.com :: Web Development Nerdy Daily Links For 1/10/2009 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
- Web 2.0 Announcer
- Enlaces semanales que no he publicado (1) | Cosas sencillas
- links for 2009-01-11 | Olivier Galluchot
- Web 2.0 Announcer
- Weekly Link Post 76 « Rhonda Tipton’s WebLog
- links for 2009-01-12 | The Marketing Technology Blog, Indianapolis
- links for 2009-01-13 - ArcIris- Web Design in Spain, Remote Support | Diseño Web y Soporte Remoto · Arc Iris
- This Is Star » Blog Archive » Link-O-Rama 1.15
- Usefull links for CSS Programmers | Cogzidel Templates Blog
- Read This Link » CSS tips that every beginning developer should know about
Loading...
I forgot about opacity settings — have not used those in a while! Thanks!
Niki Brown | The Design O’Blogs last blog post..Quick Tip #9 Masking In Photoshop
“Always do a reset to remove browser defaults and level the platform playing field when you are CSS’ing”
I used to do that too until I noticed I was putting “default” value back in. Now I simply “amend” the default values when needed. To each his/her own of course ;)
@Niki — No problem! I was so happy to find the method I listed here. Before I was going about it in a much harder way lol.
@Karinne — I don’t like leaving in the defaults because they’re different for different browsers. I like doing the full reset to make browser compatibility easier to deal with. But like you said, there’s definitely no right or wrong way, just what works for you :)
helpful article thanks..
joyoge designers’ bookmarks last blog post..DAHRA — Designers Against Human Rights Abuse
Nice article, especially for a self-teaching ‘newbie’. I have to say though, the first part of the browser default reset (from html to td selectors) made me laugh out loud! Thanks for the tips =)
nice tips guys, this should put a few things in perspective for people quickly.
Maxs last blog post..Design Shards Flickr group Showcase #1
@joyoge — no problem!
@Stuart — Thanks for the comment! I’m curious why you found the selectors funny.
@Max — Thanks! I know that these are a few of the things I got mixed up when I first started out.
Thanks for the newbie info. It seems that I can never get enough. I’ve seen the opacity fixes a couple of times, but never seen all major browsers listed and explained together. Thanks!
Thanks for the great tips!
Thanks especially for explaining the reasoning behind not using the * selector. It was something I always avoided (because I assumed there had to be a reason most Reset sheets that I’ve seen didn’t do it) but never actually thought about why it would be a bad thing.
Now I know. haha
The opacity stuff was helpful, too!
Great tips! Especially the one about opacity.
Gopal,
http://www.productivedreams.com
http://twitter.com/gopalraju
Gopal Rajus last blog post..Parachutes/Hot Air Balloons — An Emerging Trend in Webdesign
Hi Angie,
Thanks for the link to my 101 CSS resources post. You’ve got some great explanations of concepts that make it easy for n00bs to understand the workings of CSS.
Jason Bartholmes last blog post..Standardized Credit Card Year Field in ColdFusion
The Eric Meyer reset linked in the article is out of date. The most current one can be found here: http://meyerweb.com/eric/tools/css/reset/index.html I’d also recommend to newbies that they really research and understand just what it is that their css reset is doing for them.
I have a big problem with this:
“Div (a block-level element) always comes with a paragraph class included so that anything between the div tags will also automatically be contained between paragraph tags.”
…That is extremely misleading and just plain wrong. A div does not “come with a paragraph class included” and NOTHING contained between div tags will automatically be contained in paragraph tags ever. Nothing contained within a div will get any special treatment at all.
The div element is indeed a block-level element. To quote the spec:
“Generally, block-level elements begin on new lines, inline elements do not.“
In a general sense, block-level elements have a line break before and after them whereas inline level elements do not.
See the spec for more info: http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3
One thing I always tell beginning css developers is to use Firebug http://getfirebug.com/
@Bill — Yes, that’s a very convenient way to do it that I just recently came across. I was really happy to find one so much simpler than what I was using.
@Chad — I was like that for a while too. I avoided it but didn’t really know why I shouldn’t use it.
@Gopal — Thanks, I’m glad you found something useful in the article :)
@Jason — No problem, that was such a great resource I couldn’t resist sharing it. Thank you for putting it together.
@Andy — Thanks for the explanations. I’ve amended the article, making some corrections you suggested. I agree, firebug is a great learning tool, we a list of resources for new developers coming up with it at the top of the list :).
Good info about Default Font Settings.
about the Cross Browser Opacity Settings, will it work on ie6?
thanks.
Jamp Marks last blog post..Virtuemart Product Slideshow 1.012 bug fix release
with regard to the last css snippet on opacity: for IE8 compliance, –ms-filter should also be added.
.class {
opacity: 0.7;
filter:alpha(opacity=70);
–ms-filter:alpha(opacity=70);
–moz-opacity:0.7;
–khtml-opacity:0.5;
}
however, both filter statements should be encapsulated in IE conditional stylesheet includes, anyway.
http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx discusses this.
So why was the older Safari opacity set lower (0.5)? Any particular reason?
These are generally sound advice for beginners, but the section about creating your own “framework” could need some appending.
When doing quick sketchwork or creating a mockup a couple of classes like this (.floatright, .small etc) could be helpful, but these are presentational classes and should generally be avoided. I’m sure many beginners have heard and understood why it’s bad practise giving a paragraph a classname of “green”, but somehow stuff like “clearfix” have been given a free pass.
A different way of going about this is to create the desired rules in your CSS file, for example one pertaining to images floated to the left, one for images floated to the right, one for clearing floats etc, and leave the selectors to whatever for now. When you build your HTML document or templates, you then just pick the most logical name for each class/id in that structure, and for the ones that need the rules applied to them you stick that selector to the relevant rule in the CSS file. That way presentation work goes into CSS, structure into HTML. There’s not much of a difference in amount of work between sticking presentational classnames in your HTML and extracting semantic classnames and putting them in your CSS, right? So why not do it the correct way? ;-)
@Angie Quirky sense of humor, I guess, but seeing *counts* exactly 62 selectors before a { made me chuckle =p
really nice tips..for every developer must know!
Dainis Graveriss last blog post..40 Promotional Sites Where To Submit Your Design Related Links
@Stuart
Eric Meyer is probably the most respected authority on CSS in the world and his reset is one of the most widely used in the industry. You might be put off be the big list of selectors at first, but it’s quite clever. Once you understand it’s purpose, you’ll be chuckling at how brilliant it is.
@Jamp — Yes, it will work for EI6 as well
@hansbrix — Thanks for the IE8 fix, I’ve added it to the list.
@Richard — That was just my mistake, thanks for pointing it out. I wouldn’t want people to think that the Safari fix should be different for some reason lol.
@Emil — Thanks so much for the info. I’ve been wanting to do an article just for creating your own framework and definitely take your suggestions into consideration.
@Stuart — I can see that :). But like @Andy said once you understand it, you’ll see how useful it is and fall in love with it!
@Dainis — Thanks :)
@Andy — I’m going to do an article soon going through Meyer’s reset and explaining the purpose for everything. Like you said before, understanding exactly what the reset is doing is a must.
@Angie and @Andy Ford — It’s definitely something I’ll use and incorporate into my coding going forward, for sure — just gave me a quick chuckle at the start. =)
‘-moz-opacity’ is deprecated as of Firefox 3.1
Jamess last blog post..jQuery ‘delay’ plugin
@James — moz-opacity is just for older versions of firefox. Opacity takes care of standards compliant versions.
Hello CSS Connoisseurs,
I am a humble developer that does not traffic much in the affairs of CSS unless forced to. I am currently entrenched in a debate with the UXD/UX/UI/IA/philosopher guy where I find myself defending Eric Meyers’ CSS reset (http://meyerweb.com/eric/tools/css/reset/index.html). He continues to tear down Eric Meyers through side comments designed for me to hear. His main point is that the selectors listed below should be absorbed into the section above.
ol, ul {
list-style: none;
}
Is there a definitive reason that the list-style property is isolated? I would love to use it in my return argument. Lulz.
Thank You,
VitaminJeff™
@VitaminJeff™
If I understood you correctly, your co-worker is tearing down the entire Eric Meyer reset because he thinks that
ol, ul { list-style: none; }
should be absorbed into the first really long selector group?
If that’s the case, that’s a weak and flawed argument. For one thing, it would take about 12 seconds to update the file according to your co-worker’s wishes. Anyone can — and should — edit this reset to their liking and Eric Meyer would be the first person to tell you so.
Second, if you added ‘list-style: none;’ to the first really long selector, then you’re telling the browser to remove bullets from over 60 elements that don’t by default have bullets anyway. I believe Mr. Meyer is trying to avoid such things.
And by lumping ‘list-style: none;’ in with the first selector group, you’d end up targeting the LI element as well. Then when you needed to add bullets back to something, you’d have to target it via the LI element and via the OL or UL element to make sure you’re targeting the right kind of list.
So instead of
ul { list-style: disc; }
and
ol { list-style: decimal; }
you’d need to be more specific:
ul li { list-style: disc; }
and
ol li { list-style: decimal; }
As a general rule it’s good to keep specificity minimal. I’ve also found that it’s much more convenient to affect the ‘list-style’ property at the list level (UL and OL) rather than via LI.
I happen to use the Eric Meyer reset on all of my projects, but I modify it to my needs. One of the things I do is remove the “ol, ul { list-style: none; }” block entirely as I generally prefer to remove bullets from navigation link lists as needed, but not have to add bullets back for body copy with something like:
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
hope this helps!
Andy Fords last blog post..Ceramic LAMP Stack on Mac OS X
Great article! =D
Regarding your “opacity” rule, you’ll want to make sure that you list the “generic” or “most standard” version of the rule BELOW the browser-specific rules.
Doing this will allow the “standard” rule to naturally override the browser-specific rule when any given browser supports the “standard” rule.
The same concept applies to rounded borders, drop-shadows, and other CSS that has been proposed by not yet ratified, or not yet adopted by today’s generation of browsers.
It will allow your code to function properly a year (or more) from now when browsers are more likely to support more advanced CSS rules.
— http://www.JoeLevi.com
Joe Levis last blog post..FireFly