The Future Of CSS: Embracing The Machine

http://coding.smashingmagazine.com/2011/11/07/the-future-of-css-embracing-the-machine/

CSS Table Video Tutorial

http://www.thewebsqueeze.com/web-design-tutorials/css-table-tutorial.html

Used it for creating forms menu

http://aplus.rs/adxmenu/examples/htb/

The Guide To CSS Animation: Principles and Examples

http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

An Introduction To LESS, And Comparison To Sass

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

Writing CSS For Others

Very interesting article:
http://coding.smashingmagazine.com/2011/08/26/writing-css-for-others/

The Semantic Grid System: Page Layout For Tomorrow

http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

8 Useful CSS Tools

http://webdesignledger.com/tools/8-useful-css-tools

Responsive Web Design Techniques, Tools and Design Strategies

http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Behind The Scenes Of Nike Better World

http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

Learning To Use The :before And :after Pseudo-Elements In CSS

http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

CSS is preprocessed on the server-side

http://pcss.wiq.com.br/
http://www.webresourcesdepot.com/php-driven-css-preprocessor-pcss/

39 Ridiculous Things To Do With CSS3 Box Shadows

http://www.viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows/

CSS: Learn: 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer

*****
http://www.makeuseof.com/tag/5-baby-steps-learning-css-kickass-css-sorcerer/

The Next Steps On The Road To Becoming A CSS Jedi Master

http://www.makeuseof.com/tag/steps-road-css-mastery/

Five Useful Interactive CSS/jQuery Techniques Deconstructed

http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted/

A Guide to CSS Colors in Web Design

http://sixrevisions.com/css/colors-webdesign/#more-5502

Color Opacity and Transparency in CSS

CSS Sprites: by A List Apart

http://www.alistapart.com/articles/sprites

An Introduction To CSS3 Keyframe Animations

http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

CSS: The Future Of CSS: Experimental CSS Properties

http://www.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/

CSS3: To Gracefully Degrade or Progressively Enhance?

http://www.smashingmagazine.com/2011/05/03/using-css3-older-browsers-and-common-considerations/

CSS3 Generator

http://css3generator.com/
http://www.colorzilla.com/gradient-editor/

Using CSS3 Transitions, Transforms and Animation

http://css3.bradshawenterprises.com/

CSS3 vs. CSS: A Speed Benchmark

http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

CSS: How To Use CSS3 Pseudo-Classes

http://www.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/
An excellent article to learn about CSS Pseudo Classes. 

CSS: CSS Typography: Examples and Tools

http://sixrevisions.com/css/css-typography-03/#more-5055

CSS: 100+ Massive CSS Toolbox

http://www.tripwiremagazine.com/2009/04/css-mega-toolbox.html

CSS3: Embracing and Using CSS3 Pragmatically

http://sixrevisions.com/css/embracing-and-using-css3-pragmatically/#more-5107

CSS Technique: Styling Elements With Glyphs, Sprites and Pseudo-Elements

http://www.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/

Layout: StackLayout – Flexible & Modular CSS Layouts

http://www.stacklayout.com/

CSS framework which supports both fluid and fixed-width layouts.

Compared to many popular grid systems, it only uses 12 class names in total and makes use of inline-block CSS property rather than floats.

Stacks can be nested infinitely which helps creating complicated layouts easily.

The framework has a component (a CSS file) which eases building cross-device compatible versions of websites.

StackLayout is compatible with most of the browsers, few old ones has some issues which can be fixed with the help of the documentation provided.

CSS: CSS Typography: Techniques and Best Practices

http://sixrevisions.com/css/css-typography-02/#more-5033

Just include a copy of the font’s file on your web server and use the @font-face rule in your CSS code as follows:

@font-face {
  font-family: CurlzMTRegular;
  src: url(fonts/CurlzMTRegular.eot);
}

Then just use the font-family declared above with your CSS:

