CSS Guru

Awesome Speech Bubbles With Pure CSS3

2010-03-10T21:37:00.000+05:30

Nicolas Gallagher is sharing a creative way on creating good-looking speech bubbles with CSS3.

There are no images or JavaScript in the implementations but uses the :before and/or :after pseudo-elements to produce basic shapes.

The HTML remains semantic however we should remember that CSS3 is not fully supported by all major browsers & we may again require JavaScript to add this support (like IE7.js).

Compatibility: Browsers With CSS3 Support
Website: http://nicolasgallagher.com/progressive-enhancement-...
Demo: http://nicolasgallagher.com/demo/pure-css-speech-bub...

CSS3, Please! – The Cross-Browser CSS3 Rule Generator

2010-03-10T21:35:00.000+05:30

CSS3, Please! is a web-based & simple-yet-effective cross-browser CSS3 rules generator.

As every browser may require different prefixes for the CSS3 properties, this tool makes it so easy by providing them all with an editable & well-commented way where the output can be seen instantly.

Currently, it helps you write the rules for: border-radius, box-shadow, linear-gradients, rotation & @font-face. Some other transforms like skew & scale will be added soon.

For some transforms, that Internet Explorer can support via IE filters, they are mentioned too.

Website: http://css3please.com/

HTML 5 And CSS3 Cheat Sheets Collection

2009-09-17T09:37:00.000+05:30

As the processes in HTML 5 & CSS3 working groups move forward everyday, it is getting much more clear that new standards are not too far.
There are lots of new tutorials, resources being created on HTML 5 / CSS3 including cheat sheets which are very functional helpers for anyone willing to code with these standards.
Although there are (currently) few around, here is a collection of HTML 5 and CSS3 cheat sheets:
P.S. the list will be updated with the new ones once they are created, please feel free to share them.

HTML 5 Cheat Sheets

HTML 5 Visual Cheat Sheet

Read the rest of this entry »

Easier Layouts Using Elastic CSS Framework

2009-07-19T23:43:00.000+05:30

Elastic is a simple CSS framework which eases creating elastic, fixed and liquid layouts with any column variations.
Using Elastic is like having a conversation with the code as it uses a declarative language.

It supports "combining classes" which helps creating almost any type of layout. And, it comes with a set of helper classes, to accomplish hard things by pure CSS like: same-height, full-width, and vertical-center.
Another nice feature is: both absolute & relative positioning can be used as no overlfow:hidden & clearfix are used.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://elasticss.com/
Demo: http://elasticss.com/elastics-sites-gallery
Download: http://github.com/azendal/elastic/downloads

The 1Kb CSS Grid Framework

2009-06-23T22:22:00.000+05:30

There are various CSS frameworks which offer a grid system, a style reset, basic typography, form styling & more.
But, if you only need a lightweight grid framework to build the skeleton of your website, take a look at the 1Kb CSS Grid.

It supports both fluid grids besides the fixed-width ones and nested rows can be created.
The website of the framework provides a generator to customize the grid & download the CSS easily.
Also, Usability Post has a very detailed introduction to the 1Kb CSS Grid in 3 steps. To dig the details, make sure you check them:

Introduction
Using The Grid For Templating
The Details (nested rows, fluid grids..)

Website: http://www.1kbgrid.com/
Demo: http://www.tylertate.com/grid/nested/demo.html

Organize Your CSS With Styleneat

2009-05-06T21:37:00.001+05:30

Styleneat is a free web service that helps having "easy to read/update" CSS files.
It organizes and standardizes CSS - selectors, sub-selectors and properties - in a structure that makes it easier to define page areas and see how they relate to each other.

The service can be used in 3 ways:

by pasting the CSS text
by uploading the CSS file
by providing the URL of the CSS file

It offers several options like "sorting properties and selectors alphabetically" or "single/multiple line formatting".

Website: http://styleneat.com/

Easy CSS Grids: Grid System Generator

2009-04-26T00:41:00.000+05:30

Grid System Generator is a website that asks for grid width, number of columns, margin-left/right & creates a fixed grid system with valid xhtml/css.
Besides the CSS framework, a .PNG background file is created as well to help in prototyping and design.

The generator is based on 960.gs & displays already created grids which can be found here.
You can also find instructions on using the generator & links to resources about grid systems.
P.S. Another 960.gs based grid generator can be found here.

Open Source Online HTML Editor: Xinha

2009-03-27T23:42:00.000+05:30

Xinha is a powerful & open source HTML (WYSIWYG) editor.
It is a community-built script presenting various options for max. customization.

It has lots of plugins that can be activated like:

Character counter
Find & replace
Image manager
HtmlTidy
Spell checker & more.

It is possible to configure which features/menus to be displayed, whether coding inside will be permitted or not & almost anything that may be needed.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://xinha.webfactional.com/
Demo: http://xinha.webfactional.com/wiki/Examples
Download: http://xinha.webfactional.com/wiki/DownloadsPage

Golden Grid: A CSS Grid Framework

2009-03-26T23:22:00.000+05:30

Vladimir Carrer, who also created the Emastic & Malo CSS frameworks has a fresh framework named Golden Grid.
It is a web grid system, that is totally focused on grid-based designs (not a complete CSS framework).

