CSS Articles are posted every day on the web but the trouble is finding the quality ones. With the thousands and thousands out there only a small percentage are of very high quality – and of worth linking to. I’m going to be linking to articles on basics, writing good code, css frameworks, css layouts, navigation, forms, and of course cross browser tips. In each section I will try and provide atleast 10 links, if you users want to submit on to the list I will try my best to edit this post to add it. I hope to make this post and ever expanding list and a great resource for all people wanting to expand there css knowledge, or learn it from the basics.
Basics, Learning CSS and Getting Started:
1. Top 10 Reasons to Learn CSS
We asked Faculty member and published CSS guru Christopher Schmitt. Christopher’s so convinced that CSS should be a part of every designer’s Web design toolkit, he devoted two lessons in Sessions’s updated Web Design I course to creating CSS layouts.
2. CSS Basics.com
You’ve heard the buzz about the seperation of style from content, but you are stuck in the world of nested tables and deprecated markup. If so, you have come to the right place! Using CSS to style your (X)HTML files, will benefit you and your visitors in many ways.
3. Learn HTML and CSS: An Absolute Beginner’s Guide
So, you’re ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We’ve got quite a ride ahead, so I hope you’re feeling adventurous.
4. CSS – Beginners
CSS is used to control the style of a web document in a simple and easy way.
CSS stands for Cascading Style Sheet.
This tutorial gives complete understanding on CSS.
5. CSShark – The Basics
6. CSS from the Ground Up
If you are frightened by the prospects of using Cascading Style Sheets, there’s no need to be. Using a computer can be daunting for someone coming to it afresh but after a while, you think nothing of it. It all comes down to taking small steps to begin with and that’s what I’m going to do in this series of tutorials. One step at a time!
7. Back to Basics: A Beginners guide to starting a CSS Document
Here’s a tip for you. Never let the browser to decide what your site will look like. What we’ll go over today is a quick and easy way of defining styles for common html tags that should dramatically cut down on the amount of guess work a browser will have to do to interpret your website. As you all know some of our more popular browsers **cough** IE **cough** tend not to display things as well as we want on their own.
8. CSS do’s and dont’s Part 1: CSS Selecting
Css Globe is starting a series of lightweight articles named “CSS do’s and don’ts”. This series is aimed at pointing out some of the bad habits when it comes to css and web standards in general. We’ll try to provide answers to some of the most common css questions.
9. CSS do’s and dont’s Part 2- Markup
If you truly get into web standards you’ll soon find out that the most important thing is – markup. A good, solid, well structured markup. Html, XTHML, tags, attributes, structure… That’s what it’s all about actually. We tie in the terms CSS and web standards. Term CSS has become almost a synonym for standards. I often use the term “css designer” or “css this”, “css that” to quickly explain what methods and approach I am talking about. But the real truth is, CSS would mean NOTHING if your markup structure is wrong. Markup is the king.
10. Creating a CSS layout from scratch
This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout. I will try my best to explain the concepts behind each step, but a lot of the time other people have already covered these things better than I can. Because of this there will sometimes be links to more information on external sites.
Clean, Efficient, Usable CSS Code:
1. Write a well structured CSS file without becoming crazy
Some readers have asked to me what is the better way to organize a CSS file to optimize code readability and simplify code management. Generally, I adopt just some simple rules and, it’s my opinion, they are useful in order not to become crazy if you have to manage a CSS file for a page/site with a complex design
2. How To Write Modular CSS
Balcom&Nobody goes into detail on how to write modular CSS from the reset to proper naming conventions. He gives solid examples with code and goes into everything in detail. If you want to learn proper naming conventions and how to sort out the attributes this then article is the one for you.
3. Write Better CSS
Writing an effective stylesheet is a very important aspect of developing any particular Web site. Developing good habits in your coding style will really make life easier down the road as you learn more involved CSS techniques. The ability to become lost in your own code becomes a bigger reality with each line you write – unless you’re writing effectively.
4. Improving Code Readability With CSS Styleguides
This article presents 5 coding techniques which can dramatically improve management and simplify maintainability of your code. You can apply them to CSS, but also to any other stylesheet or programming language you are using. You can browse through the references listed under the article — they containt further information about how you can achieve a well-organized and well-structured code.
5. CSS Specificity: Things You Should Know
Smashing Magazine goes into detail on CSS Specifity; defining which styles apply to which elements and why they don’t apply to others. Specifity determines which rules are applied in the browser. Check it out for a great read.
6. Top CSS Tips
I thought I’d share some of my habits when it comes to doing CSS work and let me warn you, some of what I have to say is probably a little controversial. But what’s life without living it on the edge. (Yeah, I live an exciting life when CSS is considered ‘the edge’.)
7. Readable CSS
This article goes into detail on 3 rules of organizing your CSS. General Rules, Document Tree and Modules. The writer shows you how to orginize them into this specific method and show you why and how to do it.
8. Top-Down approach to simplify your CSS code
In this post I want to illustrate some tips which can help you to write a better CSS code using a Top-Down approach.
9. Indentation of code
One thing that I’ve always taken for granted how to do is the indentation of code. Sure, people place characters like
{either on the same line as the CSS rule/JavaScript function name, or on the following, and that’s just fine. But what I mean here is how to accomplish the actual indentation.
CSS Frameworks:
1. 960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
2. Blueprint CSS
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.
3. Hartija
The owner of Hartija describes it as a “universal Cascading Style Sheets for web printing”. It’s extremely customizable and very user friendly.
4. Formy CSS
Formy is mini CSS Framework for building web forms.
5. Clever CSS
CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is.
6. SenCSS
SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset.
7. Elements
Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.
8. LogicCSS
The Logic CSS framework is a collection of CSS files and PHP utilities to cut development times for web-standards compliant xHTML layouts.
9. YAML
“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
10. Tripoli
Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.
CSS Layouts, Floats, etc:
1. Three column fixed layout structure using CSS
This post explains how to realize an HTML/CSS basic structure to design a simple three column fixed page layout with standard elements (logo top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads), to use in your projects:
2. Design page layout using CSS
Today’s lesson will explains how to design page’s layout for your site using a css file. In the previous lesson we have seen a typical website structure which we can use to project our site. In the css folder create a new css file called default.css where insert the css code to design the page’s elements.
3. CSS Centering 101
This article addresses how to center fixed width layouts.
4. 6 Keys to Understanding Modern CSS-based Layouts
Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.
5. CSS Float Theory: Things You Should Know
The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers.
6. Inline elements and padding
Have you ever tried to add padding to <li> elements that have been set to “display: inline”? Did you find that the padding seemed to be rendering in an unusual way?
7. Floatutorial
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
8. How to clear CSS floats without extra markup – different techniques explained
When using floats in CSS, without a doubt you have encountered the interesting effects it will have on the following content. Here I will show you different ways to clear floats without any extra mark-up.
CSS Navigation:
I have to give a warning about the following section, due to the amount of list related posts and how alot of them repeated what others said, and some of them are simply just other big lists of navigation posts. I hope that you find some of these useful, or you find a post that defines it in a way you can understand.
1. CSS-Based Navigation Menus: Modern Solutions
Below you’ll find 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling.
2. 30 Free CSS Based Navigation Menus
This article is one of the ones I described in the warning. It has 30 or so css based navigation menus. This is regularly updated so there may be more.
3. Nifty Navigation Tricks Using CSS
This article from Sitepoint goes through a range of different questions and then answers them using code, and media examples. Perfect for someone knew who wants to learn more techniques involved in css based navigations.
4. Build Your Site Navigation With CSS
Could anything look more boring than basic text links? Plain text displayed in the not very attractive colors of blue and purple, with no background colors, no rollovers, and nothing to make the page visually appealing…
5. cssMenus
6. Inverted Sliding Doors tabs
This is an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of netrelations.se (my colleague Tobias Nilsson did the design). By inverted tabs I mean that they are bottom-aligned, and as text size is increased, more and more of the tabs is revealed from the top down, instead of from the bottom up as in the original Sliding Doors technique.
7. Turning a list into a navigation bar
This article is simple, but very informative. It shows you the perfect example of how to do a horizontal navigation bar using ul’s and li’s.
8. Accessible Image-Tab Rollovers
We needed to fit more items into FC’s top navigation. We ran out of room. Previously, this was handled by a simple, styled unordered list. But at a window resolution of 800×600 there wasn’t enough additional horizontal space to add even one more item using the current design.
9. Bulletproof Slants
While working on the navigation for a project recently, I had the want/need to do something like this:
Nothing ground-breaking or cutting edge here (and certainly not meant to solicit ooohs and ahhhs from the gallery), yet when faced with a little challenge such as the design above, I do my best to make things as bulletproof as possible.
10. CSS and Round Corners: Build Accessible Menu Tabs
Amazon’s menu tabs, with their nice round corners, look good — but they’re totally inaccessible. First of all, they’re missing ALT tags. Additionally, the W3C accessibility guideline 3.1 (priority 2) clearly…. This article goes into how to fix that, and make it usable for the web.
11. The ULTIMATE CSS only drop-down menu
CSSplay goes through how to make a css only drop down menu. This can be a challenge when trying to get it to work in all browsers, but they seem to get it down OK.
12. Sons of Suckerfish
Sons of Suckerfish is a collection of articles that explain how you can best create the effects of the
:hover,:active,:focusand:targetCSS pseudo-classes to achieve some interesting results on just about any HTML element on just about any browser. Hey kids – A Suckerfish isn’t just for dropdowns (although it’s a damned good, lightweight way of making them too).This page is more a script overview and docs than an article, but it is definitely worth the read. It can make all your css navigations perfect.
13. Styling Nested Lists
Recently, I was building a site map and realized that it is basically an outline of sorts. So how should I go about marking it up? I settled on a series of nested tables — ha! gotcha — nested unordered lists.
14. Advanced CSS Menu
This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS
positionproperty.
CSS Forms:
Yet again, another warning. Alot of these articles contain javascript to spice up the forms. I solidly suggest adding this javascript because it can increase usability and attractiveness.
1. Prettier Accessible Forms
It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form
labelandinputare horizontally adjacent, as in the image below, can be a real problem. We used to use tables, which worked well in this scenario—but forms don’t constitute tabular data, so it’s a semantic faux pas.
2. Trimming form fields
Web forms often ask visitors for non-essential information, but long and complicated forms can seriously hinder the e-commerce sales process. Wouldn’t it be cool to give users the option to hide these optional fields at their own discretion, and with a clever use of Javascript, the DOM and some CSS we can!
3. Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Summary: Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.
Forms. Is there any other word that strikes as much fear into the hearts of grown web designers?
5. Useful tips to enrich your HTML Forms
In the past months I already dedicated several post about forms design and usability. In this post I want to share some simple tips useful to enrich your forms with various elements such as suggest messages, autosuggest feature instead of <select> tag, simple check during data input and how to show hidden fields selecting a radio element option.
6. Nice login and signup panel Newsvine like using CSS
7. FORM elements design using CSS and list (ul and dl)
After my last post (Clean and pure CSS FORM design) I receive a lot of messages with some suggests, opinions and critics about the method illustrated in these post to design a FORM using pure CSS code. I have to say I prefer to use table to place FORM elements into the page, but another method I often use is the following: using unordered list (<ul>).
8. Clean and pure CSS FORM design
Sincerly, in some case I used pure CSS code to design forms but, in general, I prefer to use tables. It’s simpler and faster than use only CSS property “to simulate” a table structure. In any case, for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.
9. Improve form usability with auto messages
This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.
10. Beautiful CSS Form
This tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only <label> and <input> tags to simulate an HTML <table> structure. You can reuse all CSS/HTML elements to design your custom form for your web projects:
11. Accessible, stylish form layout
Yes, HTML forms are the worst things known to web designers. Yes, HTML forms have to be accessible and usable. No, HTML forms do not have to be an eyesore.
12. Applying CSS to forms
Forms are an essential part of interaction on the Internet but they can look rather drab. With CSS we can position form items so they all line up nicely and add a bit of colour to jazz them up.
13. Getting Fieldset Backgrounds and Legends to Behave in IE
I’m sure someone has posted on this issue before I just haven’t found an answer I’m looking for. Jeff Croft has a close answer, but he is trying to solve a different problem. I built off of his exploration for this solution.
The “problem” occurs when you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color like so:
14. Push my button
If there’s one element I think doesn’t get enough respect, it’s gotta be
button. It’s played second fiddle toinputin tutorials and form examples for as long as I can remember. The few times it actually did get some attention, the lowlybuttonwas used and abused by the DHTML crowd—forced to accept obtrusive inline event handlers and other such nefarious crimes against semantic markup.
15. Showing Good Form
Earlier this year, I forget exactly when (it’s been a good year), I was building a client site that needed widgets which look like this (designed, incidentally, by my erstwhile writing partner, Cameron Adams):
Building this was a challenge not just in CSS, but in choosing the proper markup – how should such a widget be constructed?
16. Tableless forms
I used to believe that to properly mark up a long and complicated form you need a table. Recently though, I changed my mind after some intriguing code examples on the invaluable css-d list. On this page I present my take on tableless forms.
Cross-Browser, Better Code, Bug fixing etc:
1. Solutions to CSS Browser Bugs and Cross-Browser, Cross-Platform CSS Issues
Browser bugs with CSS can be an incredible source of frustration for Web designers and developers. The Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, and Cross-Browser, Cross-Platform Issues section below includes links to articles, tutorials, and resources to help you find CSS bug fixes (solutions to CSS bugs and browser rendering differences), CSS workarounds, hacks, and how to create cross-browser, cross-platform CSS – Cascading Style Sheets. Especially popular are IE7 CSS hacks and bug fixes, which are also included below, along with IE8 CSS bug fixes and more. All or nearly all CSS bug fixes, solutions listed below will still validate to W3C Recommendations, and if they don’t, they’ll say so with a warning at the particular Web site.
2. Overcoming CSS Cross-browser Compatibility issues with inline elements
Learn Web Design goes indepth on how to fix the pesky display: inline; errors in different browsers.
3. Cross-Browser Variable Opacity with PNG: A Real Solution
Periodically, someone tells me about the magic of PNG, how it’s the ideal image format for the web, and that someday we’ll all be using it on our sites instead of GIF. People have been saying this for years, and by now most of us have stopped listening. Sadly, flaky browser support has made PNG impractical for almost everything; but now, with a few simple workarounds, we can finally put one of its most compelling features to use.
4. Cross browser CSS for your site
This article will go through some useful cross-browser CSS techniques I use to get my sites to look the same in several modern browsers. It’s fairly easy to send out different versions of your site to different browsers. This should be avoided though since it will end up with you having to maintain the site as if it was in fact several. That defeats the whole purpose with standards, why are they even needed if you are adapting to the browsers instead? My opinion is that good cross-browser coding is to find the set of standards that are supported and then use them.
5. CSS Tip: Easy Cross Browser & Valid CSS Text Shadows
Although I am certain that I am not the only one doing this, I have developed an extremely easy way to get CSS text shadows without the need to use the wildly unsupported CSS property of text-shadow.
6. CSS coding for cross browser compatibility
Cross browser compatibility can be hard to achieve, but if you follow a few guidelines, you can make your CSS cross browser compatible a lot easier. Reset your CSS, use supported techniques and don’t forget to validate.
7. Cross Browser Testing (PC)
A sure sign of a rock solid, well coded CSS layout is that it displays consistently across browsers and platforms. A look at recent global browser stats shows that, while Internet Explorer continues to be the most popular web browser in general use, its user base is fairly evenly split between versions 6 and 7. And although other browsers such as Firefox, Opera and Safari have a relatively small share of the browser market, it would be unwise for any web designer or developer to ignore them when testing their work.
8. Browser Tests, Services and Compatibility Test Suites
Cross-browser compatibility is still one of the most complex issues when it comes to web-development. Web standards usually guarantee a (relatively) high degree of consistency, however no browser is perfect and particularly older browsers have always been quite good at surprising web-developers with their creative understanding of (X)HTML/CSS-code. Still you need to make sure that (at least) most visitors of your web-site can use it, navigate through it and find what they’re looking for as quickly as possible.
9. 5 Most Common Web Standards Misconceptions
When starting to get interested in web standards, you hear a lot of buzzwords, a lot of theories about what web standards are… Here are some most common misconceptions.
10. Solving 5 Common CSS Headaches
CSS is a relatively simple language to learn. Mastering it, on the other, can prove a little more difficult. Compensating for various browser inconsistencies alone can produce a migraine. In this article, we’ll demystify five of the most head thumping issues that you’ll encounter when building web applications.
11. Using CSS to Fix Anything: 20+ Common Bugs and Fixes
Without a doubt, a logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. Today we wanted to share with you some quick tips on how to avoid easy pitfalls when creating your CSS layout.