Recent Great Reads and Resources: The CSS Edition
It's always useful to find new CSS Hacks. Cats Who Code has collected 10 of them for your coding pleasure.
10 astonishing CSS hacks and techniques (Cats Who Code) »
A big collection of CSS Grid System and Layout tutorials, worth browsing. 45+ CSS Grid Systems, Layout Generators and Tutorials That Every Designer Should Know (Tripwire Magazine) »
Put a CSS Cheatsheet on your desktop! CSS Cheat Sheet Wallpaper (The WPresser) »
Continue reading "Recent Great Reads and Resources: The CSS Edition" »
10 Best CSS Practices to Improve Your Code
From Web Designer Depot, a nice list of CSS Best Practices, including resets and overrides, links, layout, forms and more. A good CSS Read.
10 Best CSS Practices to Improve Your Code »
Round-up of Great CSS Articles and Resources
w3avenue.com takes a look at the current crop of CSS Frameworks and details the advantages and disadvantages of using a CSS framework.
Definitive List of CSS Frameworks - Pick Your Style »
More CSS Resources Articles:
Free CSS Menu from CSS Tea »
Override Inline Styles with CSS (Simple but brilliiant CSS trick from CSS Tricks) »
10 Great CSS Selectors You Must Know »
10 Cross-Browser CSS Properties You've Probably Forgotten »
(Chuckling at these last two titles showing up at virtually the same time :)
Better Font Families in CSS »
40 Outstanding CSS Techniques and Tutorials »
20 CSS Short Hands You'll Love »
350 Great CSS Tools and Techniques
Abduzeedo.com has collected the best of the CSS posts they have bookmarked and put them in to one post, which makes for a great CSS resource. Worth browsing for new great articles or reminders of ones seen but worth seeing again.
350 Great CSS Tools and Techniques »
100+ Massive CSS Toolboxc
Site tripwiremagazine.com has a great big round-up of CSS resources and tools, not many of which are "new" but bookmarkworthy for the large amount of them in one place. Worth a browse.
Design Reviver
Design Reviver has a great article looking at CSS Image Map techniques and pointing to some great tutorials for learning how to do them with just CSS.
CSS Image Map Techniques and Tutorials »
Styleneat CSS Organizer
Always wanted to sort your css properties alphabetically but never had the time? Styleneat CSS organizer can do that and more. Simply upload, paste in or link to your stylesheet and sort alphabettically or in single/multi-line format.
5 Popular CSS Frameworks, Tutorials and Tools
Site noupe.com has a great article that takes a look at five of the most popular CSS Frameworks and includes some resources for learning more about using them. Definitely worth a read.
CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love.
5 Popular CSS Frameworks Tutorials & Tools for Getting Started » (noupe.com)
More CSS Cheat Sheets and Lotsa Web Dev Links
All Web Design Resources has a big round-up of CSS Cheat Sheets worth browsing for CSS beginners.
30 CSS Cheat Sheets & Quick Reference Guides.
Also worth a look, this really big list of web dev links from Web Designer Heaven. You'll find lotsa links for things such as fonts, stock photography, cheat sheets, color tools, patterns, icons, tutorials and more! Bookmark worthy.
15 CSS Tricks that Must be Learned
From blog In The Woods, a round-up of valuable CSS tricks.
As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.
15 CSS Tricks That Must be Learned
BlueTrip CSS Framework
Site Capsize Designs takes the best of all the CSS Frameworks and rolls them into a new one calle BlueTrip.
I searched everywhere for every snippet of every framework I could find. I've tried 960.gs, Blueprint, LogiCSS, YAML, Elements, YUI, and Boilerplate, among a few others. I even discussed the pros and cons of each of them. Finally, I decided to combine the good points of each of them to get something that I was satisfied with. Since most of it came from BlueprintCSS or Tripoli, I'm calling it BlueTrip. Why not?
BlueTripCSS Framework - Blueprint meets Tripoli
CSS Typography: Contrast Techniques, Tutorials and Best Practices
From noupe.com a nice round-up of css typography tips, tricks and tutorials.
The main advantage of elegant CSS typography lies in its ability to be both attractive and improves the user experience. When chosen wisely and used carefully, it can be very effective to support the overall design. There are many outstanding examples of how we can do this, and below you will find some of the best ideas and tips when it comes to using Fonts and typography in your CSS based sites.
CSS Typography: Contrast Techniques, Tutorials and Best Practices
5 Nice CSS Articles
1. Site Monday by Noon has a nice article that looks at CSS organization methods and writing style.
I’d like to cover some common techniques for writing CSS. This article is in no way meant to indicate that method A is in any way, shape, or form superior to method B. Please keep that in mind as you read. Topics such as this tend to spark quite the debate, but that’s not my goal. The purpose of this article is to provide insight to other ways of doing things.
CSS Organization Methods and Writing Style (Monday By Noon)
2. From nimbupani.com, learn how to write CSS without hacks. (nimbupani.com)
3. Learn how to achieve pixel precision when converting from a Photoshop PSD to html/css using this diagnostic css trick.
Here’s a little CSS trick I started using a while ago that has really helped me to achieve pixel precision when converting Photoshop PSD (or Fireworks PNG or whatever) design comps into (X)HTML and CSS web standards goodness.
Pixel Precision with Diagnostic CSS (aloestudios.com)
4. Neal Grosskopf.com looks at hacks that work with various browser for when you absolutely need to use them.
CSS Browser Hacks for Firefox, Opera, Safari and Internet Explorer (nealgrosskopf.com)
5. Site From Scratch shares a handy text file to ensure that all html elements have been styled. Simply load up the html file with your own css file and test it in a browser. Handy file to have on hand.
When ever I design templates I always try to ensure that all of my HTML elements are styled properly. It's very easy to forget element and to see how they look. I've tried to create a test file with all the code you will need to be concerned about on a basic level.
HTML XHTML for CSS Testing (Site From Scratch)
20 Sites to Help You Learn and Master CSS
Site Six Revisions has a round-up of CSS resources that will help a beginning CSS coder learn and a more experienced CSS coder master.
CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand. This article features 20 excellent websites to help you "grok" CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS.
20 Websites To Help You Learn and Master CSS (Six Revisions)
10 Principles of the CSS Masters
NetTuts has a great article today, highlighting advice from 10 CSS Masters.
When it comes to CSS, there are lots of resources and supposed "expert tips" on the web. ... Instead of relying on unknown sources for advice, let's look deeply into designers who have excellent design backgrounds and have walked the walk. These CSS tips are gathered from some of the most respected designers on the planet.
10 Principles of the CSS Masters
The Lessons of CSS Frameworks
Adactio.com has a great article today, taking a look at CSS Frameworks and disecting their various settings. Based on an presentation from Eric Meyer, it's well worth a read.
Adactio: The Lessons of CSS Frameworks
3 Nice CSS Resources Links
From Hidden Pixel,s a round-up of the current crop of CSS Frameworks. CSS Frameworks - Hidden Pixels.
A nice article from NETTUTS, detailing some common CSS problems and how to solve them. How to Solve 5 Common CSS Headaches.
CSS Round, creates a text box with rounded corners for you. Customizable and download the completed zip file containing html, css and images.
CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices
Another nice post from noupe.com, this time a round-up of all things css layout related. Definitely worth browsing for some new resources and tips.
CSS Layouts: 40 Tutorials, Tips, Demos and Best Practices
CSS Styled Lists, 20 Demos, Tutorials and Best Practices
Noupe.com has a nice round-up of CSS Styled List resources today worth browsing.
When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many design blocks in a stylish and elegant manner.
CSS-Styled Lists: 20 Demos, Tutorials and Best Practices
Two Nice CSS Links
First, a look at CSS code formatting from Perishable Press. A good read. Obsessive CSS Code Formatting: Organization, Comments, and Signatures.
From Elite By Design, a round-up of links for learning CSS through online tutorials. Getting started with CSS: 20 Awesome Introductory Tuts.
From PSD to CSS/HTML in Easy Steps
Website CSS How To has a really nice tutorial showing how to take a PSD file and covert it into a CSS based HTML page. This is the first in a series of tutorials which will build a fully working css/xhtml site. All of the code, templates and files are available for download so you can follow along directly. Even the final template, which is for a photography site, is available under a Creative Commons License.
From PSD to CSS/HTML in Easy Steps - Part 1 (CSS How To)
A couple of nice CSS Articles
From Jen Meiert, a nice article on consistent organization of CSS for improved efficiency. CSS: Simple Rules for Better Organization and More Efficiency.
5 CSS Questions and Answers, is just that. A nice article with detailed and well illustrated answers to common CSS questions.
Top Reasons Your CSS Columns Are Messed Up
A nice article from blog Warpspire that offers up some quick tips on how to avoid common CSS column problems. The article's diagrams and code are useful, as well. A worthy read for anyone who has suffered from messed up columns.
Top reasons your CSS columns are messed up - Warpspire
Using CSS to do anything: 50+ Creative Examples and Tutorials
Another nice list from noupe.com today, detailing 50+ creative ways to use CSS to do all sorts of things to enhance any web project. Well worth browsing for new finds or to remind you of older ones you may have forgotten about.
Using CSS to Do Anything: 50 Creative Examples and Tutorials
The Highly Extensible CSS Interface
The Highly Extensible CSS Interface is an excellent 4-part series of articles, now gathered together on one page for easy reference. Compete with demos, tutorials and downloads, this is an excellent CSS resource well worth reading.
The Highly Extensible CSS Interface
The 6 Most Important CSS Techniques You Need to Know
A nice CSS article, detailing 6 CSS techniques that all css coders should have in their repertoire. A good read.
The 6 Most Important CSS Techniques You Need To Know (Trevor Davis)
CSS Properties Index
Website Jens Meiert has put together a great CSS resource worth bookmarking.
This lists all the CSS properties and indicate whether the work from CSS1 through CSS3. Handy!
CSS Properties Index – Jens Meiert
3 CSS links worth a look
Hackszine.com: Easiest cross-browser CSS min-height "... the following method is the easiest to use and is compatable across all common versions of Firefox, Safari, and IE. Many of you are probably already using this method—it's not new—but for those of you who aren't, give it a try. It should save you a lot of headaches."
If you need a really simple and basic Crossbrowser Tooltip on your website, this <1kb tooltip CSS script might be the one for you. Easy CSS Tooltip
Nine Techniques for CSS Image Replacement - a nice round-up, many of which have been around a while but still work well!
Markup Generator
Tired of writing the same old code, all the time? Let Markup Generator give you a hand. Simply enter your basic page framework of ids and classes and the generator will spit out the xhtml for you, along with a basic starting css stylesheet.
Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It's main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.
Blueprint CSS Resources
Interested in learning more about the grid based CSS layouts of the Blueprint CSS Framework? This round-up of Blueprint CSS related links is a great starting point.
Grid Designer Tool
Anyone looking for a little help getting going with Grid Design should take a look at this handy tool. The Grid Designer 2, lets you set the columns and then the typography and then export the CSS for use in your design.
Meyer's Reset CSS Gets a Permanent Home
Eric Meyer's Reset CSS has finally got a permanent home and versioning. Now, to find the latest and greatest version, you can just visit the page and check the version date to be sure you have the latest version.
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.
You might also like to check out Meyer's very useful Diagnostics CSS
Validation is great, but it won't catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won't complain. The syntax is valid, even if it's a broken experience. Similarly, the validator will be happy to let through empty class and id values.
The Incredible Em and Elastic Layouts with CSS
A nice article for anyone wanting to know more about creating an elastic CSS layout using ems.
This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.
The Incredible Em & Elastic Layouts with CSS
Blueprint Grid CSS Generator
I've been playing around with Blueprint recently. Blueprint is "a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing."
You only have to spend a little bit of time with Blueprint to appreciate how useful a grid generator would be. Thanks to kamatzy.com for offering one up!
(And if YUI is more your thing, there's a YUI CSS Grid Builder as well!)
A Detailed Look at Stacking in CSS
If you've wanted to learn about how stacking in CSS works, website timkadlec.com has a nice article that explores CSS z-index and how it can be used to stack elements on a page.
Using the z-index to affect stacking order in CSS is a much deeper topic than it may appear at first. The idea seems quite simple, but if we take a look we can see that there is actually quite a bit going on here that warrants a closer examination.
Detailed Look at Stacking in CSS (TimKadlec.com)
Sitepoint CSS Reference
Sitepoint's CSS Reference is now available to all and it's certainly one to check out and bookmark for a wealth of CSS knowledge and reference!
Em Based Layouts - Vertical Rhythm Calculator
James Whittaker - Em based layouts - Vertical rhythm calculator
One of the key concepts that we can use within our sites is consistent line-height in CSS terms. If you think of a ruled notebook, the lines are all equal heights. The concept is fairly straight forward but in practice can be confusing especially for a CSS newcomer. All sizing needs to be relative to the base size. This allows for easy scaling up or down while keeping the required spacing and layout consistent, this can be refereed to as an elastic layout.
And to that end, James explains how to do it and provides a handy dandy em calculator to make it easy.
Part 2 of 101 CSS Techniques of All Time
Website noupe.com is continuing their series of 101 Best CSS Techniques of All Time with part 2 of the series. If you haven't read Part 1 yet, you can find it here.
101 CSS Techniques Of All Time- Part2
Eric Meyer Resetting Again
If you're following the ongoing quest for the perfect "Reset CSS", you might be interested in having a look at Eric Meyer's latest thoughts on the subject.
Eric's Archived Thoughts: Resetting Again
Improving Your Process: CSS Techniques Part 2
Website Monday by Noon has a nice article on improving your CSS Process, worth a read.
Some tips included controlling browser defaults, avoiding box model headaches, stylesheet organization, and using a color glossary. I find myself using many of these techniques a year later, but had some updates that might make the lives of some a bit easier.Improving Your Process: CSS Techniques Part 2
101 CSS Techniques of All Time
101 CSS Techniques Of All Time- Part 1
Today we are presenting a round-up of 101 CSS techniques designers use all the time. Definitely worth taking a very close look at! This is just the first series , the second part will be coming soon, stay tuned and Enjoy!
A nice round-up of CSS techniques from website noupe.com. Worth browsing!
What CSS Did We Learn in 2007
Website SearchThis starts of 2008 by looking back to 2007 and putting together a round-up of their best CSS articles of the year. Worth browsing for some great CSS information.
Advanced CSS Printing: Using CSS Page Breaks
We don't always give the attention we should to print css stylesheets and even if we do, we probably don't think about page breaks. Let's face it, not a lot of people print websites, but if you have a certain type of site (recipe sites, for example), printing is frequent and good print stylesheets can really improve a users experience.
So, here's some "how-to" insert page breaks in to a print stylesheet, for those times when it really can make a difference. Advanced CSS Printing - Using CSS Page Breaks
Understanding CSS Colour Modes
Understanding CSS Colour modes is a nice article explaining the various ways to express colour in CSS 2 and 3.
The look at CSS3 is interesting! Worth a read.
Creating Sexy Stylesheets
A nice article on Vitamin today, worth a read - Creating Sexy Stylesheets
Being a CSS expert is more than just memorizing selectors. It’s also working to improve the maintainability and efficiency of your stylesheets, planning for the future and mastering your workflow. In this article Jina Bolton gives 10 CSS tips culled from surveys with 12 top designers.
A must read for anyone who gets exciting about good-looking CSS code.
Future-Proof Your Web Site by Planing Your CSS in Advance
Future-Proof Your Web Site Design by Planning Your CSS In Advance is a nice article from Smiley Cat Web Design. It deals with thinking ahead when coding your site by adding classes and styling you may not be using for the initial version of your site, but may someday use.
A nice article, worth a read for great CSS coding ideas.
How to Size Text in CSS
A nice article from A List Apart today, How to Size Text in CSS.
In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.
As always, an informative article and well worth the read.
CSS PNG Image Fix for IE6
CSS PNG Image Fix for IE - details a nice method for getting transparent PNG images to work in IE6. Works by forcing IE6 to replace PNG images with their AlphaImageLoader equivalent.
CSS Contents and Browser Compatibility Chart Updated
CSS - Contents and compatibility has been updated for Firefox 2.0, Opera 9.5b, Safari 3.0 Windows and Konqueror 3.5.7.
As always a great bookmark for reference and now updated for the most current browsers.
Code CSS like a pro with these 101 CSS Resources
101 CSS Resources - a nice list of links to CSS resources, large enough to be sure to have something new for everyone. Worth a browse.
Blueprint CSS 101
BlueprintCSS 101 is an introduction to the Blueprint CSS framework.
What does Blueprint do?1. It performs a mass reset of browser default styles.
2. It sets up sensible defaults for typography, including font families, header sizes, paragraph styles, list styles, a baseline grid, and more. It does all of this with relative sizes, so that it scales well in any browser.
3. It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
4. It provides a sensible default print stylesheet.
5. It does all of these things in ways that work elegantly in most browsers your visitors are likely to be using, including Internet Explorer 6 and 7.
A nice article that details the benefits and customizable features of this CSS framework.
Misundersood CSS Clip Property
The CSS clip property has to be one of the least used properties in CSS. This is probably because no one really knows when to use it, it doesn't appear to be supported in Internet Explorer, and some people use it incorrectly.
A great article on how to use this property and make it work in IE.
101 Awesome CSS Resources
101 Awesome CSS Resources - a nice big list of css resources, all categorized from CSS templates and layouts to css utilities.
logicss: Logic CSS Framework
logicss Framework is a "collection of CSS files and PHP utilities to cut development times for web-standards compliant xHTML layouts."
3 Easy Ways to Speed up CSS Development While Staying Organized
Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized - a great article on how to achieve efficiencies in CSS development.
When developing large sites, stylesheets can get fairly messy and hard to keep track of. If you don’t stay organized, you can end up making them larger than they really need to be and doing more work than you should have to. Here’s just a few ways to can help avoid that.
Worth a read for some great ideas to streamline and organize.
A couple of CSS Tools
CSSVista - Edit your CSS code live on Internet Explorer and Firefox CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously. Anyone who has spend a lot of time editing their CSS files and then flipping between Firefox and Internet Explorer can appreciate how valuable this tool is!
CSSType has just released it's second version. CSS Type is a tool for visualizing Web Safe Typography on Screen. Set the text type and parameters and see it displayed in all it's variants. When you're happy with how it looks, you can generate and download the CSS.
Let's Be Clear About This: a look at CSS float clearing
Let's Be Clear About This! - a great, detailed article that looks at clearing floats in CSS. The article features some nice illustrations of the problems and some code for the fixin'. It CSS clearing leaves you scratching your head, this is the article for you.
Advanced CSS Rollovers
A great "how-to" from creativepro, Advanced CSS Rollovers, details how to create great-looking menu rollovers with just css background images (no javascript).
"Cascading Style Sheets, a Web designer's most powerful design tool, provide a very simple method for creating a rollover image effect. In a nutshell, CSS lets you place an image in the background of any HTML element."
Worth a read for a walkthrough for creating CSS rollovers.
Internet Explorer CSS Bug Fixes
Internet Explorer CSS bug fixes - a nice little article that details some common Internet Explorer bugs and how to fix them. Worth a read for some quick fixes for some common IE-related CSS bugs.
Tripoli: a CSS standard for HTML rendering
Tripoli - a CSS standard for HTML rendering
"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."
Simply download the CSS directory and include it in your web project with an addition to the head of your document. The package includes a sample HTML file, a css reset file, a generic css file, specific IE rules when needed and a simple print css file.
6 Keys to Understanding Modern CSS-Based Layouts
More good CSS reading, this one from snook.ca, 6 Keys to Understanding Modern CSS-based Layouts. The article identifies the key prinicples and links up some great resources for each one.
Nifty Navigation Using CSS
Nifty Navigation Using CSS - a great article by Rachel Andrew, detailing the benefits and basics of building a CSS navigation menu.
A detailed article that walks through all the steps for coding and styling a css menu, well worth a read.
CSS Layouts: Fixed, Fluid or Elastic
CSS Layouts: The Fixed. The Fluid. The Elastic. is a great article that takes a look at the pros and cons of the various css layout options.
"Which Cascading Style Sheet (CSS) layout is best? All have their quirks and their unique pros and cons. Is one more accessible than the other? More usable? What are the drawbacks and how are they dealt with? Is one easier to create than the other? Is there an evil, inaccessible layout? I suspect some will say yes to this, but I’m not going to. I like them all and feel all are suitable if steps are taken to ensure easy usability and equal accessibility. "
A valuable read!
Blueprint: a CSS framework
"Blueprint: A CSS Framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing."
Blueprint features an easily customizable grid, 'perfected' CSS reset, a print stylesheet and 'no bloat of any kind'.
Looks promising but do note the warning on the sidebar - Blueprint has not been tested in all browsers so use in a production environment is not recommended just yet.
CSS Related Links
I found myself with a bunch of CSS related articles open in tabs so I thought I might just link them all up in one, neat posting.
30 Free CSS Based Navigation Menus - a round-up of some of the best CSS-based navigation menus out there today.
Also from CSS Juice, 5 Popular CSS Speech Bubbles.
From the new and colourful design site, Style Your Ordered List, is a basic "how to" spruce up your css lists.
Finally, an interesting technique for creating stylish web buttons that can have the colors set using CSS.
CSS Redundancy Checker
CSS Redundancy Checker is a tool that will find any CSS selectors that aren't being used by any HTML files and may be redundant.
Just enter your stylesheet link, along with the links to the pages that use the stylesheet and the checker will return a list of redundant selectors.
Of course, use with caution. It would be wise to comment out suspected redundant css entries first and check your site before deleting them altogether. That said though, it's a great way to eliminate unnecessary bulk in the css file.
7 Common CSS Mistakes and How to Avoid Them
Seven Common CSS Mistakes and How to Avoid Them a good CSS article for a little CSS learning for a Saturday morning.
101 CSS Tips, Tutorials and Examples
101 CSS Tips, Tutorials and Examples is a great big list to CSS resources that is big enough to contain something new for just about anyone. Worth a read.
CSS: Using Percentages in Background-Image
CSS: Using Percentages in Background-Image is a nice article from Site Point Blogs that looks at using percentages for positioning background images.
Interesting article, worth a read.
Designing on a Dime: 100 Freebie CSS Resources
"If you're in the market for a professional grade site, you've probably found that quality design work doesn't come cheap. But while hiring outside help can be costly, designing your own site can be almost free if you know where to look for good resources, tutorials and tools."
This certainly is a BIG list of free, CSS resources and well worth a bookmark for future reference.
Designing on a Dime: 100 Freebie CSS Resources - Software Developer
Fancy Form Design Using CSS
Fancy Form Design Using CSS [CSS Tutorials] - a nice article, which is actually a chapter from the book "The Art and Science of CSS".
A great read for some solid advice on sprucing up CSS forms.
Web Design 101: Backgrounds
Another in Digital Web Magazine's "Web Design 101" series, this one dedicated to Backgrounds - Web Design 101: Backgrounds.
An excellent primer on the CSS backgrounds, worth a read.
70 Expert Ideas for Better CSS Coding
70 Expert Ideas For Better CSS Coding - a must read for anyone who likes to follow CSS snippets.
The article works through the CSS coding workflow, while linking to CSS snippets, advice and tutorials around the web.
A well done compilation and worth a read.
CSS Slicing Guide
For anyone looking to turn a Photoshop template in to fully sliced and coded CSS and HTML, Learn how to slice your templates into fully standards compliant XHTML and CSS! is a free resource "for the budding web designer looking to take the step into the future of modern web design. Throughout the guide, you will be shown cunning CSS techniques used to keep loadtime to a minimum and to organize and fine tune your content so it is presented in the best possible way."
53 Ultra-modern CSS Techniques
53 ultramodern css techniques - offers up a nice round-up of some of the newer, trendy CSS techniques that can be used in web development. Each one has a graphic, which is nice to see the effect before clicking through.
Guide to CSS Support in Email 2007 Edition
Email newsletter site Campaign Monitor has just published it's A Guide to CSS Support in Email: 2007 Edition.
For anyone who does or might send a newsletter via email, this is really valuable information so that our newsletter ends up looking like we intended!
Web Design 101: Positioning
Digital Web Magazine - Web Design 101: Positioning another great article from Digital Web Magazine, looks at CSS position from a beginners point of view. A good read.
CSS Specifity for Poker Players
Confused by CSS specificity rules? iamcamera.org comes to the rescue with a unique way to try to make sense of it all.
If you're not from the programming world and CSS seems a bit confusing, perhaps this analogy may help clear some concepts up. Think of CSS rules as poker hands. The best hand determines an element's style.
CSS Specificity for Poker Players
CSS Type v2 released
CSSTYPE v2 (BETA) - web safe typography on screen for pixel perfectionists - the latest version of a great tool for experimenting with css type. Set your css type parameters and instantly see the changes in the sample text, that is displayed in normal, blod, italic, uppercase etc.
A handy bookmark.
10 Good CSS Tips
CSS Tips from Google blog Google Blogoscoped are well worth a read. Some of the tips are fairly basic but there are some interesting ones like Tip #5 about anti-aliasing PNG image files which I'd never read about before.
CSS Easy: learn CSS the modern way
CSSeasy.com - Learn CSS the modern way offers up the method many of us used to aid our CSS learning in a nice one-page package.
Basically, CSS Easy offers up a variety of CSS layouts for you to download, open up in a text editor and play with to understand how they work.
It's worth noting that the "download the source and study" approach will work well with any website you are interested in understanding how it's made.
Free CSS Editors List
LXPages.com has put together a nice list of Free CSS Editors that is worthy of a look on it's own but at the bottom of the list is an even bigger list of 70 links to some great CSS resources and tutorials.
5 must-read books for learnng CSS
For anyone who has thought about picking up a book on CSS, either learning or refining their CSS skills, knows that there are a lot of them out there and it's hard to know which are the ones that are worth buying. 5 must-read books for learning CSS is a great resource to help making that decision easier. All five books suggested are great and well worth picking up and the author provides a helpful mini "review" of each book that can help to narrow down which book might be the right fit.
Worth a read for anyone looking to learn more about CSS.
15 CSS Properties We Should Be Using
SEOmoz | 15 CSS Properties You Probably Never Use (but perhaps should) - really nice article, with some ideas for some off-the-beaten track CSS properties that we should consider using. Note that while all are CSS 2 properties they don't all work (or work well) cross-browser, so be sure to test them out before using.
John's Essential Guide to CSS
Wiseheart Design - John's Essential Guide to CSS - a list of essential reading for people interested in learning CSS. Worth checking out.
Creating a CSS layout from scratch
Creating a CSS layout from scratch is an excellent tutorial for anyone who is looking to get started creating CSS layouts. This detailed walk-through covers all aspects of creating the design, from the basic default html template, to adding the major elements, floats and other structure, text styles, headers, footers, navigation and even how to get it right in IE!
A well-done tutorial for CSS beginners.
A look at CSS techniques
CSS techniques I use all the time | The Montoya Herald - a really great article that details the writers approach to css coding, not only the what but the why. An excellent article, well worth the read.
A CSS Printing Guide
Erratic Wisdom: CSS Printing Guide offers up some ideas for how to make a better CSS print style.
"Until printing background images and colors becomes more common (or at least a more easily accessible setting instead of the currently obscure checkboxes placed eight levels deep into preference panes), the best way to preserve a website’s appearance during printing is to include hidden, print-only images and restructure the printed page to fit a paper’s restrictions."
Well worth a read if you have an interest in developing pages that print well.
CSS Superdouche
CSS Superdouche - reduces the size of your CSS by stripping out unneeded content, redundant calls and smart grouping of the remaining elements. Can optionally remove all whitespace as well. Handy tool. Not so sure about the name ;)
Styling form controls with CSS
Styling form controls with CSS, revisited | 456 Berea Street - probably the most comprehensive look at CSS styled form controls across browsers and operating systems.
The article contains links to a demo page for each form control, taken from 8 browsers on 4 operating systems for a total of 14 different browser/OS combinations!
Handy CSS Cheat Sheet
If you find you can never remember all the different css border styles or any other css property, it's worth bookmarking the CSS Cheat Sheet for handy reference.
A couple of CSS links
CSSdocs is a CSS documentation search engine. Simply enter a CSS Property and the specification document will be returned. Cssdocs also features a Firefox Search Plugin to add cssdocs to your search dropdown (see link at bottom of page).
CSSTYPE "web safe typography on screen for pixel perfectionists" is a tool for visualizing any of the web safe fonts in various styles. The generator allows for setting font colour, background colour, text decoration, word and letter spacing, font size, line height and text align. A nice tool for anyone wanting to get a visual of the options for web safe type.
Keeping CSS file sizes down
Keeping CSS file sizes lean for practicality and sport (Ask the CSS Guy) - some great ideas for putting our CSS files on a diet 'cause not everyone has broadband quite yet!
CSS Cheat Sheet
The CSS Cheat Sheet is a great resource for anyone just starting out with CSS. If I were, I'd print it out to have it handy while experimenting with coding. Nicely done!
The CSS Shorthand Guide
I love CSS shorthand because I'm always looking for ways to type less code to achieve the same thing. Good information on all the shorthand options though isn't always easy to find. Dustin Diaz aims to address that though with his CSS Shorthand Guide.
Bookmarked.
CSS Styling for Print and other media
Digital Web Magazine - CSS Styling for Print and Other Media is an excerpt from the upcoming book “Pro CSS Techniques” by Jeff Croft, Ian Lloyd, and Dan Rubin and looks at styling css beyond "screen".
Modern CSS Form Resources
CSS-Based Forms: Modern Solutions - a really nice collection of CSS Form resources from across the web, from form generators, to CSS only forms, to accessible forms, to ajax-enhanced forms. And more.
The Form Garden: A CSS stylesheet collection for web forms
A Collection of CSS Stylesheets For Web Forms - The Form Assembly - featuring a collection of user-submitted form styles to share.
Centricle's CSS Hack Page updated with IE7
The famous centricle : css filters (css hacks) grid is updated with IE7, so you can see, at a glance what hacks are or aren't working with it and a whole raft of other browsers and OS. As always, a worthy CSS resource bookmark.
Rounded Corners Roundup
I first posted a link to CSS Rounded Corners 'Roundup' | Smiley Cat Web Design back in January 2006, but since then, this impressive list of rounded corner techniques has been continually updated. If you haven't had a peek in a while, it's worth heading over to have another look.
A look at equal height columns using CSS
Equal Height Columns using CSS takes a look at the current methods for creating equal height columns using CSS.
"Creating equal height columns with tables is easy. Of course we shouldn't use tables for layout. With CSS it's a little harder."
The article looks at "Faux Columns", using javascript solutions and a third solution, using pure CSS and doesn't require any background images.
A CSS Beginner's Guide from a seasoned CSS designer
Beginner's guide from a seasoned CSS designer ~ Authentic Boredom - a great list of CSS resources, which adds up to a must-read for anyone starting out with CSS design.
CSS Tips and Tricks
CSS tips and tricks at The Blog Herald - a great list of useful CSS tips.
Unitlless line-height bug in Firefox/Mozilla
If you use unitless line-heights in your style sheets (ie. line-height:1.5), just a heads up that they don't render properly in older versions of Firefox and Mozilla browsers (except Sea Monkey). See Unitless line-height bug in Mozilla and Firefox | 456 Berea Street for more details and a demo page of how rendering is affected.
Understanding CSS Specificity
Understanding CSS Specificity is a very useful article for CSS learning. Specificity is one of those things that I struggled with (still do!) when learning CSS. There's a link in the article to a great specificity article and chart (with a star wars theme! ) that's worth a read as well for more information on CSS specificity.
Review of CSS Optimization Programs
In � CSS Optimization: Make Your Sites Load Faster for Free, the author test 5 popular CSS optimization tools to see which one performs the best.
The conclusion? Icey's CSS Compressor. Not only did Icey deliver the best compression on average, its output is color-coded so it's easy to see what was changed in the file, in the event there is a problem after optimization.
Layout Grid Bookmarklet
Andy Budd::Blogography: Layout Grid Bookmarklet - I've linked to a couple of layout grid resources for web design, but this bookmarklet is nice, too! (I love bookmarklets - I have a folder in my link toolbar full of them!)
Be sure to grab the Layout Grid Overlay Bookmarklet as well, linked in the bottom part of the article.
Lots of CSS Examples and Experiments
CSS examples and experiments, too. Lots of them. A great way to see what CSS can do and look under the hood to see how it works.
CSS Browser Selector
CSS Browser Selector - a tiny javascript that can be added to an html page during development to test CSS hacks.
Xyle scope
Overview : Xyle scope : Cultured Code - a tool for seeing/changing/experimenting with a pages CSS.
InspirationKing
InspirationKing - another new CSS gallery site. And here I thought they were on the way out.
CSS Galleries
For a while there, it seemed that there was a new CSS Gallery popping up every week. Some have fallen by the wayside, but still quite a few remain. Rather than hop between each/subscribe to each feed, CSS Galleries offers to aggregate them all for you so you can subscribe to just one feed.
Good for us users but I can't imagine the various gallery sites are totally thrilled.
CSS Galleries: aggregating web design inspiration
10 Common CSS Mistakes
10 Common CSS Mistakes - some CSS mistakes that can be easy to make when starting out with CSS.
CSS Resource Links
I love it when someone publishes links to their favourite resources. Thanks to Veerle for publishing her favourite CSS resources.
CSS and HTML Beginner's Guider
HTML and CSS: An Absolute Beginner's Guide [HTML & XHTML Tutorials] - from the Sitepoint people.
Playing with CSS
Looks like stu nicholls | CSS PLaY | experiments with cascading style sheets | has received a site refresh. All the better to explore his fabulous CSS experiments. I'm particularly digging the dynamic image magnifier. Must find a place to use that! :)
Well Educated CSS
[object HTMLImageElement] - harness the power of CSS. A great article about using id on the body tag to make css and templating easier.
CSS Grid Calculator
css_grid_calc - a flash based, online tool for laying out CSS grids for web pages. It allows the user to visualize the layout of columns, text, rows etc and then returns the CSS styles to use.
Clean CSS
Clean CSS - A Resource for Web Designers - another resource that allows you to run your CSS file though and have a cleaned-up, optimized and/or compressed CSS file spit out the other end.
CSS Rounded Corners Generator
SitePoint Tools : Spanky Corners - currently in beta. Includes a Generator program, which is handy, dandy. Downside? Doesn't work flawlessly in IE6, so that's obviously an issue. Hope it gets resolved to broaden usability.
EasyCSS Hacks for IE7
Easy CSS hacks for IE7 - a couple of css hacks that will work with IE7. Always handy to have on hand. Just in case.
CSS Lookup
CSS lookup I don't think this is new but it sure is handy. CSS Lookup is a quick reference to CSS properties. I like to bookmark these in Firefox and then, through the bookmark properties, set it to open in the sidebar, to make it even handier!
Factor CSS
Factor CSS,"takes a CSS stylesheet on input and produces an almost equivalent stylesheet on output, but with rulesets split, combined, and reordered to "factor out" common declarations. This helps reveal shared components." Optomize away!
CSSTweak
CSS Tweak ~ Web Based CSS Tweaker! - run your stylesheet through the tweaker to optomize it.
CSSElite
If you are like me and enjoy seeing the best of the best in CSS design , then you'll probably enjoy CSSElite 0.5 BETA. I think their choices so far are excellent (although I did chuckle at their inclusion of their own site ;) All in all, a good source of inspiration!
CSS Tools
CSS Tools - a good list of css resources for techniques, layouts, galleries etc. I like to check these out ... just in case I missed something along the way.
Live CSS Design
Live Design - Step 1 - see how it's done, step-by-step through the CSS web design process.
Clearbits Icons
Clearbits - SOME RANDOM DUDE - a nice icon set with an added bonus - you get to set the background-color. With CSS.
How to Use Different CSS Style Sheets for Different Browsers
And continuing on the CSS theme, How to Write Cross-Browser CSS.
Coding a Layout Tutorial
Erratic Wisdom: Tutorial: Coding a Layout - a great tutorial for those starting out with CSS layouts.
W3 Compliant Sites Collection
W3 Compliant Sites - and a darned good source of design inspiration. There are so many site thumbs collected here that you can literally go grab a coffee while you wait for the site to load. Even on high speed!
SkimCSS
SkimCSS - Skim Everything (CSS) Cascading Style Sheet Related! - a collection of links to CSS articles; user ratings and a tag cloud. Nice new site, currently in beta. I would like search functionality, myself.
5 Tips for Organizing Your CSS
Philosophy: 5 Tips for Organizing Your CSS. I think #1 is interesting. It's suggesting an indenting style similar to how html is conventionally layed out. Hmmm.
Cross-browser strategies for CSS
Friendly Bit Cross-browser strategies for CSS - a great read and reminder of considerations for coding CSS for proper display cross-browser.
CSS Vista
CSSVista: Live CSS editing with Internet Explorer and Firefox simultaneously - haven't tried this yet but the concept is great. No more switching back and forth when developing a site! CSS Vista is a free download. They also make a pay-for product, Site Vista, which covers more browsers.
CSS Shorthand
CSS Shorthand Guide - a handy CSS bookmark.
CSS Color Chart
CSS Color Chart - is a handy reference bookmark to grab some color codes, particularly the neutral colors, which were taken from paint chip samples.
cssThesis
css thesis: sites, that's all. - go forth and be inspired! Much CSS goodness.
Experimenting with CSS
CSS tests - exploring CSS.
Getting started with CSS Web Design
Get Cooking with Photoshop and CSS - 3 Low-fat Recipes [Design Practice] - a great tutorial goodness from Sitepoint.
CSS Help Pile
arty|papers - css help pile. Excellent CSS information repository, nicely laid out for easy access to whatever CSS information you're looking for. You can even add to the pile with your own links to valuable information.
CSS Debugging Bookmarklet
codepoetry :: CSS Debugging Stylesheet - very nice CSS debugging bookmarklet! Works beautifully in Gecko/KHTML browsers (not tested in IE).
Also from Code Poetry, a nice bit of CSS that will hide ads in Mozilla/Firebird, Safari etc. browsers.
CSS Depot
CSS Depot - collection of basic CSS templates collected and offered up as a starting point for CSS designs. It's great when people are willing to share their work and expertise!
CSS Links Resource
thefixor has css links. And boy, do they!
Css Crib Sheets
Andy Budd::Blogography: CSS Crib sheet #1 - Gaps Between Vertical Nav Elements in IE5 and #2 - Clearing Floats on line now. More to follow.
New CSS Demo Site
Stu's Site - Cutting Edge - Cascading Style Sheets. [via Simon Willison]
CSS Resource Site
CSS, Accesibility and Standards Links - a nice CSS resource site, with a touch of humour thrown in.
CSS Crib Sheet
Anyone with an interest in CSS has probably been following this, but the mezzoblue - css crib sheet has found a permanent address that is well worth a bookmark.
A trio of Excellent CSS Resources
CSS Beginner's Guide, CSS Intermediate Guide and the CSS Advanced Guide. [via CSS Vault]The CSS Creator
CssCreator-Page Layout - generates a 3-column CSS layout with a just few clicks.
CSSvault
CSS Vault - Unlocking creativity - a gallery and resources and a very bookmark worthy for anyone interested in CSS and design.
Floatutorial
Floatutorial: Step by step CSS float tutorial - from the maker of Listamatic, Listamatic 2 and Listutorial!
The Amazing Rolloverer
From the creator of Layout-o-Matic, comes The Amazing Rolloverer. Uses the Pixy technique of doing pure CSS rollovers. You supply the graphics and the Amazing Rolloverer will supply the code. Amazingly cool!
Mid Pass Filter
Mid Pass Filter - a new CSS hack from Tantek which "is a filter which passes external style sheets to version 5.x Internet Explorer for Windows browsers, but not to earlier/older browsers, nor to newer / more modern browsers."
Morphon CSS Editor
Morphon CSS Editor - nice, full-featured CSS Editor. And free!
Layout-o-matic
Via Zeldman - Layout-o-matic. Create a variety of CSS layouts automagically!
CSS: Experiments and Exploration
LITERARYMOOSE.INFO: CSS Destroy and ScotBebop: Exploring CSS.
Listutorial
From the author of Listamatic, linked recently, comes Listutorial - a series of tutorials on building CSS based lists. Another nice one! Thanks again, Russ.
Listamatic
Russ offers a fabulous resource for using the power of CSS to deal with lists! Listamatic. Thanks Russ!
What you Always Wanted to Know about CSS
MaKo 4 CSS - CSShark answers Frequently Asked Questions.
[via Ordinary Life]
Position is Everything
From their site, their purpose is to "To explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to 'make it work' without using tables for layout purposes."
CSS Link Round-up
Styling Forms with CSS - at Luminosity.
Take back Times New Roman - at mezzoblue.
And at Kalsey Consulting - Rounded CSS Corners and a great CSS work around for IE's dotted border bug.
CSS Testing Bookmarklets
Simon Willison has an excellent post and a nice collection of CSS Testing Bookmarklets which are great for anyone who is learning or experimenting with CSS.
Book of Styles
Book of Styles | No table? No problem! - The latest CSS layouts from Firda Beka. The Shades of Grey ones are fabulous ... but I'm partial to grey ;)
CSS Resource: Nemesis
The Nemesis Project for CSS and XHTML looks like it's going to be a great resource. [via Ordinary Life]
CSS 2 Compatability Table
CSS 2 tests. Seems Opera 7 gets top marks. Maybe I'd better dust it off and give it another try ;)
CSS FAQ
Bookmark: Very nice little CSS FAQ. CSS FAQ
Real World Style
Bookmark: Real World Style: CSS layouts, tips, tricks and techniques
CSS Reference
Bookmark: Excellent quick reference for CSS, with the ability to view examples of various attributes.
CSS Tutorial
Html Goodies has a great CSS Tutorial, for anyone just starting out with CSS. It's done with some humour too, which is always good.
And another here.
Subscribe
Subscribe RSS
Subscribe by Email
Categories
- Blogging
- Color Tools
- CSS Layouts
- CSS Navigation
- CSS Resources
- CSS Snippets
- Del.icio.us
- Design Elements
- Design Resources
- Digital Photography
- End of the Day Digests
- Everything Else
- Firefox
- Flickr
- Photoshop
- RSS
- Scripts and Software
- SEO and Marketing
- Tools and Generators
- Web Design
- Web Development
- Windows and Computing
Search etc.
About
Browse the Archives »