Golden Grid uses float:left approach for building grids rather than positions.
It is a 6/12 column grid system with a 970px main width. Total file size is <1kb when compressed.
To read more about it, you can check his blog post announcing the framework.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://code.google.com/p/the-golden-grid/

Get Color Palette By Uploading An Image

2009-03-26T23:21:00.000+05:30

Color Pallete Generator is a free web-based application that is creates the color palette of an uploaded image.
It supports .PNG, .GIF, .JPG, .JPEG images & creates 4 levels of palettes: light, medium, dark, complete.

The generator also prepares the related files for CSS & Photoshop swatches of the color palette created.
P.S. Up to 1 mb can be uploaded.

Website: http://www.cssdrive.com/imagepalette/index.php

SenCSs: A CSS Framework For All But Not The Layout

2009-01-26T16:00:00.000+05:30

SenCSs is a CSS framework that doesn’t provide a layout system but aims to take care of the rest, like:

fonts & font-sizes
paddings
margins
colors,
tables & lists
headers, blockquotes and what more..

SenCSs has support for forms which helps presenting them nicely (better form support is on the way).

There are also styles for elements like errors, warnings or success messages which are parts of a standard web application.
SenCSs, although being fresh & currently in development, is a nice base to start with & improve depending on your needs.
An example HTML file can be found here.

Website: http://sencss.kilianvalkhof.com/
Demo: http://sencss.kilianvalkhof.com/example.html

Powerful CSS Menu Creator: CSS QuickMenu

2009-01-26T11:19:00.000+05:30

Update 26.12.2008: This post is updated to reflect the original application.
CSS QuickMenu is a very powerful & web based CSS menu creator application.

After selecting the menu type & clicking the "customize menu" button, you can reach the editor.

The editor helps you to:

Add/remove/update menus & submenus
Update colors, fonts, borders..
Choose animations
Choose CSS shapes
Decide whether the menu will be reachable via keyboard or it will be horizontal/vertical & more..

It also enables you to add your own CSS styles and see the results instantly.
After creating the menu, HTML & CSS codes can be reached easilt via the "save" button.

Website: http://www.opencube.com/

CSS Menu Maker

2009-01-02T22:10:00.000+05:30

Free CSS Menu, Vertical & Horizontal
Available from... cssmenumaker.com

CSS cheat sheet

2009-01-02T16:00:00.000+05:30

CSS cheat sheet
Available free from ILoveJackDaniels.com

The CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size CSS cheat sheet.

Download:

Powerful CSS Menu Creator: CSS QuickMenu

2009-01-01T19:19:00.000+05:30

Update 26.12.2008: This post is updated to reflect the original application.
CSS QuickMenu is a very powerful & web based CSS menu creator application.

After selecting the menu type & clicking the "customize menu" button, you can reach the editor.

The editor helps you to:

Add/remove/update menus & submenus
Update colors, fonts, borders..
Choose animations
Choose CSS shapes
Decide whether the menu will be reachable via keyboard or it will be horizontal/vertical & more..

Software: CSS Menu Generator (FREE) CSS Tab Designer

2009-01-01T19:00:00.000+05:30

CSS Tab Designer

CSS Tab Designer is a freeware that let you visually make css-based menus or tabs. There are more than 60 different styles and colors included in the library. It can also generate strict xhtml compliant codes for your menus.

With the CSS Tab Designer, you can :

Quickly design your list visually
Choose from a variety of styles/colors (60+ different designs/colors supported).
Generate strict xhtml compliant code

Download (1.35 MB)

The Ultimate CSS Reference Feb 2008

2008-12-27T00:34:00.000+05:30

The Ultimate CSS Reference Feb 2008
PDF | English | 300 Pag | Feb26, 2008 | 5.4 Mb | RS

A complete and thorough and up-to-date reference guide for CSS.
Stop wasting time doing Internet searches only to find inaccurate, out-of-date, or incomplete information. CSS: The Ultimate Reference includes all the ins-and-outs you need to know including compatability information for all major browsers, lists of useful hacks, known bugs in CSS, and much more - all presented in a beautiful, full color layout that will have you coming back over and over again.

Download from RapidShare

more ebooks : http://ebookesguru.blogspot.com/

40 CSS Tutorial Reference

2008-12-25T15:27:00.000+05:30

This tutorials and guides or ebook are for understanding and using Cascading Style Sheets (CSS). It also shows several method for implementing CSS. This reference make you clear how to code CSS and how to change different formats using CSS.

This all are free Cascading Style Sheet tutorials (CSS) tutorials or ebook from industry experts that feature extensive information on CSS basics, tags, programming, and scripts.

Free CSS Menus: Styled Menus

2008-12-19T22:23:00.000+05:30

Styled Menus is a website presenting various free CSS menus.
Menus provided are cross-browser compatible & W3C validated.

There are currently 20 menus & new ones added regularly.
It is a handy resource to directly use them or to get inspired.

Compatibility: All Major Browsers
Website: http://www.styledmenus.com/

Malo: Ultra Small CSS Framework

2008-11-22T23:07:00.001+05:30

