Thursday, December 21, 2006
5:25 PM | 
Posted by
Sunil Bhaskar |
There has been a tremendous increase in the number of websites that are employing Css and an increrasing number of resources talking about how great it is.If you still have not jumped on t0 the band wagon then you may consider doing so.....
CSSZenGardenThere has been an astounding increase in the number If you have any doubts over how powerful CSS really is, then you need to visit CSS Zen Garden. CSS Zen Garden is a display of the power and beauty of CSS. The concept is simple: see how many ways designers can take the exact same HTML code and produce completely different looking pages. As you browse through the various designs, you will find that the only thing changing the way each page looks is the CSS file. The HTML is exactly the same.
CSS Zen Garden is a great showcase of creativity and technical expertise. It is also important to point out that CSS Zen Garden does not use any tables for their layout. Everything is done in pure, simple HTML and CSS.
The Web Developer's Network
Any of the sites that make our favorites list are certainly listed on this extensive resource page. Be warned, this page has so many resources listed it is easy to get lost for hours exploring them. Some of the resources are just fun to explore while others offer some very practical advice on practical matters.
The page is not limited to CSS resources, but also delves into areas of good website design and creativity, along with anything else you could possibly want for your design needs. Our only criticism of this site is that it might be too extensive to find a specific tutorial or help guide.
Official Cascading Style Sheets Level 2 Specification
This is the place where it all starts if you want to learn CSS. Here you will find the official documentation on how to use CSS and what CSS is used for. Many novice website owners are scared away from this site because it is written in very technical language and they fear that they will not be able to understand it. If you feel this way, be careful not to sell yourself short. The specifications are actually much easier if you know how to read them.
When going over this document, keep in mind a few things. First, CSS was built for more than just the Internet. CSS can be used in print media and broadcast media as well. So when you are reading some of the instructions in the official manual you may find some aspects that do not apply to what you are doing. Secondly, do not worry if you do not understand a certain chapter or bit of information. The trick to learning CSS is to get a basic understanding of it first, then practice, then go back and re-read what you have already read (things will make a bit more sense this time around), then practice, then go back and re-read again, and so on. Every time you practice what you learned and go back to re-read some of the specifications, it will make more and more sense to you.As a point of reference, if you want to just go over the most important chapters in the manual, be sure to read these chapters: Chapters 8-12, 14-18, and 4-6.
CSS from the Ground Up
Ok, so you have tried the official manual and it is just too difficult to understand. That is fine. There is a lot of information included in the manual, and they certainly do not work at entertaining you with the manual. If you want a bare bones tutorial on CSS, the people from Web Page Design for Designers have put together a pretty good basic tutorial which should get you started on your first CSS pages.
Listamatic
One thing you will learn as you begin to work with CSS powered layouts is that lists are extremely powerful tools. Lists are a vital part of building a website with good code flow. Getting lists to appear correctly in different browsers, or to appear in new, original ways, however, can be quite challenging.
Listamatic offers several examples of lists that use simple CSS. The examples cover nearly everything that you could possibly hope to achieve from an HTML list. Of course, if you are working with a nested list, they have examples of those as well.
CSSVault
This site offers a little bit of everything. They offer a great gallery for you to stop by and gawk at, as well as a number of resources on everything from lists to building layouts that do not use tables. Definitely a good overall resource on CSS.
CSS Layout Techniques
No CSS guide would be complete if we did not address the issue of building a layout that does not use tables. This is certainly the most challenging aspect of CSS, learning how to build a nice layout. The people over at Glish.com have put together examples of several different types of layouts. They may not offer every layout you could possibly use, but looking over their guides will certainly help you learn different techniques to learning how to layout your page.
Ruthsarian Layouts
There really cannot be enough resources on how to work with layouts using CSS. Ruthsarian Layouts offers several very good examples of popular layouts.
PositionIsEverything
And yet again, we offer another site dedicated to learning layouts and the little quirks that each browser brings into your CSS design. This site may just have the most information on position with CSS than any other site.
StyleGala
This is another site that goes a bit beyond CSS and into some other aspects of design, but still offers so much to learn from that it is highly worth putting in your favorites file. Included in this site is an impressive gallery, some forums, a collection of bullets that you can use on your site (where has this been for the past several years?), and a great collection of resources.
CSSZenGardenThere has been an astounding increase in the number If you have any doubts over how powerful CSS really is, then you need to visit CSS Zen Garden. CSS Zen Garden is a display of the power and beauty of CSS. The concept is simple: see how many ways designers can take the exact same HTML code and produce completely different looking pages. As you browse through the various designs, you will find that the only thing changing the way each page looks is the CSS file. The HTML is exactly the same.
CSS Zen Garden is a great showcase of creativity and technical expertise. It is also important to point out that CSS Zen Garden does not use any tables for their layout. Everything is done in pure, simple HTML and CSS.
The Web Developer's Network
Any of the sites that make our favorites list are certainly listed on this extensive resource page. Be warned, this page has so many resources listed it is easy to get lost for hours exploring them. Some of the resources are just fun to explore while others offer some very practical advice on practical matters.
The page is not limited to CSS resources, but also delves into areas of good website design and creativity, along with anything else you could possibly want for your design needs. Our only criticism of this site is that it might be too extensive to find a specific tutorial or help guide.
Official Cascading Style Sheets Level 2 Specification
This is the place where it all starts if you want to learn CSS. Here you will find the official documentation on how to use CSS and what CSS is used for. Many novice website owners are scared away from this site because it is written in very technical language and they fear that they will not be able to understand it. If you feel this way, be careful not to sell yourself short. The specifications are actually much easier if you know how to read them.
When going over this document, keep in mind a few things. First, CSS was built for more than just the Internet. CSS can be used in print media and broadcast media as well. So when you are reading some of the instructions in the official manual you may find some aspects that do not apply to what you are doing. Secondly, do not worry if you do not understand a certain chapter or bit of information. The trick to learning CSS is to get a basic understanding of it first, then practice, then go back and re-read what you have already read (things will make a bit more sense this time around), then practice, then go back and re-read again, and so on. Every time you practice what you learned and go back to re-read some of the specifications, it will make more and more sense to you.As a point of reference, if you want to just go over the most important chapters in the manual, be sure to read these chapters: Chapters 8-12, 14-18, and 4-6.
CSS from the Ground Up
Ok, so you have tried the official manual and it is just too difficult to understand. That is fine. There is a lot of information included in the manual, and they certainly do not work at entertaining you with the manual. If you want a bare bones tutorial on CSS, the people from Web Page Design for Designers have put together a pretty good basic tutorial which should get you started on your first CSS pages.
Listamatic
One thing you will learn as you begin to work with CSS powered layouts is that lists are extremely powerful tools. Lists are a vital part of building a website with good code flow. Getting lists to appear correctly in different browsers, or to appear in new, original ways, however, can be quite challenging.
Listamatic offers several examples of lists that use simple CSS. The examples cover nearly everything that you could possibly hope to achieve from an HTML list. Of course, if you are working with a nested list, they have examples of those as well.
CSSVault
This site offers a little bit of everything. They offer a great gallery for you to stop by and gawk at, as well as a number of resources on everything from lists to building layouts that do not use tables. Definitely a good overall resource on CSS.
CSS Layout Techniques
No CSS guide would be complete if we did not address the issue of building a layout that does not use tables. This is certainly the most challenging aspect of CSS, learning how to build a nice layout. The people over at Glish.com have put together examples of several different types of layouts. They may not offer every layout you could possibly use, but looking over their guides will certainly help you learn different techniques to learning how to layout your page.
Ruthsarian Layouts
There really cannot be enough resources on how to work with layouts using CSS. Ruthsarian Layouts offers several very good examples of popular layouts.
PositionIsEverything
And yet again, we offer another site dedicated to learning layouts and the little quirks that each browser brings into your CSS design. This site may just have the most information on position with CSS than any other site.
StyleGala
This is another site that goes a bit beyond CSS and into some other aspects of design, but still offers so much to learn from that it is highly worth putting in your favorites file. Included in this site is an impressive gallery, some forums, a collection of bullets that you can use on your site (where has this been for the past several years?), and a great collection of resources.
Labels:
Technical
Subscribe to:
Post Comments (Atom)
0 comments: