Most would probably agree that CSS is one of the most important parts of modern standards based web design. CSS is really simple and extremely powerful if you know how to master it… if your new to CSS getting started can be quite hard. I hope this article will help you all to get more out of CSS in your web projects.

To make it easier for you to find exactly what you need the article has been split up in the following sections.

• CSS Blank Layouts
• CSS Grid Design
• CSS Frameworks
• CSS Optimizer and Compressor
• CSS CheatSheet
• CSS Reset

CSS Blank Layouts

• Code-Suck CSS Layouts- There are a total of 42 faux-column and 53 fixed-width CSS layouts for downloading. All markup has been validated against a strict Doctype.
  

  Code-Suck CSS Layouts

• CSSPlay CSS Layouts - Stu Nicholls - Three columns, CSS frame, “Fixed”, Cross browser….
• ___layouts - The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom”-style scaling effect and two core templates that give you the ability to nest subdivided regions of one to four columns. The framework supports fluid-width layouts and fixed-width layouts.
• Layout Gala- In November 2005 He presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts that they've thought worth sharing: on each of them you'll find also a download link (if you want, you can download the entire collection, 40 HTML pages in a single zip file). Further details can be found below the gallery.
  

  Layout Gala

• CSSEasy- CSS Easy is a great site if you are learning CSS or just would like to copy and paste some script, But it's more fun learning and doing it yourself then copy and paste
  

  CSSEasy

• MaxDesign Sample CSS Layout - Here are a range of CSS page layouts, including 2 column and 3 column layouts - free to use and abuse as needed.
• IronMyers CSS Layouts- These CSS Layouts offer full Grade-A browser support. That means that these CSS Layouts will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS Layouts have been optimized to give you the best possible search engine results. Use these CSS Layouts anywhere you wish. They are perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use these CSS Layouts to optimize your Web Development workflow. These CSS Layouts are done in Pure CSS, not tables.
  

  IronMyers layouts

• ThreeColumnLayouts - The question of finding good 3 column layouts comes up in the mail list from time to time. Here are some that I have found, along with a few notations about what features they include and how they work. The judgment of "good" is left to you and your needs. Each offers interesting techniques for the CSS student. By the way, when visiting these places, look around; many of these people offer other layouts that I have not included here.

CSS Grid Design

Sure, if you use grids, you'll have to add some necessary HTML tag markup to your content, thus increasing page file sizes. Also, this means that markup and style are not truly separated - a tenet which many web designers would like to adhere to. (Some people feel, rightly or wrongly, that naysayers of CSS frameworks are designers who are worried that the need for their services will decline. Though, with this logic, coders are in trouble, too, especially with the increase in cross-browser code libraries such as jQuery.)

• 960 Grid System- The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  

  960 Grid System

• DesignShack Grid CSS Gallery
  

  DesignShack Grid CSS Gallery

• Variable Grid System- The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
  

  Variable Grid System

• Grid Designer- If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory.
  

  Grid Designer

• Design By Grid PNG Grid Generator- Grid based design for websites is becoming more popular, but the technique is still somewhat unknown.Design By Grid is a resource to promote websites designed with grids, and the tools and techniques used to make websites with grids.
  

  Design By Grid PNG Grid Generator

• nP: Grid Generator- Use this generator to design a layout structure, specifying column, margin and gutter sizes, all referencing a core unit (in pixels). The resulting css is then ready for use in your next html layout.
  

  nP : Grid Generator

• Gridinator- All grids are provided without guarantee, warranty or a cup of tea. There is a possibility that some em-based widths will not calculate correctly due to rounding errors; in the event of this, select another body font size. Also, the JavaScript generated numbers may not always exactly match those generated in the CSS file — rounding is a horrible thing.
  

  Gridinator

• Grid System Generator - The grid system generator will create fixed grid systems in valid css / xhtml for rapid prototyping, development and production environments.In addition to the css framework, it creates a background file that you can use in Fireworks, Illustrator, OmniGraffle, Photoshop, Visio (etc.) to aid in prototyping and design.
• Blueprint Grid CSS Generator - This tool will help you generate more flexible versions of Blueprint's grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.
  

  Blueprint Grid CSS Generator

• The 1KB CSS Grid- This is a fresh take on the CSS grid. It can be used to streamline page templates for content management systems, its mission is to be lightweight.
  

  The 1KB CSS Grid

• Yahoo! YUI Grids CSS, Grids Builder.This framework, which predates Blueprint, comes with six preset templates and four preset widths, and the layouts accomodate IAB ad unit guidelines. YUI Grids CSS is integrated with the rest of the Yahoo! UI (User Interface) Library.
• Blueprint CSS Grid Framework.Robustdespite only being in V0.7 (as of this writing), with lots of support from designers, and numerous tools for generating CSS code (beyond the standard 24-column, 950 px default framework). Supports the use of Blueprint "plugins".
  

  Blueprint CSS Grid Framework