Malo is a very small CSS framework (0,25 kb compressed) for creating a structural base for small or medium web sites.
It is derived from Emastic CSS Framework (created by the same author - see WRD post).

Malo has two parts:

basic reset
grid system

It covers most of the grid scenarios & very ideal for anyone that doesn’t want to use a complete framework but get some essentials, specially grids, which are problematic in general.

Website: http://code.google.com/p/malo/

Cross-Browser CSS Drop-Down Menu Framework

2008-11-09T10:06:00.000+05:30

CSS Drop-Down Menu Framework is a free & cross-browser solution to create good looking menus.
Download package already contains examples but new themes can be created very easily.

Menus can be transformed by only changing the class name. Available transformations are:

horizontal
vertical left-to-right
vertical right-to-left
horizontal linear
horizontal upwards.

The framework normally uses only CSS but for IE6, there is a JavaScript file that must be included.

Free CSS Toolbox

2008-11-08T00:19:00.000+05:30

Free CSS Toolbox is a software that can save time of a web designer.
It is a set of tools that will help you in almost any process related to CSS.

Tools include:

Simple CSS Editor
CSS Formatter / Beautifier
CSS Compressor
W3C CSS Validation Service Intergration

The software is very easy to use as it is straight-forward.
Syntax checker of the editor saves time specially for fast CSS coders & the CSS beautifier works pretty well.
Currently, it only works in Windows environment.

Compatibility: Windows 2000, 2003, XP, Vista
Website: http://www.blumentals.net/csstool/index.php
Download: http://www.blumentals.net/csstool/download.php

Advanced jQuery Suckerfish Menu: Superfish

2008-10-02T23:44:00.000+05:30

Superfish is an advanced suckerfish menu plugin for jQuery.
It turns a standard CSS dropdown menu and tranforms it to a more powerful one (it gracefully degrades).

It supports both horizontal & vertical menus and unlimited sub-menus can be defined.
Considering the menu is generated from a CSS-dropdown menu, every sub can be easily styled too.

Other features of Superfish:

Suckerfish-style hover support for IE6.
Timed delay on mouseout.
Animation of sub-menu reveal.
Keyboard accessibility.
Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors.
Drop shadows for capable browsers – degrades gracefully for Internet Explorer 6. Can disable shadows completely via options object.
Can show the path to your current page while the menu is idle.
Optional callback functions. The ‘this’ keyword within the handlers you attach will refer to the animated ul sub-menu.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://users.tpg.com.au/j_birch/plugins/superfish/
Demo: http://users.tpg.com.au/j_birch/plugins/superfish/#e...
Download: http://users.tpg.com.au/j_birch/plugins/superfish/#d...
Via: http://www.pixey.de/superfish-jquery-menu/

Pixel Perfect: Overlay HTML On Websites For Better Testing

2008-09-12T22:36:00.001+05:30

Pixel Perfect is a Firebug plugin which enables you to overlay a web composition on any developed HTML.
By switching between on & off, you can see easily howmany pixels you’re off with the development.

You can play with the opacity of the overlay to better see or totally disable the design below.
Move controls enables you to fine tune the position of the overlay. To give an example, you can exactly position a new menu over an old one to see if it fits or not.

Requirements: Firebug
Website: http://www.pixelperfectplugin.com/

CSS Menu Builder: Create Menus Online

2008-09-07T19:41:00.001+05:30

CSS Menu Builder is an online menu builder which enables you to create30+ horizontal, 700+ vertical & breadcrumb menus (without the unlimited color combinations).

With an Ajaxed & simple to use interface, menus can be created on the fly and HTML, CSS & necessary image files can be downloaded easily (or a complete ZIP file can be downloaded).

Website: http://www.cssmenubuilder.com/

jQuery Image Gallery: Spacegallery

2008-07-28T23:37:00.000+05:30

Spacegallery is a very simple but nice image gallery built with jQuery.

It is a static gallery where images are hardcoded in the HTML and presented with a beautiful grow - fade out effect.

How to use?

After inserting the JS & CSS files into your webpages, create a div element with images inside like:

And call the gallery:

$('#myGallery').spacegallery({loadingClass: 'loading'});

You can also configure the perspective, border & animation duration.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://eyecon.ro/spacegallery

Custom Checkbox And Radio Buttons: CRIR

2008-07-21T23:34:00.002+05:30

CRIR is a combination of JavaScript & CSS that enables you to create custom checkbox and radio buttons.

Behind the scenes, CRIR does it with a visual trick by hiding the original form elements (but transferring any values to them) and replacing them with images.

Requirements: No Requirements
Compatibility: All Majosr Browsers
Website: http://www.chriserwin.com/scripts/crir/index.php

CSS Grid Framework: Emastic

2008-07-18T10:20:00.000+05:30

Emastic is a CSS grid framework aiming to ease creating elastic layouts.

It is created by the author of Hartija (see WRD post) & Formy (see WRD post) CSS frameworks and powers users with:

Personalized width of the page in em,px,%.
Use of fixed and fluid columns in the grid.
Elastic Layout with "em"

From the author:

I analyzed all the Grid CSS frameworks and almost everything connected with the Grid System. But I did not want to reinvent the wheel, just to improve the main defects of the existent CSS Frameworks and to add some new features.

Emastic is lightweight (compressed size is less than 4kb) and several examples can be found in the project page.

Compatibility: All Major Browsers
Website: http://code.google.com/p/emastic/

Free E-Commerce Template From CSS Creme

2008-07-06T01:02:00.001+05:30

CSS Creme has released a beautiful free XHTML-CSS e-commerce template which you can use in your projects or inspired from.

This e-commerce / e-shop templa

te features 3 pages:

Product listing template
Product detail template
Form template (contact us)

There are also ready-to-use hover tooltips inside the template.

Tip:

CSS Creme features other nice free CSS templates.

Website: http://csscreme.com/freetemplate/electronix/
Demo: http://csscreme.com/freetemplates/electronix/

Mootools Slideshow: Slideshow 2

2008-07-02T22:49:00.002+05:30

Slideshow 2 is an open source Mootools slideshow class for streaming and animating the presentation of images.

This Mootools slideshow offers impressive features with a great usability like calling it with 1 line of code:

new Slideshow('show', ['1.jpg', '2.jpg', '3.jpg'], { controller: true, hu: ‘images/’ });

When you mouse-over the images a slide-controller appears which lets you control the images. And, there are various transition effects that can be configured.

Features of Slideshow 2:

Dynamic resizing - Slideshow can accommodate any size presentation.
Thumbnails - intelligent, auto-scrolling, tracking, etc.
Full-featured controller - completely style-able with CSS.
Animated captions - plain text or formatted with HTML.
Fully accessible - Slideshow can be controlled with access keys.
Automagic slideshows - create slideshows from existing HTML images.
Varied hyperlinking options - allows for mashups with Lightbox, Slimbox, etc.
CSS slide transitions - designed in stylesheets, not javascript, allow for an infinite combination of effects (plus support for all Robert Penner transitions).
Unobtrusive and degradable - Slideshow even functions with Javascript turned off!

Several different implementations can be found at Slideshow 2 website.

Requirements: Mootools 1.2+
Compatibility: All Major Browsers
Website: http://www.electricprism.com/aeron/slideshow/
Download: http://code.google.com/p/slideshow/downloads/list

CSS Framework For Forms

2008-06-29T20:50:00.003+05:30

Formy is a simple-yet-functional CSS framework which enables you to create form layouts without tables, divs or lists.

Formy is created by Vladimir Carrer who had created the CSS print framework: Hartija (see WRD post). Thanks to him for the suggestion.

Formy uses Reset.css for maximum browser compatibility.

Here is how a simple form works:

With the download, there are already examples of vertical & horizontal forms.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://code.google.com/p/formy-css-framework/

Perfect Multi-Column CSS Liquid Layouts

2008-06-29T20:47:00.002+05:30

Perfect multi-column CSS liquid layouts is a series of website layouts use percentage widths and relative positioning and compatible the common web browsers (even Safari on the iPhone and iPod touch).

They’re also ’stackable’ so you can use multiple column types on the one page.

Features of these CSS layouts:

No CSS hacks
iPhone & iPod Touch compatible
SEO friendly
Full length column background colours
No Images
No JavaScript
Resizable text compatible
Stackable columns
Free to use

These free CSS layouts include 1-column, 2-column & multi-column ones.

Although there may not be a perfect layout with every new browser version, these layouts are promising.

HTML Dog: The Best-Practice Guide to XHTML and CSS

2008-06-19T11:20:00.000+05:30

book:HTML Dog: The Best-Practice Guide to XHTML and CSS
author:Patrick Griffiths
buy this book:amazon

The Art and Science of CSS

2008-06-19T11:14:00.000+05:30

book:The Art and Science of CSS
author:Jonathan Snook , Steve Smith , Jina Bolton , Cameron Adams , David Johnson
buy this book:amazon

CSS Hacks and Filters

2008-06-19T10:10:00.000+05:30

book:CSS Hacks and Filters
author: Joseph W. Lowery

CSS Essential Training

2008-06-18T11:51:00.000+05:30

Download: Lynda.com - Dreamweaver CS3 with CSS Essential Training
Those who are new to CSS, or who want to create more efficient and powerful style sheets, will benefit from Dreamweaver CS3 with CSS Essential Training. Instructor James Williamson teaches the entire process of CSS management in Dreamweaver, following a step-by-step workflow. He covers XHTML/CSS fundamentals, and working with typography, navigation, background properties, layout, and multiple media types. This in-depth training explores the entire process of creating site-wide style sheets, from concept to deployment. Exercise files accompany the course.

Download:
http://rapidshare.com/files/102571706/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part01.rar
http://rapidshare.com/files/102584159/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part02.rar
http://rapidshare.com/files/102596843/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part03.rar
http://rapidshare.com/files/102609403/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part04.rar
http://rapidshare.com/files/102621535/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part05.rar
http://rapidshare.com/files/102633400/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part06.rar
http://rapidshare.com/files/102644897/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part07.rar
http://rapidshare.com/files/102653873/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part08.rar
http://rapidshare.com/files/102661884/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part09.rar
http://rapidshare.com/files/102669500/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part10.rar
http://rapidshare.com/files/102675932/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part11.rar
http://rapidshare.com/files/102682130/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part12.rar
http://rapidshare.com/files/102688077/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part13.rar
http://rapidshare.com/files/102694162/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part14.rar
http://rapidshare.com/files/102698471/Dreamweaver.CS3.with.CSS.Essential.Training.up.by.wisnia481.part15.rar