h1, h2, h3, h4, h5, h6 {
  /* Always use a font stack, even with custom web fonts! */
  font-family: CurlzMTRegular, Helvetica, Arial, sans-serif;
}



The concept of vertical rhythm is simple: Line heights, margins, and padding should all be equal or within even proportion.

Here’s an example:

p, ol, ul, blockquote, pre, code {
  line-height: 18px;
  margin-bottom 18px;
  /* 1.5em provides good vertical spacing ( = 150% of the font-size) */
  line-height: 1.5em;
  margin-bottom: 1.5em;
}


CSS3 Text Shadows:

p {
  text-shadow: 1px 1px 1px #000;
}


To create inset text, you can use negative values as such:

h1  {
  /* Use negative offsets to create inset text. */
  text-shadow: #000 -1px -1px 0;
}

Creating Rounded Corners with CSS3

http://www.webvanta.com/post/213587-creating-rounded-corners-with-css3

First CSS Website

http://www.w3.org/Style/Examples/011/firstcss

CSS: Reduce file size by effective CSS Coding

http://www.scriptiny.com/2008/04/effective-css-shorthand/

CSS: CSS Typography: The Basics

http://sixrevisions.com/css/css-typography-01/#more-5027
http://sixrevisions.com/css/css-typography-02/#more-5033


FONT:
font-sytle: oblique;
font-weight: bold;

TEXT:
text-indent: 50px; (indents the first line of a text block.)
letter-spacing: 2px;

OTHER:
Color: red; (controls an HTML element’s foreground color)
---------------------------------------------------------------
FONT SIZING:

Absolute-size:
xx-small, x-small, small, medium, large, x-large, xx-large.

Relative-size:
div {
  font-size: 12pt;
}
p {
  font-size: large;
}
As an example, if text is set to 12pt, the 'large' keyword will resize the child element’s text to about 12pt x 1.2 (depending on the browser), which would equal 14.4pt.

Absolute Lengths:
pt, px, mm, cm, in, and pc.

Millimeters (mm), centimeters (cm), and inches (in) are more suitable in print design. They are not very suitable for screen-based measurements because of the high variance of screen resolutions.

 If developing for an audience that will likely resize text manually through their web browser, the px unit of measurement may not be a good option.

Relative Lengths:
This means that their sizes are dependent on the font-size assigned to their parent element. Possible units are em, % and ex.

em and % values are far easier to work with. em and % act identically, and it’s just a matter of syntax:

0.5em is equal to 50%
1em is equal to 100%
0.2em is equal to 20%
0.73em is equal to 73%
2.21em is equal to 221%

html, body {
  font-size: 85%; /* = (.85em) */
}

h1 {
  font-size: 110%; /* = (1.1em) */
}
-----------------------------------

FONT STACKS:

So when developing font stacks:

Make sure you account for the different operating systems (Windows, Mac, and Linux).
Make sure a font stack is all sans serif or is all serif (for consistency)
Make sure the fonts in the stack have similar aspect ratios.
http://www.awayback.com/revised-font-stack/
-----------------------------------
CSS Typography Pseudo-classes and Pseudo-elements:


a:link { color: #666666; text-decoration: none; }
a:visited { color: #333333; }
a:hover { text-decoration: underline; }
a:active { color: #000000; }
----
First, Last, and n-th Pseudo-elements:

(Creating drop caps)
p:first-letter {
  font-size: 30pt;
  display: block;
  float: left;
  margin: 0 5px 5px 0;
}

(:first-line)
p:first-line {
  font-weight: bold;
  text-transform: uppercase;
}

( :nth-child() )
p:nth-child(2) {
  background: #e7f0ce;
  padding: 10px;
}

Also play around with :nth-child(even) and :nth-child(odd) pseudo-classes to grab even and odd elements.

HTML5 & CSS3: Take Your Design to Another Level

http://webdesignledger.com/tips/html5-css3-take-your-design-to-another-level