35 Websites dạy bạn cách sử dụng các hiệu ứng của CSS

CSS ( Cascading Style Sheets) are the modern standard for presenting website. Combined with structural markup language like HTML, XHTML – CSS fully take care about presentation part, creating that good concept – HTML = Content, CSS = Presentation. If you know CSS, you can really do everything controlling spacings, borders, positioning, margins, paddings, colors, fonts, background images, hover effects and more presentational effects. CSS is really easy to understand, and in my opinion every graphic designer should have at least simple coding skills with HTML and CSS, because CSS is really still design part, not really coding.

In this article, you’ll have all the best resources available, which will teach you how to use CSS really effectively. I started myself with W3Schools and HtmlDog – pick your own favorite and stick with it! Also I wanted to mention especially Css-Tricks website and Delicious CSS tag usage – there you will find never-ending sources of CSS resources, you could ever need! Enjoy and good learning!

1.W3Schools CSS Tutorial Section

2.HTMLDog – CSS Tutorial Section

3.CSS-Tricks Tutorials, Articles And Screencasts

Great website maintained by Chris Coyier, who constantly offer on his site many useful CSS tutorials and screencasts.

4.Google Videos – CSS

5.A List Apart – CSS Tutorial Section

6.RichInStyle CSS Tutorial Section

7.HTMLGoodies CSS Tutorial Section

8.CSS-Discuss Wiki Tutorial Section

9.Positioning Is Everything

10.Learn CSS Positioning in Ten Steps

11.456BereaStreet: The CSS, HTML, and JavaScript Lab

12.CSSBasics Tutorials

The following chapters cover all the basics of CSS design.

13.CSS-Play – List of Demonstrations

14.Tizag CSS Tutorial Section

15.CSS Help Pile

A huge pile of CSS-related tips, tricks, showcase sites and resources – everything in very well categorized way.

16.Holy CSS Zeldman! – CSS, Accessibility and Standards Links

Huge resource and link collection covering everything releated to coding, CSS, standards, books and so on.

17.Eric Meyer : CSS Section

18.Andy Budd Links

Big collection of websites and CSS related articles.

19.CSS Zen Garden

Beautiful website showing a demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page. You can download HTML and CSS file to inspect each design submitted here and learn how unique CSS effects are achieved!

20.Delicious CSS Tag

Delicious takes care of big statistics and you can rapidly find out – what’s hot now in CSS section (recent/popular) and also try to use not only CSS tag – but CSS together with Tutorial, Reference, Blog etc. to filter that list more suitable to your own needs.

21.MaxDesign CSS Tutorial And Resource Site

CSS resources and tutorials for web designers and web developers – various collections with many navigation examples( Listamatic, Listamatic2) and several tutorials (ListTutorial, FloatTutorial,SelectTutorial) as well.

22.CSSEasy Tutorial And Resource Site

Free fixed and fluid CSS layouts, the modern way to learn CSS – inspect youself premade layouts to get better understanding how they work.

Select a layout and go to “View > View source” to view the layout’s source, then copy-paste the code in notepad and safe the file as index.html. Study the code and watch the changes when you change something. (best results with Firefox, download link available in the webmaster tools section on this site)

23.EchoEcho CSS Tutorial Section

24.CSS-Discuss Information

This site is primarily intended to be a place for authors to discuss real-world uses of CSS. This doesn’t preclude discussions of theory, or nifty cutting-edge tricks that show off the power of CSS, or even talking about (X)HTML, DOM, and so forth. Site has nice Wiki CSS section!

25.Web Design From Scratch

Scratchmedia are a London UK based Web design agency, which has impressive collection of web design related tutorials and articles, CSS section featured here.

26.CSS-Tutorial

These tutorials on web design/CSS makes learning this stuff fun and easy – you will be up and running in no time because it ain’t that hard!

27.CSS Dog Resources And References

Learn about CSS shorthand properties, CSS references and CSS3 selectors all in one place!

28.Web Developer’s Handbook

Huge resource list site featuring many articles and websites, which are directly related to web developing process, which also include CSS of course!

