This is the biggest collection of CSS Reference Websites And Resources to learn CSS and to make you a CSS expert.
Today, we are presenting you a huge stack of CSS reference websites and resources that would greatly help you to learn CSS and in becoming a CSS expert. This collection of CSS reference websites and resources contains links to various CSS blogs, CSS tutorials and every other CSS learning source that you would need in your journey to become a CSS expert.
If you have plans to design a website, CSS is one of the essential parts that you are going to need. What a website user sees on the browser, that is a result of CSS at the back-end. Beautiful navigation menus, amazing popup boxes, astonishing image galleries and slide shows, mouse over effects and every other thing you see designed on a website that amazes you is because of combination of CSS with other languages like HTML5 and jQuery. So, you need a very strong knowledge of CSS to attract users to your website.
Keeping in view the importance of CSS, this list of CSS reference websites and resources would help you in learning many tricks of CSS in a very short time. Don’t rush on the tutorials as it would be very difficult for anyone to digest them all at once. Keep coming back daily and get something new to learn.
A List Apart css Topics
A List Apart, the premier site to read articles about web design and best practices, has a collection of articles on the topic of css dating back to 1999. Most articles are geared towards intermediate to advanced developers who put a strong emphasize on standards-compliant designs.
css3 Click Chart
css Help Pile
css3 Previews
css Basics
css Basics is formatted like a book with 18 chapters dedicated to educating readers about fundamental css concepts. The writing is clear and succinct – making it a great resource for those just starting out. All 18 chapters can be printed or downloaded in PDF format.
Holy css Zeldman!
Holy css Zeldman (not a site by Jeffrey Zeldman) is a useful collection of resources that link to standards-based css tutorials, tools, and layouts.
When can I use…
Eric Meyer: css
Here’s a collection of works by Eric Meyer (acclaimed web professional and author). Some resources you’ll find on this page are css/edge (Eric Meyers experiments on css) and css reference.
css Tricks
456 Berea Street – css category
456 Berea Street has over 300 posts under the css category. Some posts talk choosing an image replacement method while others teach you css techniques.
MORE / INFO
Roger Johansson’s
css Tutorial
Position Is Everything
Those just getting their hands around authoring css code will quickly realize that a significant chunk of time (and frustration) stems from getting rid of browser bugs. Position Is Everything discusses known browser bugs and shares css methods that work across browsers. Here, you can read about the one true layout or learn what happens when you nest absolutely-positioned div’s.
CSS Shorthand Cheat Sheet
HTML Dog css Tutorials
HTML Dog is a tutorial website dedicated to teaching XHTML and css best practices. There’s three css tutorial sections: Beginner, Intermediate, and Advanced.
Learn css Positioning in Ten Steps
Positioning elements using css can be a tricky concept at first. If you’re having a hard time understanding the fundamentals of css positioning, check out this 10-step tutorial to get you positioning stuff in no time!
css Easy
Andy Budd css/Web Standards Links
Andy Budd (directory of Clearleft, css guru, and author of one of my favorite books – css Mastery) has a set of css/web standards links to help you find reliable, useful information about css.
Pxleyes Cheat Sheet
W3CSchools css Tutorial
W3CSchools has a css section that covers the very basics of css up to more advanced topics.
Blueprintcss Cheat Sheet
css Zen Garden
css Zen Garden is a showcase of the things you can do css. Most importantly, it highlights the concept of separating content from presentation. Using the same HTML file, designers submit external stylesheets to style the HTML file. I suggest using the Web Developer Tool to inspect how the layouts work and what styles affect certain elements of the page.
css at MaxDesign
At MaxDesign, you can find Russ Weakley’s brilliant set of css-related tutorials. Some things to expect here are: Listmatic – which shows you a variety of ways you can use css to style lists, and Floatutorial – which goes through the fundamentals of floating elements.
W3C – Cascading Style Sheets, Current Work
csseasy.com
cssEasy.com’s slogan is “learn css the modern way”. The site promotes learning by experience, with the idea that if you inspect the source code and see how things fit together as a whole, you’ll gain a better understanding of css. The Web Developer Tool will also come in handy on this website.
css Advanced Layout Module
css-Discuss
css-Discuss is a community of css enthusiasts. The css-Discuss Wiki is a comprehensive collection of real-world usage of css.
Conversation with css 3 team
Web Design from Scratch: css
Ben Hunt’s Web Design from Scratch has an excellent section on css that covers basic concepts about css. I highly recommend beginners start off with Introduction to css, a quick but very informative starting point to getting your hands dirty with css.
The fundamental problems with css3
css-Tricks
css-Tricks is a blog dedicated to the topic of css. You’ll find helpful posts such as what css Sprites are (in a nut shell), techniques for image replacements, and even screencasts on topics like conditional stylesheets.
css3 properties tests for webkit based browsers
css on Delicious
The css tag on Delicious is a great way to find popular links that relate to css. It allows you to see what people are currently reading.
Rounded Corner Boxes the css3 Way
Attribute Selection in css3
cssDog
cssDog has a section for both beginners and more advanced developers. Aside from css lessons, their css Reference section – which lists quick guides and color references – are very helpful.
css Property Index
css Navigation Techniques
Learn css Positioning in Ten Steps
The 1 Kb css Grid
Free css Templates
Spiffy Box
css Type Set
Beginner’s Guide from a Seasoned css Designer
5 Tips for Organizing Your css
Will the Browser Apply the Rule(s)?
How to Size Text in css
Creating Sexy Stylesheets
css Cheat Sheet
css Beauty
css from the Ground Up
Turning Lists Into Trees
W3Schools Home
Fancy Paragraphs with css
Even More Rounded Corners with css
Sencha css3 Cheat Sheet
css Font Size Reference
css3 Gradient Generator
Ultimate css Gradient Generator
Sky css Tool
W3C css3 Basic User Interface Module
It’s perhaps not the most user friendly reference available, however the official css3 specifications from the World Wide Web Consortium lists everything you ever need to know about css.
Dochub
A user friendly list of every css property you can think of. Simply click on the property on the left hand column to load a summary and example in the main content area.
SitePoint css Reference
As one of the largest webmaster communities on the web, Sitepoint doesn’t disappoint with a great reference for learning css. Each property has details of the version it was introduced in, the browser versions it is compatible with and useful examples of how the properties can be applied.
Where the resource really comes into it’s own is the unique play area that each property has. A unique example is given for each property and you can change the HTML and css code and see what the outcome will be in real time. It really makes understanding a property you have little experience with that much easier.
css Dog
A dedicated css website that has useful reference pages for css properties, css shorthand properties and css3 selectors.
HTML5 css Properties
A list of all valid properties of css 2.1. Short descriptions, possible values, examples and related properties of each property are all given.
Mozilla css Reference
An alphabetical list of all css properties, pseudo-classes and elements, @-rules, and selectors. The css version of each property is listed along with its browser compatibility. It’s well presented and very easy to use.
css Easy
Finding it difficult to understand how css layouts work? You may find css Easy useful. Instead of simply listing css properties and selectors, css Easy encourages you to view code of each layout and examine the HTML and css in more detail to help understand how the layout was created.
css Properties and Values
A one-page reference that lists css properties and values with further information about the property on the right hand side of the page.
css3 Click Chart
Learn dozens of css3 tricks by clicking on the property you want to reproduce and viewing the code at the bottom of the page. The browser support for each property, description and link to the World Wide Web Consortium information page are referenced too.
Meiert css Properties
A css property table that is updated regularly. Properties are listed alphabetically and linked to the corresponding W3 information page. The table also details what css version the property works with and its initial value.
css3 Previews
Whilst the preview only lists around a dozen or so properties, each property has a long detailed explanation, examples of how it works and browser compatibility details.
css Reference
A list of css properties from W3 divided into categories. Valid values, short examples and details of whether the property is inherited are all noted.
css3 Color Names
A list of the 147 colour names that are defined in the css3 colour specification. Colours are listed in alphabetical order and an example is shown for reference.
css 3 Selectors Explained
A long detailed article of css3 selectors. The article was written around 5 years ago however you should still find it useful.
css3 Browser Compatibility Table
A browser compatibility table for css3 selectors and properties on Mac and Windows.
css3 Compatibility table
Shows what version of Internet Explorer, FireFox, Opera, Safari and Google Chrome each css3 selector works with.
When Can I Use
A fantastic browser compatibility table that shows you what css3 elements are supported on desktop and mobile browsers. It includes a large list of filter options such as browser, version, language and more.
css Basics
A fantastic resource for beginners that will give you a basic understanding of how css works. The course is divided into 18 chapters, covering everything from css classes to lists and pseudo elements. The whole course can be downloaded in PDF form too.
css Play
Written by experienced programmer Stuart Nicholls and his wife Fran, css Play is a great place to understand how menus, layouts, boxes and other css tricks work. You need to view the source of each page to understand how each css example works.
css Tricks
Arguably the best css blog online, css Tricks is a beautifully designed website from developer Chris Coyier that posts new css tricks and techniques every few days.
456 Berea Street
Don’t let the average design full you, 456 Berea Street is a fantastic resource that has close to 400 css tutorials.
css Tutorial
A tutorial website that is geared towards beginners. It walk beginners step by step through the basics of css. It also has over 50 video tutorials and several podcasts too.
Veign css3 Cheat Sheet
A large css3 cheat sheet that organises properties by type. Values for each property are displayed to the right hand side of them. One of the most popular css3 cheat sheets available online.
css Cheat Sheet (V2)
One of the best css cheat sheets available. It displays a box model and lists of the most popular syntax, properties and units by category. Despite cries from a lot of fans, it has not been updated to from css2.1 to css3.
GoSquared css2 and css3 Cheat Sheets
The css2 cheat sheet shows the most popular syntax and properties and a useful box model. Rather than being a replacement, the css3 cheat sheet lists all new css features so should be used in conjunction with the original.
Core css
A good series of css reference cards. Part 1 covers css rationale and use, syntax rules, inheritance and more. Part 2 discusses element selectors, ID selectors, descendent selectors, attribute selectors and combining selectors. Part 3 discusses the css visual model, box model, problems with floats and positioning.
Whereas other cheat sheets try and cram everything into one page, the Core css series of reference cards aim to explain common problems in more detail.
Blueprintcss Cheat Sheet
A great cheat sheet that users of the Blueprintcss Framework will find useful. The second page shows a grid for designing layouts, file structures and tools and resources.
YUI Library
A cheat sheet for the YUI Library css framework. It mainly focuses on grids and fonts.
css Shorthand Cheat Sheet
Shows properties and example values for margin and padding, borders, backgrounds, fonts, lists and colours.
css Shorthand Codes Cheat Sheet
Includes a cheat sheet for shorthand codes, XHTML documents, form tags and an example style.css template. Unfortunately, you need to sign up in order to download the file.
css3 Rule Generator
The Cross-Browser css3 Rule Generator that changes the elements on the right hand side as you modify the css code on the main page.
css3 Selectors Test
A test area that runs small tests on css selectors to see if they are compatible on your browser.
css3 Tools
A range of different css generator tools that helps you create gradients, transforms, shadows and text strokes.
css3 Generator
Several different css generators in 1. The service allows you to customise text shadows, font faces, columns and more.
css3 Gradient Generator
The easiest way of creating css3 gradients. You can select up to 3 colours in the colour picker. The direction of the gradient and whether the css code uses hexadecimal or RGB code can all be altered.
css Generator
A crude looking css generator that gives you the code for the alignment of text and backgrounds, table borders and margins and padding.
I hope that you surely would find this list of CSS reference websites and resources very useful. Don’t forget to appreciate me by sharing the list with your friends.
See Also: 60+ Best CSS3 Tools & Online Generators
