I am a ASP .NET / C# developer. I have been asked to get a working knowledge of CSS for an upcoming project. What would the best approach to follow to learn CSS?
EDIT: I would also like to use any help i can get from VS 2008 when using CSS. Is there a resource that would show all the tools in VS2008 that help in using CSS?
I found the W3 CSS Tutorials to be informative and sufficient. You can learn the basics in a couple of hours, then spend the rest of the day trying to get text to cernter vertically in a div ;-)
You need to do two things:
Learn CSS and the "separate form from function" way of doing things.
Learn what your limitations are in using ASP.Net/Visual Studio to do things the s3f way.
Your project spec and leaders will help you with what is acceptable or not in your project.
This book will help you with all of it once you know that.
I found the Tizag tutorial easier to follow when learning CSS. The page is easier on the eyes, too.
I've also found these books very well documented
Head First HTML with CSS and XHTML
The book mentioned by John Dunagan is also essential reading for someone in your position.
I liked the book Eric Meyer on CSS. He goes through several project pages, styling each one from scratch (absolutely no CSS). This approach over several projects really shows you what's possible with CSS.
I really like the CSS articles on A List Apart. They have a lot of insight and show plenty of best practices.
Another good source would be to examine other sites, but if you lack experience you might find it hard to differentiate between good and bad usage of CSS.
For starters:
Get a list of CSS properties and rules (like this one) to familiarize yourself with what's available. CSS is a relatively small technology, so this won't take long.
Play around with some bare HTML and starting adding CSS rules to see what they do and understand how the cascade works
Start reading the source of well-designed sites to see how they use CSS.
Use Firefox 3, and install the latest version of the Web Developer's Toolbar. This will allow you to interactively explore and modify the CSS of any webpage, which is a great way to experiment with how different properties affect the page.
In order of difficultly, learning CSS will go something like this:
Not very original, but I'd just read the O'Reilly book, CSS: The Definitive Guide by Eric A. Meyer.
Some very solid points (w3c, form vs function, firebug) hav been made already, I just wanted to add that you really need to be using !IE when learning CSS, and preferably FF given Firebug.
Because you're coming from VS and it's a MS product it does things the MS way. It has that CSS validation thing going on which may help you, but unfortunately it gets things wrong too so after you get the basics down I suggest you disable the CSS validation in VS.
When you start having problems in IE google up "hasLayout", "double float", "box model" (one of the most important concepts in CSS) and "strict vs transitional".
One final note, if you've done any MVC work, that concept will help you with CSS.
Some helpful links of the top of my head:
In addition to the good suggestions already offered:
http://www.mezzoblue.com/css/cribsheet/ - by Dave Shea - has a lot of other great articles
http://www.smashingmagazine.com/ - good articles to be had there
http://reference.sitepoint.com/ - very good reference on html and css, a lot of good articles on the main site too.
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html - handy fixes for all too common problems.
Probably one of the most frustrating things is learning how to cope with IE, and its strange box model and other quirks like the incredibly annoying peekaboo bug.
If possible, try to avoid using things like the holly hack, and other techniques that rely on parser quirks, in favour of using conditional comments for IE and loading an extra stylesheet.
Try to take a pragmatic approach, as much as the css purists will not like it, sometimes the addition of a few redundant wrapper divs to overcome box model inconsistencies can save you a lot of time versus searching for the "pure" solution - Don't go nuts with redundant markup, but realise it's not like someone's gonna die if you put in a little extra.
A big frustration with aspnet, if using webforms controls, is the very non semantic markup that is emitted by the controls, and working out how to tame them with css, getting familiar with the aspnet style of markup will help here.
Apart from the above I would have the following recommendations:
Except giving a basic course in my answer I couldn't add to the other answers concerning learning site/books. My own opinion is that http://www.w3schools.com/ is probably the best way.
For VS2008 tools, you have to know the Intellisense is working in css files in VS2008. That means that if you declare a class, an ID or HTML tag and you open { and press enter, every css property should popup. That will help you in a way you probably won't need a cheat cheat to remember the properties.
Also when in a simple web app, if you use class="something" or CssClass="something". VS2008 underlines if the css class doesn't exist in any css file. This helps for typo.
It's mainly what VS2008 give for help with css.
I am not aware of a useful plugin for css in VS2008. But you will need one in your browser. Firebug is the best and works in Firefox and there is a lite version which you can include in your website and then it will work in everybrowser but I think it's a pain to include. In Internet Explorer you can you the IE Developer Toolbar, which is a plugin for IE6, IE7 from Microsoft.
Without giving a course make sure to check out the main 3 declaration type in css class (.) id (#) and HTML tag (none).
Be sure to understand the box template with margin - border - padding - text
And for more advanced use, you can watch for selectors.
Something that I didn't see in previous answers is that to help building cross browser css style you must use a reset stylesheet to disable browser specific css interpretation reseeting everything in everybrowser to 0. You can find a complete one here.
As said before there is a lot of differencies in browsers to handle CSS here is a nice chart to know the compatibility.
Good luck
Download Firebug. Open up your own page or any page on the web. See how the site was designed via css. Try adjusting the css on the page to get different results inside of Firebug. I often do this to get html on a page looking correctly before I actually add the CSS code to the page.
Plus it saves time on editing the css page, saving it, then refreshing the page because you'll see the results in real time.
I will have to disappoint you but you only get working knowledge of CSS through working with it. You can read lots of stuff but without applying it to practice you won't remember anything.
Just start using it in a project. Whatever you need to know you will gather by pieces through countless resources, forums, blogs, tips, comments etc. Unfortunately, CSS is one of those things which takes a long and hard time to master, it requires certain critical mass of accumulated knowledge and experience before you will be able to accomplish real projects with it.
Start using it and then ask questions, try, fail, try again etc. Be careful not to catch a "pure CSS design" virus - CSS is good and powerful but with lots of flaws and shortcomings. In many cases there will be hard questions of "Pure CSS design with extreme complexity vs. table-based design with ease and simplicity". Be smart to recognize the situation and choose the right option.
Many things that cannot be simply done with CSS can be done with JavaScript. But that's another story.
As for resources, also check out www.webdesignfromscratch.com/
Good luck, much dedication, patience and steel nerves. But you'll manage it if you'll want that.
I always suggest books first since you can always grab them and keep them open as a reference rather than Alt-Tab in between your open tasks and your references.
Two books for CSS that are the tops are "Beginning CSS Web Development From Novice to Professional" by Simon Collison, and "CSS Mastery" by Andy Budd. Excellent for some base knowledge and cool techniques that are being used right now in Web 2.0 sites.
Grab Firefox, get some addons:
Web Developer Toolbar
ScreenGrab
ColorZilla
Font Finder
HTML Validator (due to the JS injection that VS will place into your code, your pages will not be validated completely, but knowing what lines they are, you'll know its valid when there are no other errors or warnings [you should only get 2 errors with aspx pages])
Firebug - the king of all development addons. The best browser addition in the world for CSS and web development in general. You can actually edit a page's CSS and HTML on the fly and see the results in real time.
IE Tab allows you to switch between FF and IE (whatever version you have on your machine) in the same viewport with just one click (and you WILL have differences!)
Note that if you use Master pages, the link references to the stylesheets would go in the head of the Master page. There will be some issues with CSS and Master pages, unfortunately I don't remember all of them right now!
Here's a page I found useful as well:
http://www.codefixer.com/asp-net/tutorials/using-master-pages-with-css.asp