DISCLAIMER - We had originally planned to have a post on Illustrator tutorials like we announced on Sunday, however later that afternoon, this post went up, 30 Super-Juicy Photoshop Illustration Tutorials, followed a few days later by 50 Excellent Adobe Illustrator Video Tutorials, and blew our plans for that post there, so we benched it. Here endeth the DISCLAIMER.
Are you a beginning developer? More specifically, are you a beginning developer working with CSS? Then we have a list of tips, terms, and even one or two sites that you should know about. Not implying that you don’t. Well, perhaps we did a little bit, but we really meant nothing by it. It’s not like we are saying that you are deficient or something. It’s nothing personal. We just thought we would try and be helpful.
But we have compiled some of the commonly misused or misunderstood CSS code elements, some stand-out websites in the CSS field, and a few tips that could help to make things easier on you when you go to code. Not implying that you need for things to be easier! We aren’t saying that if the going gets tough, you give up and get going, that’s not it at all. We are just…oh, for the sake of Pete, I’m just going to move on. Enjoy. Not saying that you have to, but…oh, nevermind.
Setting up your Stylesheet
- When it comes to your styling, we recommend that you use external stylesheets rather than using inline or embedded CSS. This separates the content from the style, which has many advantages, the main one being the ability to change the entire look of a website by simply changing a single stylesheet rather than having to alter pages of html.
- Not a requirement by any means, but a helpful hint to be sure, is making notes at the beginning of the stylesheet of the site’s basic color scheme. This simplifies finding and replacing colors if and when you choose to change the site’s color scheme. The example below is what Angie has listed at the beginning of the stylesheet for Arbenting.
/*Color Scheme Main Bg - #fff7f5 Box Bg - #ffffff Main Text - #333333 Links/Headers - #6c1d31 Borders - #ececec */ - Always do a reset to remove browser defaults and level the platform playing field when you are CSS’ing - There are a number of different resets out there for you to choose from. Angie prefers the one below by Eric Meyer
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }
Whichever reset you choose to go with, do not use any that include the * selector. This will apply the assigned rules to every element in the document, which may sound good in theory, but is far too heavy on the rendering agent. Not to mention, it also takes out some of the default styling you will probably want to be hanging on to.
- You may also want to consider setting up a CSS framework. Some helpful inclusions in this framework are things such as an rss reset. a basic page structure and some universal classes like the following:
.floatleft {float: left;} .floatright {float: right;} .clear {clear: both;} .center {text-align: center;} .small {font-size: 85%;}
Span vs Div
Div (a block-level element) by default has a line break before and after.
Span (an inline element) doesn’t insert any additional formatting along with it, so they can be assigned in the middle of a line without disruption.
Class vs ID
An ID is a unique identifier, assigned to the page (ie they can only be used once per document)
Classes, on the other hand, can be applied to multiple elements within a single document. More often used for general styles that will be used repeatedly.
Relative vs Absolute Positioning
When it comes to positioning elements through CSS, you have four kinds Static, Fixed, Relative and Absolute. The two most problematic are Relative and Absolute.
The important thing to remember, is that you use Relative positioning for those elements that you wish to remain in the document flow. This will not only hold a place in the page flow for the element, but will also ensure the element maintains it’s interactivity with the other page elements. Then the element that has been relatively positioned is able to be maneuvered through the layout with user defined offsets assigned to the top, right, left, and bottom properties. (Though it is widely recommended that you only assign one vertical and one horizontal offset per element for it’s positioning.)
Absolute positioning is used when you want to remove the positioned element from the document flow altogether. This prohibits the element from influencing or interacting with the other page elements entirely. Instead the positioned element overlaps or drops behind the rest, it simply is, nothing more. Absolute positioned elements are attached to parent elements, the one above it in the document tree, to be assigned their positioning since they have been removed from the flow. (The parent elements’ positioning assignment can be either Absolute or Relative it does not matter. If no parent elements have been placed via either method, then the element becomes attached to the viewport.) The elements then are assigned screen positions using pixel coordinates with the directional properties.
The Autistic Cuckoo has a good article that gets really in depth on the topic, Relatively Absolute
Default Font Settings
body { font-size: 100.01%; font-family: Arial, Verdana, Helvetica, sans-serif; }
This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don't have the font on their system, then they won't see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type.
from CSS: Getting Into Good Coding Habits
Cross Browser Opacity Settings
This one is pretty simple, if you want your transparency to translate to all browsers, then make sure to use all four of the elements shown below.
.class { opacity: 0.7; filter:alpha(opacity=70); -ms-filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; }
The first is CSS Standard and will work in all standards compliant browsers, the second is for Internet Explorer up to IE8, the third is for IE8, the fourth is for older Mozilla browsers and the last for older Safari browsers.
CSS Websites
CSS Zen Garden - A great site that shows how powerful CSS can be and also provide infinite inspiration
Official CSS2 Specifications
101 CSS Resources to Add to your Toolbelt of Awesomeness
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