Password:
www.darkwarez.pl

Core CSS: Cascading Style Sheets (2nd Edition)

2008-06-18T11:10:00.001+05:30

book:Core CSS: Cascading Style Sheets (2nd Edition)

author:Keith Schengili-Roberts

mor ebooks: http://ebookesguru.blogspot.com/

Professional CSS

2008-06-18T10:10:00.001+05:30

book:Professional CSS

author: Christopher Schmitt , Mark Trammell , Ethan Marcotte , Todd Dominey , Dunstan Orchard , Todd Dominey

Foreword:Jeffrey Zeldman

mor ebooks: http://ebookesguru.blogspot.com/

CSS Web Design FOR DUMmIES

2008-06-17T23:25:00.004+05:30

book:CSS Web Design FOR DUMmIES
author: Richard Mansfield
buy this book:amazon

CSS: The Missing Manual

2008-06-17T22:48:00.003+05:30

book:CSS: The Missing Manual

author(s): David McFarland

buy this book:link

Get More ebooks: http://ebookesguru.blogspot.com/

CSS Cookbook

2008-06-17T22:41:00.004+05:30

book:CSS Cookbook

author:Christopher Schmitt

buy this book:amazon

Get More ebooks: http://ebookesguru.blogspot.com/

CSS Instant Results

2008-06-17T22:33:00.004+05:30

book:CSS Instant Results

author:Richard York

buy this book:amazon

Get More ebooks: http://ebookesguru.blogspot.com/

Expert Ideas For Better CSS Coding

2008-06-11T21:35:00.000+05:30

CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

1.1. Workflow: Getting Started

After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.” [CSSing]

Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.”
```
master.css
 @import url(”reset.css”);
 @import url(”global.css”);
  @import url(”flash.css”);
@import url(”structure.css”);  
```
```
<style type="text/css" media="Screen">
 /**/@import url("css/master.css");/**/
</style>  
```

Reset your CSS-styles first. “You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. [Roger Johansson]

Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class="floatLeft alignLeft width75">...</p>), make use of them debugging your markup.
```
CSS:  .width100 { width: 100%; }
.width75 { width: 75%; }
 .width50 { width: 50%; }
 .floatLeft { float: left; }
 .floatRight { float: right; }
.alignLeft { text-align: left; }
 .alignRight { text-align: right; }  
```

Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file.

1.2. Organize your CSS-code

Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
```
h2 { }  #snapshot_box h2 {
 padding: 0 0 6px 0;
font: bold 14px/14px "Verdana", sans-serif; }
 #main_side h2 {
color: #444;
  font: bold 14px/14px "Verdana", sans-serif; }
 .sidetagselection h2 {
 color: #fff;
font: bold 14px/14px "Verdana", sans-serif; }  
```

Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
```
/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/  
```

Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven]

Organize your CSS-styles, ordering properties alphabetically. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.” [Christian Montoya]
```
body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;  }  
```

Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks]

Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.” [Ryan Parr]

Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.” [Jonathan Snook]

1.3. Workflow: Handling IDs, Classes, Selectors, Properties

Keep containers to a minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.” [Ryan Parr]

Keep properties to a minimum. “Work smarter, not harder with CSS. Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place.” [CSSing]

Keep selectors to a minimum. “Avoid unnecessary selectors. Using less selectors will mean less selectors will be needed to override any particular style — that means it’s easier to troubleshoot.” [Jonathan Snook]

Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life]

Use CSS Constants for faster development. “The concept of constants – fixed values that can be used through your code [is useful]. [..] One way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define ‘constants’. A common use for this is to create a ‘color glossary’. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.” [Rachel Andrew]
```
# /*
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */  
```

Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. [10 CSS Tips]

Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes. [Garrett Dimon]

Group selectors with common CSS declarations. “Group selectors. When several element types, classes, or id:s share some properties, you can group the selectors to avoid specifying the same properties several times. This will save space – potentially lots of it.” [Roger Johansson]

Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven]

Move ids and class naming as far up the document tree as you can. Leverage contextual selectors as much as possible. Don’t be afraid to be verbose in your selectors. Longer selectors can make css documents easier to read while also cutting down the chances of developing class- or divitis. [Chric Casciano]

Learn to exploit the cascading nature of CSS. “Say you have two similar boxes on your website with only minor differences - you could write out CSS to style each box, or you could write CSS to style both at the same time, then add extra properties below to make one look different.” [5 Steps to CSS heaven]

Use Your Utility Tags: <small>, <em> and <strong>. “Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else.” Instead, use semantic tags. [Mike Rundle’s 5 CSS Tips]

1.4. Workflow: Use shorthand notation

Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699 [Roger Johansson]

Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer]
```
a:link { color: blue; }
a:visited { color: purple; } 
a:hover { color: purple; } 
a:active { color: red; }  
```

Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson]

