My Favorite CSS Developer Resource

Here is a list of my favorite resource related to CSS. It will be maintained and update regularly.

1. CSS Syntax
2. Color Pickup and Convert
3. CSS Generator
4. CSS How-To
5. CSS Cheat Sheet
6. Others

CSS Syntax

General

1keydata.com: CSS Tutorial
W3C: CSS tutorial starting with HTML + CSS

CSS syntax and properties explain with example. W3C is more complete and comes with a short case study. It has been translated into different languages, too.

Selector

CSS-Tricks: Child and Sibling Selectorstuts+: The 30 CSS Selectors you Must Memorizesitepoint: Universal Selector
Finn Yu: CSS 選擇器、選取器（Selector）種類簡介

Most CSS reference never mentioned about child combinator, adjacent sibling combinator, and general sibling combinator. They are very useful to give you more control over markup structure.

tuts+ is the most complete tutorial with demo for CSS selectors.

Color Pickup and Convert

JavaScripter.ner: RGB-to-Hex Conversion

Provides many color convertor including RGB-to-Hex, Hex-toRGB, RGB-to-CMYK, RGB-to-HSV, and color names.

Color-Hex

Once you click into any color, it show more related resource from shades, tints, monochromatic, analogous, triadic, complementary, and etc. Very useful to find the right color and related.

eion: HTML 顏色代碼 (十六進位值色碼)

HTML color code in HEX with name. Easier to pickup colors.

CSS Generator

{CSS} Portal

Provides many useful CSS tools and generators.

Tools include color convertor, validator, font preview, format and optimize CSS code, and etc. Some of them don’t work with Firefox 28.0 on OpenSuSE 13.1.

Generators include button, menu, and rounded corners for CSS and CSS3; gradient and tooltip for CSS; text rotate, text and box shadow, and RGBA for CSS3.

Microsoft: CSS Gradient Background Make

Generate IE10+, Firefox, Chrome, Safari compatible CSSS for gradient effect. Choose from gradient style, stops, position, and size with preview.

ColorZilla: Ultimate CSS Gradient Generator

Generate IE9+, Firefox, Chrome, Safari compatible CSS or SCSS for gradient effect. Choose from presets, then customize stops, hue/saturation, orientation, and size with preview.

CSSTableGenerator

Visualize table design and generate both CSS and HTML tags. Support for many different browsers and versions.

CSS How-To

It is always a problem when we need to deal with different browser and version. Sometimes, it may be solved quickly with CSS3 but no with CSS. Here is a list of problems I have encounter before.

Auto-Resize Image

StackOverflow: css image background in body auto-resize

For CSS3 compatible browsers, use background-size:100%. For others, read answer by Brent Friar.

Customize Navigator with Selector

StackOverflow: How do I underline parent menu item but not children?
CSS-Tricks: Child and Sibling Selectors
tuts+: The 30 CSS Selectors you Must Memorize
sitepoint: Universal Selector
Finn Yu: CSS 選擇器、選取器（Selector）種類簡介

When playing with a WordPress Plugin “Advanced Menu Widget”. I want to change the icon of an unfold item but keep others the same. You need to use child combinator (>).

Create Responsive Table

Simon Elvery: Responsive Tables Demo

Change the layout of a table to best fit the resolution of user device without JavaScript. Try with Responsive Design Mode in Firefox.

postiion:fixed with IE

Mark “Tarquin” Wilton-Jones: Making IE 5.5+ use position: fixed;
StackOverflow: How to fix Absolute Positioning In IE8?
W3Help: RM8013: IE6 IE7(Q) IE8(Q) 不支持固定定位（position:fixed）

To many front-end developers, IE is always difficult to handle. Different version and incompatible to CSS standard. You will need to use CSS offsetWidth and offsetHeight or JavaScript to work around.

Chinese and English are not with the same vertical baseline

学而得：IE下中英文不对齐的原因和解决办法

In IE 6, sometimes a sentience mixed with certain Chinese and English fonts will use different baseline. It’s very difficult to handle with CSS. The easiest way is to change font.

CSS Cheat Sheet

Smashing Magazine: CSS3 Cheat Sheet (PDF)

Althogh it is originally from Veign: CSS3 Quick Reference Guide, it is not longer available and please download from Smashing Magazine.

Cheat sheet are very handful quick reference to look up CSS properties.

Others

HTML Symbols

Develop PHP: HTML Symbols: Popular SymbolsDevelop PHP: HTML Symbols: HTML Symbols

It is easier and needs less bandwidth to use html symbols than image files. The above links provides the most complete and easy to search list of html symbols.

Twitter Bootstrap

Bootstrap
Bootswatch
Bashooka: 15 Great Twitter Bootstrap Resources

Bootstrap is a great tool for programmer to mokup or prototype. It contains predefined CSS for many UI components. With Bootswatch, you may switch from themes for Bootstrap quickly. 15 Great Twitter Bootstrap Resources from Bashooka contains more tools for Bootstrap.

Reference

1. {CSS} Portal
2. 1keydata.com: CSS Tutorial
3. Bashooka: 15 Great Twitter Bootstrap Resources
4. Bootstrap
5. Bootswatch
6. Color-Hex
7. ColorZilla: Ultimate CSS Gradient Generator
8. CSS-Tricks: Child and Sibling Selectors
9. CSSTableGenerator
10. Develop PHP: HTML Symbols: Popular Symbols
11. eion: HTML 顏色代碼 (十六進位值色碼)
12. Finn Yu: CSS 選擇器、選取器（Selector）種類簡介
13. JavaScripter.ner: RGB-to-Hex Conversion
14. Mark “Tarquin” Wilton-Jones: Making IE 5.5+ use position: fixed;
15. Microsoft: CSS Gradient Background Maker
16. Simon Elvery: Responsive Tables Demo
17. sitepoint: Universal Selector
18. Smashing Magazine: CSS3 Cheat Sheet (PDF)
19. StackOverflow: css image background in body auto-resize
20. StackOverflow: How do I underline parent menu item but not children?
21. StackOverflow: How to fix Absolute Positioning In IE8?
22. tuts+: The 30 CSS Selectors you Must Memorize
23. Veign: CSS3 Quick Reference Guide
24. W3C: Cascading Style Sheets home page
25. W3C: CSS tutorial starting with HTML + CSS
26. W3Help: RM8013: IE6 IE7(Q) IE8(Q) 不支持固定定位（position:fixed）
27. WordPress Plugin: Advanced Menu Widget
28. 学而得：IE下中英文不对齐的原因和解决办法