CSS Media Types

• all - Suitable for all devices.
• braille - Intended for braille tactile feedback devices.
• embossed - Intended for paged braille printers.
• handheld - Intended for handheld devices (typically small screen, limited bandwidth).
• print - Intended for paged material and for documents viewed on screen in print preview mode.
• projection - Intended for projected presentations, for example projectors.
• screen - Intended primarily for color computer screens.
• speech - Intended for speech synthesizers.
  
• tty - Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
• tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Just in case you were wondering the media types you can target your Stylesheets to.

IE6 CSS Fixer Starter Kit

Welcome to the IE6 CSS Fixer: starter kit page. A tool specifically designed to ease the pain of the ie6 css debugger. If you want to read up on all the specifics, I advise you to check the articles on the ideology, the specific fixes and the scope of this tool.

Every little bit helps even though a true understanding of CSS and XHTML can make working with IE6 not too bad.

Link:
http://www.onderhond.com/tools/ie6fixer

Two ways to use any font on a website

sIFR: sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.


cufon: In reality the generator is little more than a web-based interface to FontForge. First, the generator builds a custom FontForge script based on user input and then runs it, saving the result as an SVG font. The SVG font is then parsed and SVG paths are converted to VML paths.

CSS 3 Reference Guide

Veign releases a CSS3 reference guide. The CSS3 reference guide is meant to compliment the HTML5 reference guide that I just released. This gives you a quick and handy reference on the standards that will be the foundation for all websites.

Enjoy!

Link:
http://www.veign.com/reference/css3-guide.php

Convert CSS rules to inline styles

HTML email inline styler will convert a webpage with CSS rules to a webpage using inline styles. This inline style format is what is required for sending email newsletters and this online tool can save you the headaches of manually converting.

Link:
http://inlinestyler.torchboxapps.com/

CSS Formatter and Optimizer

I feel better after running some of my CSS code through the CSS Formatter and Optimiser as there wasn't a whole lot that it did. Warned about using bold instead of a number, which is weird as I rather have it say bold as it better dictates intent.

If your not familiar with optimizing CSS, you should run your code through just to check.

Link:
http://floele.flyspray.org/csstidy/css_optimiser.php

CSS Sprites

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them:
Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one.

CSS Sprites: Image Slicing’s Kiss of Death:
Specifically, we’re going to replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re going to take it further: by building a grid of images and devising a way to get each individual cell out of the grid, we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states.

CSS Sprite Generator:
This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.

Count lines of code in a project with CLOC

cloc counts blank lines, comment lines, and physical lines of source code in many programming languages. It is written entirely in Perl with no dependencies outside the standard distribution of Perl v5.6 and higher (code from some external modules is embedded within cloc) and so is quite portable.

Works great for comparing two projects. Recently I went through a code refactor on a project and I needed to give some information back to the client. CLOC made it simple to give a report as to the before and after counts. The before was approx 240K lines of code and the after was about 81K with zero changes to functionality.

Link:
http://cloc.sourceforge.net/

Special styling for NoFollow links

This is a great way to look at a website and see what links are tagged as NoFollow, meaning the link will not count as a vote in Google. This is a must on your website if you don't want to be penalized for linking to know spammer sites or what Google calls a 'Bad neighborhood'. With this little Firefox hack you can quickly see what links have been tagged - for reviewing your website or any other.

Link:
http://www.mattcutts.com/blog/seeing-nofollow-links/

Top 10 CSS Table Designs

Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!

Link:
http://www.smashingmagazine.com/...

CSS List Boxes

Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.

Link:
http://mikecherim.com/experiments/...

Big list of CSS Menus

12 CSS menus

Advanced CSS Menu Trick

ADxMenu

Bulletproof Slants

CSS Dock Menu

Menus at CSS Play

Tree Frog slide and fly menu

Creating Liquid CSS Tabs for Menus

Drop Down Tabs (5 styles)

CSS: Menu Descriptions

Deluxe CSS Dropdowns and Flyouts

8 web menus you just can't miss

Son of suckerfish (great multi-level menu)

14 Free Vertical CSS Menus

Advanced CSS Menu

Inline Mini Tabs

Build a better table

This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

Results are pretty good looking. Amazing how a little style can make something look so much more professional.

Link:
http://veerle.duoh.com/.../a_css_styled_table_version_2/

Selectoracle tells you what that a CSS selector means

Ever wondered what a particularly complex CSS selector really means? Here's your chance to find out! Simply enter one or more semi-colon separated selectors or rulesets into the following "Direct Input" area, or provide the URL of a stylesheet in the "URL Input" area. Best of all, the SelectORacle will flag potential errors and other problems, and it won't choke on any actual rules. You've always wanted to know what makes those line-noise posers tick-- now you can.

For instance if you have:

• body > ol > li p;

SelectORacle tells you it means:

• Selects any p element that is a descendant of a li element that is a child of an ol element that is a child of a body element.

Pretty handy tool to better comprehend someone else's CSS.

Link:
http://gallery.theopalgroup.com/selectoracle/

25 Rounded Corners Techniques with CSS

25 Rounded Corners Techniques with CSS: "Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets. Some are quite simple just need pure CSS, and a part of them need 2 to 4 background corner images and Javascript."

Link:
http://cssjuice.com/25-rounded-corners-techniques-with-css/

Vertical Bar Graphs with CSS and PHP

Ahhh PHP and CSS:
http://www.terrill.ca/design/vertical_bar_graphs/

Iconize Textlinks with CSS

There was another blog post about how to Iconize Textlinks with CSS and I forgot to mention it. Glad I did as this tutorial is much more complete and even supplies the icons for you.

Link:
http://www.pooliestudios.com/projects/iconize/

Easy CSS Menus - Lose that bloated Javascript navigation

Stop using Flash or Javascript for navagation when a CSS menu will do the same thing.

Why?

Because Flash is being blocked by alot of Firefox users using a very popular extension called FlashBlock. Don't have this extension yet, get it.

And Javascript, don't even get me started on this one. Not only is Javascript not supported on every browser or allowed under certain security settings, but its often buggy and riddled with errors.

Center a page with CSS and NO tables

Just a quick example of how to use CSS to center a webpage without the need for tables.

Now, wasn't that easy...