You can use shorthand properties. “Using shorthand for margin, padding and border properties can save a lot of space.

CSS: 
margin: top right bottom left; 
margin: 1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)

CSS: 
border: width style color; 
border: 1px solid #000;

CSS: 
background: color image repeat attachment position; 
background: #f00 url(background.gif) no-repeat fixed 0 0;

CSS: 
font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family; 
font: italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

1.5. Workflow: Setting Up Typography

To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook]

Use universal character set for encoding. “[..] The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 should be included in your web page’s head like this. [20 pro tips]
```
<meta http-equiv="content-type" content="text/ html;charset=utf-8" />  
```

You can change capitalisation using CSS. If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format”. [20 pro tips]
```
h1 {   text-transform: uppercase;  }  
```

You can display text in small-caps automatically. The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.
```
h1 {   font-variant: small-caps;  }  
```

Cover all the bases - define generic font-families. “When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]
```
p {   font-family: Arial, Verdana, Helvetica, sans-serif;  }  
```

Use 1.4em - 1.6em for line-height. “line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one).” [Christian Montoya]

Set 100.01% for the html-element. This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.” [CSS: Getting into good habits]

1.6. Workflow: Debugging

Add borders to identify containers. “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also bookmarklets that apply borders and do other things for you.” You can also use * { border: 1px solid #ff0000; }. [Chric Casciano]. Adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet]
```
* { border: 1px solid #f00; }  
```

Check for closed elements first when debugging. “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed element. [10 CSS Tips]

2.1. Technical Tips: IDs, Classes

1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]

Element names in selectors are case sensitive. “Remember case sensitivity. When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors. Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names.” [Roger Johansson]

CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices]

You can assign multiple class names to a given element. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.” [Roger Johansson]

2.2. Technical Tips: Use the power of selectors

Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended to read - some useful aspects can be found in the list below. Note that selectors ‘>’ and ‘+’ aren’t supported in IE6 and earlier versions of Internet Explorer (updated).

You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
```
div > strong { color:#f00; }  
```

You can use adjacent sibling selectors. An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]
```
p + p { color:#f00; }  
```

You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes. There are four ways for an attribute selector to match:

[att]  Matches elements that have an att attribute, regardless of its value.
[att=val]  Matches elements that have an att attribute with a value of exactly “val”. 
[att~=val]  Matches elements whose att attribute value is a space-separated list that contains “val”. In this
case “val” cannot contain spaces. 
[att|=val]  Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main
use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”,
“en-gb”, etc.

The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:
```
p[title] { color:#f00; }  
```

The selector matches all div elements that have a class attribute with the value error:
```
div[class=error] { color:#f00; }  
```

Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):
```
blockquote[class=quote][cite] { color:#f00; }  
```

You should use descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]

2.3. Technical Tips: Styling Links

Be careful when styling links if you’re using anchors. “If you use a classic anchor in your code (<a name="anchor">) you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active” [Dave Shea]

Define relationships for links. “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.

a[rel~="nofollow"]::after {
content: "2620";   
color: #933;   
font-size: x-small;  } 
a[rel~="tag"]::after {   
content: url(http://www.technorati.com/favicon.ico);  }

“These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]

You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]
```
a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
content: "2197";  }  
```

You can remove dotted links with outline: none;. To remove dotted links use outline: none;
```
a:focus { outline: none;  } 
```

2.4. Technical Tips: CSS-Techniques

You can specify body tag ID. “In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. Not only will you be able to organize your sections you will be able to create multiple CSS presentations without changing your markup from template to template or page to page.” [Ryan Parr, Invasion of Body Switchers]

You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.

You can align vertically with CSS. “Say you have a navigation menu item whose height is assigned 2em. Solution: specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box!” [Evolt.org]

You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.

You can set <hr> to separate posts beautifully. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page. [CSS: Best Practices]

You can use the same navigation (X)HTML-code on every page. “Most websites highlight the navigation item of the user’s location in the website. But it can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds?” [Ten More CSS Tricks you may not know]
```
XHTML: 
<ul>  <li><a href=”#” class=”home”>Home</a></li> 
<li><a href=”#” class=”about”>About us</a></li>   
<li><a href=”#” class=”contact”>Contact us</a></li> 
</ul>  
```

Insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section.
```
CSS: 
#home .home,
#about .about,
#contact .contact  {   
commands for highlighted navigation go here  }  
```

You can use margin: 0 auto; to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson]
```
XHTML:
<div id=”wrap”>  <!– Your layout goes here –>  </div>  
```
```
CSS: 
#wrap {  width:760px; /* Change this to the width of your layout */   
margin:0 auto;  }  
```

You can add CSS-styling to RSS-feeds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. [Pete Freitag]

<?xml version="1.0" ?> 
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>    ...

You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the @import trick. [Roger Johansson]
```
@import "main.css";  
```

Always declare margin and padding in block-level elements. [10 CSS Tips]

Set a width OR margin and padding. “My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.” [Jonathan Snook]

Avoid applying padding/borders and a fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. [CSS Crib Sheet]

Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:

