CSS

From WikiLinks

Contents 1 CSS tutorials 1.1 Box model 1.2 Typography, lists, etc 1.3 Images / Flash 1.4 Forms 1.5 Print 1.6 Aural 1.7 Tables 2 Articles 2.1 Cheat sheets / references 2.2 Tips and tricks 3 CSS hacks and browser bugs 4 CSS resources 5 Liquid layout 6 CSS tools 7 Books on CSS

CSS tutorials

• Developing with web standards a good concise run-through of how and why web standards save time and money and provide a better experience for the visitor. Also other methods, guidelines and best practices on producing quality accessible websites.
• In search of the one true layout on positioniseverything.net. An article that discusses how to achieve total layout flexibility (the order of columns in the code is nothing to do with how they are displayed in the page), equal height columns and vertical placement of elements across grids/columns.
• Macromedia how to convert your site to CSS
• Online free courses
• how to tackle css design from a blank page
• The holy grail layout template: fluid center with fixed sidebars, center column first in the source code, any column can be the tallest, simple CSS with minimal hacks.
• displaying percentages using CSS
• 53 CSS techniques you couldn't live without

Box model

• Brainjar's CSS positioning tutorial
• Floatutorial simple tutorials on CSS floats
• Containing floats hen floats stick out of their containing elements
• Acidic floats if you don't actually want your float to be contained by it's containing element (ie you want it to stick out)
• Box lesson on thenoodleincident.com, various options for boxes on a page.
• Transparent custom corners and borders
• CSS tabs
• making a footer stick at the bottom of a page or at the bottom of the content
• Yahoo grid builder and a good explanation of the YUI grids
• In search of the one true layout works well for multi-column, fixed width layouts.
• Another multi column layout technique, claims to be better than the One true layout on positioniseverything.net, and works well for elastic layouts
• conflicting absolute positions is a cross browser compatible solution for a liquid layout with a fixed width navigation bar.

Typography, lists, etc

• taming lists on ALA
• list tutorial on Maxdesign

Images / Flash

• Can you place layers of flash files or drop downs
• CSS image placement an alternative to FIR
• Styling alt text on images
• Floating thumbnails
• image maps as sprites A new way of building image maps with CSS instead of the classic image map.
• The accessibility of FIR, basically this image replacement technique is not accessible to screen readers
• Gilder Levin image replacement, the best of a bad lot
• CSS rollovers without preload This one is called Pixy I think.
• Super easy blends a cross browser way of using a png gradient from transparent to white (or black)
• CSS sprites or using one big image for all background images, using background-position. It cuts down on file size, it eases maintenance, and it makes for less http requests.

Forms

• Styling forms
• http://www.themaninblue.com/writing/perspective/2004/03/24/
• http://www.themaninblue.com/experiment/InForm/
• customising input elements
• Style form elements with CSS
• Pretty accessible forms, an accessible and portable form styling solution for correctly marked-up forms.
• more on accessible forms

Print

• Zeldman on print stylesheets
• Eric Meyer on print stylesheets (A List Apart)

Aural

• Aural stylesheets on accessites.org

Tables

• Styling a table with CSS by Veerle Pieters

Articles

• CSS tips and tricks part 1 by Roger Johannson - 456BereaStreet)
• CSS tips and tricks part 2 by Roger Johannson - 456BereaStreet)
• Efficient CSS writing by Roger Johannson - 456BereaStreet)
• At rules talks about @import, @media, @font-face, @page and @charset rules
• on hasLayout: an explanation of the IE/Win concept of 'hasLayout', which elements have it by default and which CSS properties trigger it.

Cheat sheets / references

• CSS cribsheet on mezzo blue: An attempt to make the CSS design process easier, and a first place to look when in trouble.
• CSS cheatsheet
• http://www.ilovejackdaniels.com/css/css-cheat-sheet/
• Which browsers support which CSS filters
• Meyer web CSS1
• Meyer web CSS2
• Mollio: a simple set of html/css templates. Nothing new so far, but this one also contains sample content with CSS applied to it.

Tips and tricks

• 20 CSS tips and tricks: rounded corners, tableless forms, printing with CSS, CSS element hover effect, CSS popups and more.
• CSS hover on all elements: IE/Win has so far not allowed this, but thanks to htc files this can be worked around.
• Mountaintop corners rounded boxes where you can control the background colour with CSS.
• How to size text using ems: with % setting in the body and amending that using ems elsewhere in the stylesheet.
• Global whitespace reset shows some simple CSS rules that form the basis of a site where all side margins are controlled by browser width and all vertical spacing is controlled by font size. Good for fluid layouts.

CSS hacks and browser bugs

• Browser quirks quirksmode.org
• Mezzoblue on IE bugs
• Position is Everything lists Explorer bugs and work-arounds
• How to attack an Internet Explorer display bug
• CSS filters and hacks How to hide certain styles from certain browsers, various methods and levels of validity
• Conditional comments for making certain version of IE / PC do certain things

CSS resources

• Dezwozhere's list of extremely useful links
• Veerle's list of extremely useful links
• The CSS Zen garden
• The web standards project
• CSS Layouts A collection of links to CSS layouts
• CSS play a site with CSS experimentation
• CSS from a programmer's point of view
• Sample CSS layouts
• A list apart on CSS
• CSS discuss: A comprehensive reference for CSS techniques: editing, using, testing, helping, international, mailing lists etc.
• Eric Meyer on CSS, the book companion website and More Eric Meyer on CSS book companion website

Liquid layout

Liquid layouts adapt themselves according to the browser width.

• Rammstein have done a good job of it
• The man in blue explains how to do it
• The man in blue gives us another example
• TJK Design hack free 3 column layout
• Switchy McLayout An Adaptive Layout Technique

CSS tools

• XHTML validator
• CSS validator and CSS validator FAQ (provides help with error messages from the CSS validator that don't make sense)
• Web developer tools for Firefox Installs a toolbar to Firefox from where you can check XHTML / CSS / Accessibility in one click. Has a whole host of other very useful web developer widgets.
• Xyle Scope for Mac a CSS editor that shows HTML elements, styles, id's, classes and what files the CSS lives in for any given element in a browser. Dave Shea's opinion on why it's so good.
• XHTML bulk validator
• Article on validation from Web Standards blog
• WebXact lets you test for quality, accessibility and privacy

Books on CSS

• Eric Meyer on CSS and More Eric Meyer on CSS are definitely the best books on CSS you can get. Published by New Riders.
• CSS pocket reference should always be in your laptop bag.
• The Zen of CSS design The book accompanying the CSS Zen Garden website. The 36 most inspiring designs are explained in depth in this book.
• Dan Cederholm: Web Standards Solutions: The Markup and Style Handbook