CSS Frameworks

Here's a short list of some of the more popular frameworks:

• YAML, YAML Builder.YAML(Yet Another Multicolumn Layout) has a fair bit of maturity, is builton web standards, and is supposedly easy to use. Though it doesn't seem to have all that much use in the WordPress community. In fact, in the many hundreds of WP themes I've looked at for the last three years, I don't recalling seeing it used once. That might be because you need a license to use it with some CMSes (Content Management Systems).
• CSS Boilerplate. Produced as a stripped down framework by one of the original Blueprint authors.
• Sparkl. The documentations says you can create 1-, 2-, or 3-column pages, but the samples suggest you have more flexibility.
• CSS Drop-Down Menu Framework
  • Modular, with themes. Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent. What is more, creating a new theme is easy with available templates and takes 10-15 mins.
  • Easily deployable. The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML format.
  • Easily transformable. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
  • Cross browser. Configurations available for Windows Internet Explorer 5 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later, Google Chrome 1, etc.
  • JavaScript only for IE. Minimal JavaScript code only for IE 6> or earlier. Can be used with popular JavaScript libraries Jquery or Scriptaculous. Everything else is pure CSS.
  • Super Fast. Having the above mentioned features it is not affected by any disturbances whatsoever.
  • Continuous development. The project is constantly revised and improved.
• MoreCSS Framework - imagine creating popups, tab menus or tooltips could be ad easy and comfortable as writing some style in CSS.
• Elements CSS Frameworks - Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it's its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.
• CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it's cleaner and more powerful than CSS2 is.
• Tripoli CSS Framework - Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

CSS Optimizer and Compressor

• Conditional-CSS- Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements for both individual browsers and groups of browsers.
  

  Conditional-CSS

• WordOffapplies some rules to strip the cruft that is pasted into WYSIWYG editors from Word. For example, attributes are removed for all elements except <a>, <span> and <div>, empty elements are removed and consecutive line breaks are reduced to two. It also contains an API.
  

  WordOff

• Kotatsu - Kotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.
  

  Kotatsu

• Deploy- Deploy is a free open-source Web application that allows you to choose the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. The tool has been optimized for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites.
  

  Deploy

• CSS Tidy Online- An online version of CSS Tidy, a tool that allows you to keep your code clean by compressing the code.
  

  CSSTidy Online

• The W3C CSS Validation Serviceis a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server.Do you need it? If you are a Web developer or a Web designer, this tool will be an invaluable ally. Not only will it compare your style sheets to the CSS specifications, helping you find errors, typos, or incorrect uses of CSS, it will also tell you when your CSS poses some risks in terms of usability.
  

  The W3C CSS Validation Service

• Online CSS Optimizer/Optimiseris a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.
  

  Online CSS Optimiser/Optimizer

• CSS Compressor- Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.
  

  CSS Compressor

  The "Normal" mode should work well in most cases, creating a good balance between the two.

CSS CheatSheet

A cheat sheet or crib sheet is a concise set of noused for quick reference. "Cheat sheet" may also be rendered "cheatsheet" or "cheat-sheet." In India, the term "Ready Reckoner" is mainly used to describe the cheat sheets. Examples include Income Tax at various levels of Taxable Income, Rate Charts for cabs etc.

I'm not make any screenshot of CSS Cheatsheet which I've found on the internet because it's not necessary.

• CSS Shorthand CheatSheet
• Blueprint CSS Cheat Sheet
• Leslie Franke CSS CheatSheet
• CSS 2 - Quick Reference Guide - PDF
• Addedbytes CSS Cheat Sheet
• CSS Property Index
• Cheat Sheet CSS Shorthand Codes

CSS Reset

Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately - setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

• Meyer CSS Tool: CSS Reset - The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.
• YUI Library: Reset CSS - The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.
• Tripoli - Tripoli is “a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.”A set of default-CSS-filesis supposed to give you a profound foundation for cross-browser compatible CSS-based designs. All default-values - including dozens of elements - tables, lists, typography, but also headers (h1 - h6), abbreviations, citations, quotes and forms are selected to enable an optimal legibility and well-structured text presentation.
  

  Tripoli CSS Reset

• Master Stylesheet - A lot of designers clear the styling with a global reset, but there’s a problem with doing this. Form buttons and fieldsets are among the few elements that are completely destroyed with the global reset. They lose their native styling that goes beyond the browser. Instead, you should pick-and-choose the elements you want to reset. It also makes it easier to apply your own style to common elements.
• HTML 5 Reset Stylesheet - HTML 5 is new standart, then now I've found HTML 5 Reset Stylesheet which based on Meyer CSS Tool: CSS Reset
• Ed Eliot's Reset - Less is more.

