The best place to learn the basics is to use the W3schools tutorial on image transparency. After you understand the basics you might want to progress to using CSS for all browsers. These techniques will get you started, but it is not as simple as it seems. According to Robert Nyman, you may encounter a problem with a child element’s inheritance.

A quick and easy solution for transparency and menus are these free script sources:

Transparent Opacity Rollover Menu

Transparent Vertical Menu

Another simple solution to achieve transparency:

Text Blocks over an Image

Tutorial Hero has a large collection of transparency tutorials available for transparency enthusiast that includes transparent scroll bars and a very interesting transparent tab menu script from Dynamic Drive. Eric A. Meyer’s Complex Spiral Demo is necessary read to develop your transparency skills as well as his advanced articles on the complex spiral distorted and devolved. Finally, there is the problem with opacity validation in your style sheet. Evaria.com offers a great workaround so your CSS will validate. Use these tips and you will be on your way to creating a variety of CSS transparency scripts.

Before going into detail let’s learn about CSS or Cascading Style Sheets. In layman’s language CSS is a language that adds style to your document like colors, borders, margins and borders. Basically CSS is the style sheet language used to describe the overall presentation of a document like the appearance and presentation of a document written in markup languages, especially in HTML and XHTML. Cascading Style Sheets are designed to separate the contents from the presentation of a document.

Benefits of CSS

There are innumerable advantages of learning CSS for web designers. Since it helps in improving the content accessibility and provides more flexibility and control in the specification of document presentation, it has become an inseparable part of web designing. One can say that a web designer is incomplete without CSS and I can bet on it.

So in order to spread knowledge on this revolutionary tool of web designing I would like to share some great resources rather say a treasure where anyone can learn CSS or Cascading Style Sheets online.
Websites, Blogs and Tutorials

1. CSS Basics

This portal can provide all basic elements of CSS. Divided in 18 chapters, this portal covers all the basics of CSS. Though chapters are short but it can give a capsule understanding on every topic.

2. W3Schools

It is one of the largest websites which provide quick and easy learning through tips and tutorials in varied of web design and development technologies including some great Server Scripting languages like PHP, ASP, SQL, etc. Here you can find everything regarding CSS right from the examples to the common problems. I can say that this portal will help you immensely in learning CSS.

3. SmashingMagazine

This site is known to majority of web designers and developers of the world. SmashingMagazine too having a great CSS section which is being updated timely to provide some nice CSS tips and tutorials to its readers.

4. DynamicDrive

Dynamic Drive is one of the great places to obtain free and original Scripts (CSS, DHTML & Javascripts) which one can use in its website. This site is a great source of learning as many profound web designers of the entire globe have contributed some great scripts as a freebie. I think the CSS Menu and Navigation Scripts are the best one available on DynamicDrive.

5. Friendlybit

A nice Beginner’s guide to CSS by “Friendly Bit”. This site provides all necessary information on all basic aspects of CSS through a great tutorial. With the help of this tutorial you can make your first CSS powered website. I am including this 4 Page Beginner’s guide in the list as its very time consuming and can be boring to go through each and every property before starting with a website.

6. Line25 Tutorial

It is a small 3-step tutorial by Chris Spooner on “Getting started with CSS.” The tutorial can be very helpful for the beginners.

7. HTMLDog

HTML Dog has the web designer’s resource for everything including the HTML and CSS. No matter whether you are a Beginner, Intermediate or an Advanced Learner, HTMLDog has something special for all you guys.

8. SitePoint

Reference.sitepoint.com covers almost all aspects on CSS language. This site provides full descriptions, working examples, and browser compatibility information on the entire CSS language, thus a great source to learn CSS.

9. Tizag

You have used HTML in the past; you know the basic HTML tags and vocabulary adn and you want to have a kick start with CSS so Tizag can be a great resource for you. The site has some great step by step lessons with nice “Try it out” CSS editor to learn from.

10. CSSPlay

Like DynamicDrive, CSSplay is also a great site to explore and learn CSS. Powered with some really creative demos and tricks, one can definitely find something for any website project.

11. AListApart

It is one of the useful, simple and efficient sources to learn CSS. With more than 100 articles on CSS, one can learn many aspects on CSS from this portal. A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

12. WebDesignfromScratch

If you are looking for some great study on CSS with explanation through excellent examples, Webdesignfromscratch can be a good resource for you.

13. MaxDesign

This site provides some great, knowledgeable and excellent tutorials on how to create different list layouts with Cascanding Style Sheets. The site has also the great section for CSS tutorials on various topics like tutorials on list, nested lists, floats, selectors, etc. So if you are a tutorial lover, please have a look at maxdesign.

14. CSS-Tricks

A blog by Chris Coyier to follow to learn some great tricks on CSS.

15. CSSDog

CSSDog is a great site you can refer if you want to go for a detailed study on CSS. This site has sections for both the Beginer and Advanced Learners.

16. Net.TutsPlus

Most of us are aware of net tutsplus, the blog has also the great section on CSS which can help the learners to stay updated with CSS and to learn some new CSS stuff.

17. MeyerWeb

Meyer has written a number of books and articles on CSS and given many presentations for promoting the use of this style sheet language. Here I would like to share a collection of work by Eric Meyer which will be helpful for guys learning CSS.
CSS Layouts
Have learned some basics on CSS and don’t want to waste time working on the same basic layouts for a general website design? Try a readymade CSS Layout, Just select a layout matching your needs, play with the code and have your website done. Here I would like to share some website distributing website layouts to be used for your website as a freebie.

18. CSSEasy

19. MyCelly

20. Code-Sucks

Online CSS Creator

21. CSSCreator

CSS Layout Creator Online is a very nice Online Tool to create CSS which helps you to create a fully functioning website in pure CSS. This online CSS generator can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer.

