Are there any CSS standards that I should follow while writing my first stylesheet?

An error that beginners make quite often: CSS is semantic as well. Try to express concepts, not formats. Contrived example: Wrong: div.

Red { color: red; } as opposed to: Good: div. Error { color: red; } CSS should be the formatting companion for the concepts you use on your web site, so they should be reflected in it. You will be much more flexible this way.

Since the "red" class is determined by the (X)HTML, though, I don't think this is a case of "CSS is semantic as well" as such. It's more "HTML should be semantic, allowing CSS to determine look and feel". – Bobby Jack Oct 30 '08 at 13:08.

Aside from the great resources pointed in the other answers, here are some tips to structure the way you work on the CSS: Do the work in the following order... Lay out the semantic structure of your page in HTML. Make sure it's right without any CSS. Create the basic layout of the page in a CSS - columns, headers, floating boxes.

Add typography - fonts, sizes and colors. Add the graphical elements - background pictures, logos and so on Put a link on your page to the W3C CSS validator (if your site is visible from the internet) and keep hitting it every so often. Keep all your styles outside of the HTML.It's good to have IE6/7/8, FF2/3 and Chrome/Safari.

Opera would be nice too. Keep changing the browser you open your page in while working (unless you're digging into a particular browser issue :-)). Add comments what each rule does and why.

Keep the dev version of the CSS checked in and once you're done, then remove comments and whitespaces and compress multiple rules into one for production. Update: As Bobby Jack mentioned, I missed to mention the debugging tools. You can use IE Developer Toolbar (for IE) or Firebug (for FF) or the integrated Inspection tools in Chrome to inspect which rules are applied to particular element, or modify the style of an element on the fly.

– Justin 'jjnguy' Nelson Oct 30 '08 at 6:36 They bloat up your css-file. Visitors of your page will have to download more data that way... – Mo. Oct 30 '08 at 8:39 I think this answer's missing a shout-out for firebug.

– Bobby Jack Oct 30 '08 at 9:46 @jjnguy you can leave commens and whitespace in your CSS files, however that will make your page download time bigger. Granted, caching and request compression will help a lot; still any byte you shave off the CSS is another byte of content you can send your users. :-) – Franci Penov Oct 30 '08 at 21:03.

Resist the urge to over-specify class or id names. Use contextual or descendent selectors. This let's you easily define styles for areas of your page, but save on the sanity of having to manage and remember tons of names.

For example: Nav Item Nav Item #nav { } #nav . NavItem { } #nav . ItemText { } This is needlessly complex, and you'll find yourself quickly running out of good semantic descriptions.

You'd be better off with something like: Nav Item Nav Item #nav {} #nav li {} #nav li span {}.

From content HTML within the “thingâ€?. (If you see what I mean. ) – Paul D.

Waite Feb 12 '10 at 17:14.

My first tip would be to always use only external style sheets - try to avoid inline or header styles. Use classes and ids as much as possible. I second the suggestion for A List Apart Although not very pretty, and sometimes a little old, HTML Help by WDG has some good references.Quirksmode.Org has a great css compatibility table.

You've already gotten a good set of answers regarding your question put here is a point you may find usefull. Use Firefox with Firebug extension. If you don't have firefox I recommend you install it even if it's just for this.

Firebug allows you to select element from the page and shows you th applied css. Then you can edit this css with the fire bug without any page reloads. Once you're happy with a style you can easily copy the definitions from firbug to your css editor.At least for me firebug is an absolute necessity when working with styles.

Couple of tips for the css itself. When defining your styles use id's only when the element in question is unique. That way your styles are reusable.

Use hierarchical definitions eg. #header . NavigationElement a{color:red;} and #footer . NavigationElement a{color:black;} That way you can move youre html code around and the correct style is applied automaticly.

You can save yourself a lot of headache by understanding specificity. When you set a rule for something, if there is a conflicting rule, specificity decides which rule wins. A quick (incomplete) rundown: An element-wide rule (like p {color:green;}) will be trumped by: A class-specific rule (like p.

Sidenote {color: blue;}), which will be trumped by: An id-specific rule (like p#final {color: red;}), which will be trumped by: An inline declaration (like ), which will be trumped by: An important rule (like p#final {color: inherit! Important;}) ...all of which can be trumped by the user's rules. The interactions can be complex, but there are mathematic rules underlying them.

For a more complete treatment, see Chapter 3 of Eric Meyer's "CSS: The Definitive Guide. " To recap: if you set a rule and it doesn't seem to affect anything, you've probably got a conflicting rule. To understand why one rule beats the other, learn about specificity.

In my opinion if you need to use! Important; you've done something wrong. Try to avoid the!

Important; where ever possible. It'll make your life easier. – Gene Oct 31 '08 at 8:48 Right.

I've actually never used it; just trying to make the hierarchy more complete.!important has a hacky feel about it, though, doesn't it? "I'm not sure where the conflict is, but just ignore everything and do this!" – Nathan Long Oct 31 '08 at 14:13 I bet the! Important was created by a developer who needed to fix someone else's css and got lazy :D – Gene Oct 31 '08 at 14:57.

Not exactly beginner material, but A List Apart is a very interesting blog about CSS and its intricacies. I find the W3 School's pages on CSS great for reference.

2 +1 for the excellent ALA; -1 for the terribly presented and, at times, inaccurate W3 Schools – Bobby Jack Oct 30 '08 at 9:45 Obviously, I beg to differ. Usually W3 is the first place I end up going when I need an HTML or CSS reference. – SoloBold Oct 30 '08 at 14:57 2 Of course :-) I used to do the same when I just googled and W3 schools turned up pretty high on the list.No more; I tend to favour htmldog and sitepoint for pure reference.

And I fear referring to that site as just "W3" reinforces the misinformation that they're anything to do with W3C. – Bobby Jack Oct 30 '08 at 19:31.

Well if this is your first website and you're trying to go the CSS route then you should go read up on CSS layout and CSS box model. Understand how to use block elements to do your layout and stay away from tables for layout. The other thing I'd recommend is you use FireFox for all primary development and make your site work and look how you want it to in FF.

Then fire up IE and fix any problems that quirky IE has. You will end up with a much cleaner site and much cleaner CSS if you do it this way.

This is a decent overview: onlinetools.org/articles/cssguides.html.

Have a look at CSS Systems for writing maintainable CSS by Natalie Downe of ClearLeft. There are a lot of great concepts in her presentation (I recommend downloading the PDF because her notes are pretty detailed). I think her presentation is aimed at full time CSS devs more so than beginners, but even beginners could take a lot away from it.

I just have to mention css Zen Garden as a source of inspiration.

If this is your first time, good luck! I'm not sure that as a beginner you need extensive or exhaustive resources. Take things slow and do everything you can to keep your code readable.

Spacing, spacing, spacing. Use external style sheets (someone said above) and as good of an idea as it sounds now, do not keep adding new style sheets for different sections of the site. It will make your life so much easier down the road.

The Complete CSS Guide on westciv. Com has an exhaustive amount of information on CSS. It's a great place to start diving in.

I learned what I need to know from Mc Farland's Missing Manual (Oreilly book), and by staring at a sample rails' app's stylesheet. That works pretty well, google "example / sample projects / app / repositories" for PHP, ASP. Net, whatever you're using.

If you use a reset script - it'll iron out some of the quirks between different browsers. Doing so has made my life easier. I've seen some people swear by simply using * { padding: 0; margin: 0; } But you can also use more thorough implementations - like the one in the YUI library... developer.yahoo.com/yui/reset/ When it comes to testing your site renders - browsershots.Org is pretty useful.

The webdev firefox plugin is brilliant - CTRL+SHIFT+E allows you to edit css, and see changes on the fly. If you CTRL+F, you can also hover yr mouse over an element to find out what it is.To add to the sites other people have mentioned - I've found css-discuss.incutio.com useful. Freenode #css is handy too.

Alot of people have some excellent suggestions. I would like to second what codeinthewhole said. I would strongly recommend using a reset.

Css style-sheet: *{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse}caption,th,td{text-align:left}p, h1{margin:0;padding:0;bording:0} Either copy and paste or just save the one I linked to. Also, a mistake I used in my early days was over use of apposed to . An id="" is only supposed to be used once (never have two 's), whereas you can have thousands of class="" (like ).

And besides, having more than one id with the same name isnt valid html.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.