CSS Cheat Sheets etc

CSS and HTML Cheat Sheets

Thereâ€™s a lot of cheat sheets available for CSS, html and any other web technology. I have picked a few that I believe stand out because they are able to assist you remebering important elements of key web technologies or because they are really well structured.

Print out your favorite Cheat Sheet and put it on the wall just next to your monitor to get instant access to help and reference.

This cheat sheet is designed to not only be a quick reference for CSS properties but also to give you a good feel for how each property should be used. It contains all of the properties in the CSS2 specification including a description of the syntax of each one. There are also sections that describe selectors, pseudo-elements and pseudo-classes, @ rules, and colors.

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

This cheat sheet is designed to be a quick reference to all of the elements and attributes available in the XHTML 1.1 specification. And because XHTML 1.1 is designed to be modular, it is organized into sections to mirror the XHTML abstract modules and the elements and attributes contained within each.

The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozillaâ€™s examples). So, itâ€™s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.

This cheat sheet contains a chart of 1050 colors grouped by hue and varied into 25 different saturations and brightnesses for each. Each color has the HTML color code reprsented as a Hex triplet (e.g. #808080). Also, it contains a chart of the 216 Web-safe colors and each is represented as a single-digit Hex triplet (e.g. #999).

The RGB Hex colour chart is a very large (183kB) PNG file, and is sized to fit on a standard A4 piece of paper. It shows the 216 so-called â€œweb safeâ€ or â€œnon-ditheringâ€ colours (there are actually only 22 web safe colours, but those are revolting).

CSS getting started and reference resources

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.

Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules donâ€™t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works.

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.

Any designer who has worked with large CSS files will agree that its major weakness is its inability to use variables. In this article, we will learn how to implement variables by using PHP and Apacheâ€™s URL rewrite mod.

Making your website compatible with a wide range of browsers is probably the hardest task of a front-end developer. To make your coder life easier, here is 15+ tools and techniques for crossbrowser CSS development.

If you ever made a web site with the content in a center column and a different background for the body, or with a short lateral navigation bar, probably you experienced the problem of some elements not extending to the bottom of the browser window when the height of the content is lesser than the document area of the browser window.

A common pitfall of a CSS based columns layout is that the columns do not share a common height. Unlike a table based layout where the height of the table itself dictates the height of all of its columns, CSS columns are independent of one another in that respect. Now, this can be problematic (from a design standpoint) when you wish to style one of your CSS columns in a way that should extend all the way down to the end of the layout, such as giving a side column an explicit background color, a surrounding border etcâ€¦

CSS Positioning

How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width.

Buttons are a very important part of a website: Theyâ€™re the most common way your visitors can trigger an action and interact with your website. Sadly, even theses days many web pages still displays ugly buttons. Hereâ€™s our â€œTop Tenâ€ CSS buttons tutorial list, for giving your buttons, submits and links the beauty

CSS Typography

This is an example of what you can do by combining and tweaking type using css. I am not at this time going to be describing the code in much depth, but if you are interested in learning how I did it download my advanced css typography example page and look through the source code.

Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, letâ€™s say simple data chart? How about giving it a try with nothing but good olâ€™ css?

This vertical bar graph is done completely using DHTML and CSS! Unlike an applet based solution, this loads fast and blends in with the rest of the page. You can even use a transparent background for it!

Hereâ€™s a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really.

This simple technique just adds bars to a list of items behind the text (check out the finished example for an idea of what weâ€™re shooting for). It works for lists of any length. Longer lists benefit from being sorted by count since the relative values of the bars are easier to read when they are sequential. In this example, weâ€™re going to display the count for each item in the list, but you can leave that out if the value is less important on its own and youâ€™re just showing the relative values for comparison.

CSS Working with Images

Visitors browsing at slow connections have to wait until large images load and they donâ€™t have a clue something is missing â€” they see an empty block of space between two blocks of text. Image preloader will solve this issue.

I bet a bunch of you donâ€™t realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this weekâ€™s screencast, weâ€™ll figure out a way to create speech-bubbles without resorting to background images.

CSS Print Page Tricks

The secret to creating printable pages is being able to identify and control the â€œcontent area(s)â€ of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.

CSS and Tables

CSS Grid Frameworks

large collection of CSS Grid Systems, online generators and tutorial on how to use these in your design. Using a CSS Grid System is really worth considering if youâ€™re planning to create a complex magazine web design. This article will give you the overview and tools you need to get started.

Why use a framework? Besides saving time, there are lots of reasons: standardizing the organizational structure of your sites, avoiding dumb little mistakes, and browser compatibility. Sounds pretty compelling, but there are certainly reasons not to use them as well. For example, a framework might be too much for the site you are designing and itâ€™s basically just unnecessary bloat. Another common argument against frameworks is that CSS and XHTML go hand in hand, they need to be designed and constructed together, so using pre-written CSS just isnâ€™t an option.

Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.

WP_Query is a powerful tool to control what comes out of your loop. Today Iâ€™m going to teach you all how to use it to make a 3 columned newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts with a certain category. Weâ€™ll be using the 960 CSS framework for the basic layout and reset of our theme, it will chop a lot of work off whatâ€™s needed!

When Collis launched this site and asked readers for tutorial requests, a common one was for a â€œmagazine themesâ€ how-to for blog platforms. This tutorial focuses on the first part of the process: applying a CSS grid to the design to prototype a home page template.

CSS 3 Resources

This article presents 7 New CSS3 techniques that every web designer and developer should be aware of. CSS3 for sure will leads to greater flexibility and make effects that was previously complex and difficult to create much easier. Unfortunately it is not currently all the leading browsers that support CSS3.

Tool tips

BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript. Move your mouse over the items below to see examples.

CSS Navigation and Menus Tools

MyCSSMenu provides the average webmaster with tools to create custom, cross browser compatible css menu. Our generator makes it easy to create custom web navigation: Horizontal, Vertical, Drop-down menu without having to know all the complicated HTML and CSS. If you are a more experienced web developer we provide the sources code for all our CSS menus so that you can download, tweak, and integrate as much as you want. Feel free to use our CSS menu generator an unlimited amount of times.

Generates both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the effectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The â€œNormalâ€ mode should work well in most cases, creating a good balance between the two.

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

A tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and C Style code; the latter being anything that uses curly braces to start and end blocks, and semicolons to terminate statements. JavaScript and PHP both fall into that latter category.

Based on csstidy 1.3dev. The service is available in 4 languages : English, Deutsch, French, Chinese. It provides different compression layouts; you can sort selectors, properties, regroup selectors, optimize shorthands, compress colors, compress font-weight, discard invalid properties and add timestamps. It also allows to create a custom template the system will use to format the code. Note that your code should be well-formed. This is not a validator which points out errors in your CSS code.

â€œI absolutely hate having to switch all the â€˜< â€˜ and â€˜>â€™ signs in my code to â€˜<â€™ and â€˜>,â€™ respectively. I also hate having to write â€œ&â€ any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.â€ This handy tool is a little app that will do all that for you. Created by Elliot Swan.

This page contains a neutral colors chart and a general-purpose color chart. You can use the colors in the palettes with either HTML or CSS. Click on the color code to select it, then you can copy and paste it. Click on the Toggle button to convert from Hex to RGB and back. The charts are printed in tabular fashion so you can narrow your browser window with the palette and compare the colors to your design side-by-side.

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.

CSSEdit is another fantastic web dev app, which takes Appleâ€™s WebKit by the reigns to deliver a fantastic real-time visual CSS editing experience. But thatâ€™s just it! People only know it as a visual CSS editor, when it is actually much more! I use these 5 fantastic tips to keep my work flow fast and smooth.

A PHP/HTML/CSS template generator that creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout. The resulting template is a combination of several files i.e. this is a true PHP, html, CSS template that makes it easy to control multiply pages at a web site.

An online tableless layout generator that allows you to create and customize layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only .

Yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look of an entire site.

Very helpful, worked 100%, thanks. Do you use any Magento themes? Personally we used one that really helped to speed up page response times. It took a while to settle and work to our needs but now it’s perfect. Saved thousands on hosting by having it in a vps cloud. Thanks, Debecca.

In this great design of things you’ll get a B+ with regard to hard work. Exactly where you lost me personally ended up being in all the specifics. You know, as the maxim goes, details make or break the argument.. And that could not be more accurate right here. Having said that, let me reveal to you what did give good results. The writing can be rather persuasive and this is most likely the reason why I am making the effort to opine. I do not really make it a regular habit of doing that. 2nd, despite the fact that I can certainly notice a leaps in reasoning you come up with, I am not really sure of how you appear to unite the details which in turn help to make your final result. For now I will subscribe to your point however wish in the near future you connect your dots better.