This article I would like to temporarily end here, it is not listed ambitions are all the services, the most efficient tool to support writing CSS code. Each part of Powerful and Userful CSS Tools to saving your time will be more specific with many practical examples and it will continue to public in the next articles.

CSS and Form

• JotForm is a great Web based WYSIWYG form builder. You can select a form type(Contact Us, Satisfaction Survey, Job Application, Suggest Website , Membership Registration, Party RSVP , Wedding Attendance, Reservation, Submit Product, and others). Your new form will be created with the default fields on the selected form.
  

  JotForm

• CSS Form Builder - CSS Form Builder automatically generates forms that are compliant with accessibility standards. Combine that with the power and control that you get from using CSS and your web form creation just got a lot easier!
• CSS Form Code Maker - Generates 'Colorful Box Layout' For Forms. This HTML - CSS form generator will create a nice looking layout for forms. The time is now right - to move to 'tableless' layout for forms. And at the same time, add a 'little color' to the forms.
• Wufoo- Wufoo is an online HTML form builder that helps you create contact forms, web surveys and invitations so you can collect information, registrations and payments without writing a single line of code.
  

  Wufoo

• 

  FormLogix

  FormLogix is an online form builder tool for creating web databases and web forms. The forms may be embedded in your website, blog, or may be used internally. Forget all you know about databases and forms creation - form builder is a WYSIWYG tool and it requires zero coding skills. It enables a user to easily create web forms and web databases such as: Contact us forms, Feedback forms, Events registration forms, Surveys, online Polls, Order forms, Invitations, CRM...

I'm not add more Form Generator Services cause it can make JS and CSS to generator a form, it will be mentioned in an article in time to come.

CSS and Navigation

• CSS Menu Generator - will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.
• 

  List-O-Matic

  List-O-Rama will allow you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish. The code is automatically generated and inserted in your page. It can't get any easier than this.

• CSS Menu Builder With 30+ horizontal menus, 700+ vertical menus combinations and breadcrumb menus that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.
• 

  13Styles - CSS Menus

  13 Styles - CSS Menu Generator - The menus are list based, very light-weight, easy to implement, and cross-browser compliant.

  All the menus are free, though you can purchase the original PSD images to customize certain menus for $24.99.

• CSSMenuMaker.com is here to provide the average webmaster with tools to create custom, cross browser compatible website menus. Our menu generator makes it easy to create custom CSS menus without having to know all the complicated HTML and CSS. If you are a more experienced web developer we provide the sources code for all our CSS menus so that you can download, tweak, and integrate as much as you want. Feel free to use our CSS menu generator an unlimited amount of times. The only thing that we ask is if you find this site useful, help us spread the word by linking to us or bookmarking us with digg.com or del.icio.us.
• Listamatic and Listamatic 2 - Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list.
• 

  MyCSS Menus

  MyCSSMenu provides the average webmaster with tools to create custom, cross browser compatible css menu. Our generator makes it easy to create custom web navigation: Horizontal, Vertical, Drop-down menu without having to know all the complicated HTML and CSS. If you are a more experienced web developer we provide the sources code for all our CSS menus so that you can download, tweak, and integrate as much as you want. Feel free to use our CSS menu generator an unlimited amount of times.

So you've finished reading section 2 of the article, the next section will talk about the CSS Frameworks and optimization tools, and CSS compressors.

Image copyright by Josep W. Lowery

Font and Typography

• Em Calculator - Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
  
• text sizing - up the garden path - I've also discovered a useful glitch by setting the base font size set to 100% when using sub 1 ems. This keeps IE PC from going microscopic. I have no idea why. It effects a few other browsers too, so in many of the examples I've added this ruleset to learn more about the quirk.
• CSS Font and Text Style Wizard - This wizard is good to experiment with font and text styles and generate sample CSS style source code.
• Typechart - Typechart lets you flip through, preview and compare web typography while retrieving the CSS.
  

  Typechart

• Hyphenator - Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation.
• Font Tester - Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.
  

  Font Tester

• CSS Type Set - CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content.
  

  CSS Type Set

• EM Calculator AIR application - This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings automatically, depending on the line height you’ve defined. Very useful.
  

  EM Calculator AIR application

• TypeFace - Instead of just creating images or using Flash to show your website’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. With typeface.js you can embed custom fonts in your web pages so you don't have to render text to images.
  

  typeface.js - Rendering text with Javascript, -canvas-, and VML

• CSSTXT - CSSTXT is an uncomplicated web tool for generating CSS style rules for web typography.
  

  CSSTXT

• Better CSS Font Stacks - One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.

CSS and Layout Generators

• Scriptomizers - Stylesheet Generator
• CSS Frame Generator - This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure - each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better.
  

  CSS Frame Generator

• CSS Sprite Generator - CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

I got big problem when I've added new item then the post content disappear sorry fo inconvenient
Above is part 1 of full artict. To be continuous...