<link rel="stylesheet" type="text/css" href="print.css" media="print">
or
<style type=”text/css” media=”print”> @import url(print.css); </style>

This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]

2.5. Technical Tips: IE Tweaks

You can force IE to apply transparence to PNGs. “In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser.” [CSS Tips, Outer-Court.com]

#regular_logo  {   
background: url('test.png'); width:150px; height:55px;
 } 
/*  */ 
* html #regular_logo  {
background:none;   
float:left;   
width:150px;   
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
}  /* */

You can define min-width and max-width in IE. You can use Microsoft’s dynamic expressions to do that. [Ten More CSS Trick you may not know]

#container  {   
min-width: 600px;   
max-width: 1200px;   
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

You can use Conditional Comments for IE. “The safest way of taking care of IE/Win is to use conditional comments. It feels more future-proof than CSS hacks – is to use Microsoft’s proprietary conditional comments. You can use this to give IE/Win a separate stylesheet that contains all the rules that are needed to make it behave properly. ” [Roger Johansson]
```
  
```

How to Insert a Style Sheet

2008-06-09T22:40:00.000+05:30

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>  <link rel="stylesheet" type="text/css"  href="mystyle.css" />  </head>

The browser will read the style definitions from the file mystyle.css, and format the document according to it.

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color: sienna}  p {margin-left: 20px}  body {background-image: url("images/back40.gif")}

Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:

<head>  <style type="text/css">  hr {color: sienna}  p {margin-left: 20px}  body {background-image: url("images/back40.gif")}  </style>  </head>

The browser will now read the style definitions, and format the document according to it.

Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:

<head>  <style type="text/css">  <!--  hr {color: sienna}  p {margin-left: 20px}  body {background-image: url("images/back40.gif")}  -->  </style>  </head>

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color: sienna; margin-left: 20px">  This is a paragraph  </p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

h3   {  color: red;  text-align: left;  font-size: 8pt  }

And an internal style sheet has these properties for the h3 selector:

h3   {  text-align: right;   font-size: 20pt  }

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

color: red;   text-align: right;   font-size: 20pt

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

CSS Syntax

2008-06-08T22:40:00.000+05:30

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

Note: If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p  {  text-align: center;  color: black;  font-family: arial  }

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6   {  color: green  }

The class Selector

With the class selector you can define different styles for the same type of HTML element.

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}  p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">  This paragraph will be right-aligned.  </p>

<p class="center">  This paragraph will be center-aligned.  </p>

Note: To apply more than one class per given element, the syntax is:

<p class="center bold">  This is a paragraph.  </p>

The paragraph above will be styled by the class "center" AND the class "bold".

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

<h1 class="center">  This heading will be center-aligned  </h1>

<p class="center">  This paragraph will also be center-aligned.  </p>

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

Add Styles to Elements with Particular Attributes

You can also apply styles to HTML elements with particular attributes.

The style rule below will match all input elements that have a type attribute with a value of "text":

input[type="text"] {background-color: blue}

The id Selector

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.

The style rule below will match the element that has an id attribute with a value of "green":

#green {color: green}

The style rule below will match the p element that has an id with a value of "para1":

p#para1  {  text-align: center;  color: red  }

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

/* This is a comment */  p  {  text-align: center;  /* This is another comment */  color: black;  font-family: arial  }

Decorate Your Images With CSS

2008-06-08T00:18:00.000+05:30

WebDesignerWall has a very nice trick to decorate your images and photo galleries without editing the source images.

The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect.

Benefits of this CSS image decoration:

Saves time: no need to create every decorated image file
Keeps original source images
Flexible: change the decoration anytim.
Cross-browser compatible

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.webdesignerwall.com/tutorials/css-decorat...

What is CSS?

2008-06-07T23:05:00.000+05:30

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one

Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.

All major browsers support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

Multiple Styles Will Cascade Into One

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

Browser default

External style sheet

Internal style sheet (inside the <head> tag)

Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

What is CSS and why should you use it ?

2008-05-30T00:23:00.000+05:30

CSS stands for Cascading Style Sheets. It is a markup language used to format the “look” of web pages. This includes overall
layout, text size, style, and formatting, table formatting, link properties, and more. When used correctly, CSS allows one to
define the look of an entire site in one single document. If you’re a Web person who doesn’t already utilize CSS, you should be
very excited right now, as it can quickly become your new best friend. Some of you, however, may be wondering…
Why would I want to use CSS? I get along so well with my span and table tags…
There are plenty of reasons to learn and use CSS. The most important reasons to use CSS, in my experience, are:

1. Flexiblity – Make site-wide layout and formatting changes with a single edit.
2. Reduce code bloat – Streamline the file size of your Web documents.
3. Accessibility – Produce Web pages that can be used by any user, including the visually impaired.

CSS gives you flexibility for Web design and layout changes
If you ever need to modify the width of a table column or any other aspect of Web site that uses and tags, you can
kiss your week goodbye. You’d have to go into each individual page and make the same edits over and over again until you finished
the entire site. If you have software like Macromedia Dreamweaver, you might be able to lessen this headache by using templates or
find/replace functions. Still, it’s not nearly as easy as using CSS. Need to change the size of your header tags or link text? No
problem. Make the change once in your external CSS file and you’re free to do other things with your time.
CSS increases download speeds by decreasing code bloat
The method of using