29. CSSDocs CSS Properties

CSS Documentation Shortcut – just input your interesting css property and you’ll get full explanation to it, very handy, if you know what are you searching for, but forgot how specifically code looks.

30.Stylegala CSS Reference Section

31.CSS 3 reference guide, tutorials, and blog

32.CSS Cheat Sheet

Extremely useful one page CSS cheat sheet – I strongly suggest to print it out for later reference.

33.CSS Property Index

All CSS Properties Listed Alphabetically

34.Sitepoint CSS Reference

35.WestCiv CSS Tutorial Section

If I have missed some useful sites – feel free to share them, I’ll edit this article and add them to list if those sites will be worthy!

12 Really Handy CSS Framework, Template And Snippet Sites For Smart Web Designer

If You are creating and developing new web-sites regularly, You should think about template creation, collecting useful code snippets and things like that. You should do that to fasten development process, so I think You could use, change, optimize these template files to Your needs, however check out licence terms, if You use these for business purposes. However this is very generalize list for now, to clear out the best from the best sites. Use them well!

1. CSSTidy

“CSSTidy is an opensource CSS parser and optimizer. It is available as executable file (available for Windows, Linux and Mac) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.”

I pasted their information, because it says everything better than I could.

For some people there can be a question – why You need to optimize Your CSS code? Just if You want cleaner code, faster loading page, so You both – You and visitor benefit from optimization!

Get executable file here or use online optimizer!

2. Clean CSS

You can also use this online optimizer version, which is very similar, but I am design geek, so I enjoy this site a little more. This calls, pick Your favorite one!

3. Blueprint CSS

“Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.”

Very useful template files, helping You not to start always from big fat zero..and code everything again and again – now You can spend more time adding new features and think more about design, then reiterative process.

4. Code-Sucks

Great collection of many different css layouts, code snippets (CSS, JavaScript, PHP), website templates. These really become handy in web development process. Put these in good use.

5. Snipplr

Snipplr is very useful place storing and organizing many code snippets (Javascript, HTML, PHP, CSS, Ruby). You use regularly in Your development process. And also everybody can share and add their snippets, so the section Popular Code Snippets clearly demonstrates the best and the most used codes for everybody. Pretty great. Also these snippets work with TextMate, too.

6. MaxDesign

Perhaps You know this site, I think I mentioned it somewhere before, but however this site must be included, because it’s really useful.

There You can find listamatic1 (one list – many different ways how to style it), listamatic2 () and several tutorials how to create CSS based lists, CSS floats and use CSS selectors.

7. MeyerWeb CSS Reset

Eric Meyer CSS reset is very popular. You should use resets to neutralize browser’s default style. Also Eric pointed, that this is just a starting point, but very good one.

8. YUI Library

“Every YUI Library component ships with a series of 300 examples that illustrate its implementation. These examples can serve as starting points for your exploration of YUI, as code snippets to get you started in your own programming, or simply as an inspiration as to how various interaction patterns can be enabled in the web browser via YUI.”

Very useful template files, which are great for starting points and You have good collection of examples to satisfy almost every web designer.

9. 960 Grid System

This grid system is becoming really popular – they offer commonly used dimensions, based on a width of 960 pixels offering 12 and 16 column grid systems. Designers use grids, to help their sites to look more harmonious and precise. You get several template files and mockups, when You download that grid system, which are really helpful in the right hands.

Download / Demo

10. Sensible Standards CSS Framework

This framework is also based on Eric Meyer reset system, but also there are more features as basic styling, code is optimized without any double resets and more, go to their homepage to check for details.

11. Rounded CSS corners

I guess You’ve heard about big discussions about rounded corners and how to create ones, here is great online tool where You can get rounded corners, style them online and get code immediately.

12. Content with style

Good framework collection to allow You rapidly fast develop new websites, thinking more about graphic design and less about coding.

I hope You’ll use these sites as a reference evolving Your skills and speed up Your development process! I am sure there are more sites out there, if You know some more, be honest and leave backlinks, will be appreciated!