Form Builder

Web forms take time to build, time to style and time to test. So here is a small list of Form Builders online which can really save your time.

22. MyContactForm

23. Accessify Form Builder

CSS Forums

You may face some problems while developing your CSS powered site. Don’t worry; we have some great forums where experts are available to solve your problems. Here’s a small list of CSS forum which can solve any of your CSS related problem for sure.

24. DigitalPoint CSS Forum

25. CSSDrive CSS Forum

26. DynamicDrive CSS Forum

27. CSS-Tricks CSS Forum

28. Sitepoint CSS Forum

CSS Galleries

Last but not the least; CSS Desgin Galleries can be the great sourcing of CSS learning. Every day, hordes of designers come out with brilliant ideas and designs, thus a great place to learn, besides sharing knowledge. You can find some really great CSS design galleries showcasing some fascinating and brilliant designs to learn and take inspiration from. Following are some really good CSS Design galleries.

29. CSSMania

30. CSSElite

31. CSS-Website

32. CSSRemix

33. MostInspired

So this was the list which can surely teach you something in CSS. Still I think there are lot more links available on Internet not known by me and some in queue to come, I would like the list to be updated regularly so creating Addition(heading) at last of the article. Please suggest your links you think should be there in the list. Thank You!

Addition:

34. CSSPedia

This CSS Dock Menu, using CSS and jQuery, emulates the look of a Mac OSX dock. Used in a simple environment, it could be very effective.

This CSS Shorthand Guide helps you trim your CSS. Shorthand in CSS can even speed up site load times. I found a few others that may be of preference.

Mycelly.com‘s Nice and Free CSS Templates provides a varied set of simple layouts with code for each of them laid out visually.

Glish.com links to many CSS layout resources of its own and others.

RoundedCornr isn’t so much a CSS resource as it is a CSS alternative. If you don’t have quick or easy access to modern programs, and if you don’t want to implement CSS’s recent “border-radius” property (for fear your audience may not be using modern browsers that support it), you can have this site generate rounded corner box images of any size and any border radius. The corners can be transparent or colored.

You can create your navigation in many different languages and styles, ranging from a simple HTML list of links, to a complex JQuery menu with animation. CSS is most commonly used because it offers some functions HTML alone cannot provide while remaining supported by all major browsers. The hover effect (mouseover) changes the color or design of your links when the mouse is moved above the link thus highlighting the link and making it easier to see which link is being clicked. The active link effect allows the link for the page you are on to stay highlighted. This allows you to tell what page you are on at a glance, and eliminates the confusion of clicking the link for a page you are already on.

Many different styles and ways of creating CSS navigation menus have been developed over the years, but I hope to cover the main ones, from simple to complex.

Tutorials

Suckerfish:

While Suckerfish may seem simple and basic to look at, it was one of the first menus of it’s kind. Many menus today are based off the Suckerfish <li> design style. For example, Son of Suckerfish, Superfish etc. You can make a great looking and working menu using the Suckerfish code.

Example: Here

The Art of Navigation:

This menu, designed by Dan Rubin is an excellent lesson in usability. As designers, we should focus more on how ease it will be for a visitor to use rather than how cool or unique it looks. Of course, a design that combines a simple user interface with a unique design is best, but you should always consider the ease of use first. Dan Rubin’s Art of Navigation is easy to use. The way your link is selected leaves no doubt in your mind that you are going to the correct link.

Example: Here

Inverted Sliding Door:

Sliding Door is a simple tab style design that is simple, but clean and easily modifiable. It uses a total of 4 images to keep load times down and is highly effective.

Advanced CSS Menu:

Nick La of N. Design Studio goes through step by step how to create an artistic and unique illustrated CSS menu. This is not a specific menu you can add to any website but rather direction and guidance to help you create your own exactly to your liking.

Example: Here

Examples

Here are some examples of what you can do with CSS menus. Source code is not available for any of these menus and they are likely copyrighted. These are intended as a mini gallery of CSS menu design and inspiration.

Free Downloads

Although a couple of these menus are for sale, 13styles offers some amazing free CSS menus ready for implementation.

How many links can my template get?

I’ve seen many designers of templates with over 10,000 downloads each. Can you imagine getting 10,000 backlinks from a couple hours of work? Not all templates will perform well, but if you create a worthwhile template, it will be heavily downloaded. I created a template 2 days ago that already has almost 30 downloads. Sure it’s not 10,000 backlinks yet but at a rate of 30 every 2 days, I’ll have almost 1000 free backlinks in 2 months from that template alone.

I’m not a designer, I can’t make one. Can I?

Even if you do not have the technical skills to create a template from scratch, it may be worth your time to pay a designer to make you templates. A template is not as complex as a complete website and requires no copy-writing or content. You can hire a designer to make you a template for less than $100. Sure, it’s not free, but over the long term it’s much cheaper then directory submission or other means of creating large quantities of backlinks.

Where should I list my template?

Many sites allow anyone to submit templates for download. One of my favorites is FreeWebTemplates.com, but there are many many others to choose some. Submit to them all for more downloads overall. Here’s a list sorted by pagerank of some sites that allow submissions:

PR7 – http://www.freewebtemplates.com/

PR6 – http://www.templateworld.com/free_templates.html

PR6 – http://www.free-css.com/

PR5 – http://css4free.com/

PR4 – http://www.csstemplates.net/

Search google as well to find your own sites. If you think you’ve developed a really killer template, there are also sites that offer templates of sale. If it performs well there, you not only receive the backlinks but a cut of the profit. Two ways to win!

Here’s a shameless plug to my latest template, but also a valid example of what a well designed template can look like:

Clean and simple, valid XHTML and CSS

Questions? Leave a comment.