tags to design Web pages is still prevalent (and necessary in certain cases), but most Web designs can
be replicated in CSS without a hitch. When tables are not coded “cleanly,” or with as little code as possible, it causes a large
amount of code bloat, needlessly increasing the file size of your document and increasing download time for users. I’ve seen enough
HTML tables to know most people avoid properly coded colspans and rowspans like the plague, so very few tables are coded as
efficiently as possible. The other primary offender here is the tag. There’s nothing like a nightmarish GoLive or
Dreamweaver-created Web page littered with tags to drive you crazy. By using a CSS class or other declaration, you’ll be
able to modify all attributes of your Web page text in a single location.
CSS is a standards-based technology built for accessibility
HTML tables cause accessibility issues for visually impaired users. I’ve had personal experience with this, as I had a visually
impaired professor who was a very active (and adept) Web user. The situation goes like this. Using software like JAWS, the browser
reads the text on the page to the user. On a poorly coded Web page, this sounds something like an incoherent drunk idiot when the
party’s winding down. Words are all over the place, and it’s not pretty. In a CSS-based layout, the text is read top to bottom,
left to right as it should be.
If you’re still not convinced that you need CSS…
CSS gives you functionality that HTML simply does not offer, such as text hover effects and customized spacing for elements like
headers, paragraphs, and more. For those of you swayed by trends, Cascading Style Sheets is the future of Web design. Take a look
at some of the links in the “Further Reading” section to see some amazing examples of Web sites built using CSS. Then figure out
how long it would take to replicate those designs using tables, transparent pixels, and font tags. Lastly, because of the reduced
code bloat, there is plenty of evidence that suggests search engines like Google, Yahoo!, and MSN prefer cleanly coded CSS
documents when indexing and ranking Web pages for search engine results.
About a year ago, I only used CSS for text formatting. Now, I prefer to do entire sites using it. Even if you only use CSS for
changing font sizes and colors, you’ll be far better off as a Web designer than you were when you used deprecated HTML tags.

CSS Guru

Awesome Speech Bubbles With Pure CSS3

CSS3, Please! – The Cross-Browser CSS3 Rule Generator

HTML 5 And CSS3 Cheat Sheets Collection

HTML 5 Cheat Sheets

HTML 5 Visual Cheat Sheet

Easier Layouts Using Elastic CSS Framework

The 1Kb CSS Grid Framework

Organize Your CSS With Styleneat

The service can be used in 3 ways:

Easy CSS Grids: Grid System Generator

Open Source Online HTML Editor: Xinha

It has lots of plugins that can be activated like:

Golden Grid: A CSS Grid Framework

Get Color Palette By Uploading An Image

SenCSs: A CSS Framework For All But Not The Layout

Powerful CSS Menu Creator: CSS QuickMenu

The editor helps you to:

CSS Menu Maker

CSS cheat sheet

Powerful CSS Menu Creator: CSS QuickMenu

The editor helps you to:

Software: CSS Menu Generator (FREE) CSS Tab Designer

The Ultimate CSS Reference Feb 2008

40 CSS Tutorial Reference

Free CSS Menus: Styled Menus

Malo: Ultra Small CSS Framework

Malo has two parts:

Cross-Browser CSS Drop-Down Menu Framework

Free CSS Toolbox

Tools include:

Advanced jQuery Suckerfish Menu: Superfish

Other features of Superfish:

Pixel Perfect: Overlay HTML On Websites For Better Testing

CSS Menu Builder: Create Menus Online

jQuery Image Gallery: Spacegallery

Custom Checkbox And Radio Buttons: CRIR

CSS Grid Framework: Emastic

From the author:

Top 10 CSS buttons tutorial list

Free E-Commerce Template From CSS Creme

te features 3 pages:

Tip:

Mootools Slideshow: Slideshow 2

Features of Slideshow 2:

CSS Framework For Forms

Here is how a simple form works:

Perfect Multi-Column CSS Liquid Layouts

Features of these CSS layouts:

HTML Dog: The Best-Practice Guide to XHTML and CSS

The Art and Science of CSS

CSS Hacks and Filters

CSS Essential Training

Core CSS: Cascading Style Sheets (2nd Edition)

Professional CSS

CSS Web Design FOR DUMmIES

CSS: The Missing Manual

CSS Cookbook

CSS Instant Results

Expert Ideas For Better CSS Coding

1.1. Workflow: Getting Started

1.2. Organize your CSS-code

1.3. Workflow: Handling IDs, Classes, Selectors, Properties

1.4. Workflow: Use shorthand notation

1.5. Workflow: Setting Up Typography

1.6. Workflow: Debugging

2.1. Technical Tips: IDs, Classes

2.2. Technical Tips: Use the power of selectors

2.3. Technical Tips: Styling Links

2.4. Technical Tips: CSS-Techniques

2.5. Technical Tips: IE Tweaks

How to Insert a Style Sheet

CSS Syntax

Decorate Your Images With CSS

Benefits of this CSS image decoration:

What is CSS?

What is CSS and why should you use it ?