CSS Cheat Sheet, A Lifesaver All Designers Need Sometimes!

Last Updated on December 8, 2016

98

shares

Facebook

Twitter

Google+

Pinterest

+

Everyone sometimes need to refresh a memory with a really good CSS cheat sheet. This is why we have gathered 18 of the best and most useful ones that will provide the necessary backup help. Post it on your web notes, bookmark it, or a sticky note to have a instant guide for your CSS. CSS or Cascading Style Sheet really help designers to customize their website conforming on the different browsers.

These things should come in handy. Hope it will help you in your web designs.

Next section is all about cool CSS3 tricks and tips. Be sure to give it a shoot.

26 Cool CSS3 Tricks, Tips, Tutorial Sites and Articles

I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. To be honest it’s hard for me to keep up with technologies myself, but we really cannot not to use those new great selectors to make our designs even more beautiful, user-friendly and lightweighted.

This is printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.(Download *pdf)

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more. Also check excellent CSS3 Preview page there, which shows demos of new features.

This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.

In this article, xhtml.com interviews Bert Bos, chair of the CSS Working Group at W3C, about the next release of the CSS specification and how past design decisions are influencing the future of CSS. This interview offers a rare opportunity to learn more about the inner workings and thought processes of the CSS Working Group at W3C.

This screencast covers many of CSS3 techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image.

In this tutorial, your are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them.

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Let’s take a look at some great CSS snippets.

25 Incredibly Useful CSS Snippets for Developers

Below is a fantastic list of 25 Css snippets that I am sure you will find extremely useful. Whether you are a veteran web developer, or are just getting your foot in the door of css, they are all well worth checking out.

Hide text with text indent

This is extremely useful for use for things such as your company logo. More often than not, it’s an image, but you’ll want to display it in h1 tags for SEO as well. Here’s the best way to do so. What we basically do is hide the text far away off the screen, and apply a background image instead.

Style links depending on file format

This snippet is aimed at user experience. Often on the internet we find ourself clicking on links knowing nothing about where we are heading. This snippet can be used and expanded to show small icons next to your links telling the user if it is an external link, an email, a pdf, an image, and so much more.

Basic css sprite button

Having a button or link with a background image is fairly normal, and nowadays, we require further effects to enhance the user experience. Once of this is an indicator to the user that they are hovering over a button. Using a sprite, we can create this effect by changing the position of the background image down a certain height to show the background to the button on hover. A simple yet effective technique.

Google Font API

Google recently released a fantastic resource for web designers allowing them to load new fonts from google for use in our web pages. We can even load different variants of fonts such as bold, italic and so on. While the library of fonts available from google is limited, there is still plenty to use. First include the dynamically written stylesheet by naming the fonts and variants you want, and then use the font names in your css as you normally would! For further info on Google Font API, read here.

Browser specific hacks

Sometimes it’s useful to target specific browsers to fix their inconsistencies and conditional comments aren’t always the best way to do so. This list of css browser hacks by Chris Coyier is a top-notch list of ways to target browsers with simple css.

Fixed Footer

You would think creating a footer that sticks to the bottom of the screen would be rather hard, but surprisingly it isn’t if you want to start with a basic footer. There is an IE6 hack we have to use, but apart from that, it’s easy!

Flip an image

Flipping an image rather than just loading a new image that is already reversed can be rather useful. Say you want to use only one image for an arrow, but have several on the page going in different directions. Here’s your problem solved.

Clearfix

A while back, someone decided it was time to clear floated elements without adding any extra markup to the document. They did this by creating a class that can be applied to the container of floated children to clear it. A fantastic way to do so, and something that is nowadays, widely used.

Rounded Corners

With the slow introduction of css3, rounded corners have been made easily possibly in modern browsers. Sadly we still don’t have css3 support for IE, but it will be available in IE9 whenever that is released.

Style Overriding

It still surprises me that some people don’t know about !important in css, because it is such a powerful and useful tool to have. Basically, any rule with !important at the end, will override any of the same rule that is applied to that element wherever it appears in the css file, or in-line html.

[code language=”css”]p{ font-size:20px !important;}[/code]

Font face

Font-face didn’t really break through until late last year, but has been around since the days of IE6 being a modern browser! It’s picked up in support a lot now though, and offers a great way to use non web safe fonts in your web projects. While this snippet works, you might as well save your time by using the Font Squirrel Font Face Generator.

Center a website

A common design trend these days is for your website to center itself in the middle of browser’s viewport horizontally. This is an easily achievable thing to do.

[code language=”css”].wrapper { width:960px; margin:0 auto;}[/code]

Min-height in IE

This comes down to fixing a simple, yet annoying bug in IE’s capability of handling min-height. In essence, IE interprets height as min-height, so since IE wont implement the auto height, this snippet will fix all this for us.

Vertical Center

This short snippet allows you to vertically center the contents of a container without any extra markup by simply displaying it as a table cell which then allows you to use the vertical-align attribute.

Create pullquotes

Firstly, what is a pullquote? Well in news and magazine style websites, you’ll often notice small quotes added within the article, not as full blockquotes, but as small quotes that sit within the article but to the side, sometimes adding things such as people’s opinions or quotes. They are extremely easy to create you’ll be glad to know, and when used properly, can add greatly to the user experience when reading an article.

Print page breaks

This add’s again to the user experience when printing. For example, when printing an article, it may be useful for a user to have the comments on a new page from the article itself. by adding this class to the comments area, a page break will appear when printing. It can be used anywhere else on your site as well!

[code language=”css”].page-break{ page-break-before:always;}[/code]

Further thoughts and discussion

I know for sure I haven’t been able to cover every useful css snippet out there, but have provided those that I think will benefit the most. What do you think about these snippets, and what do you think about others that are out there? If you know of some mighty useful css snippets, then bring them to the table in the comments, so we can see and discuss them!

20 Handy HTML5 & CSS3 Tools, Resources And Guides

In this article you’ll be able to find some great tools, cheat sheets and much more you could need to master these features.

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.

CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by Woork. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

If You are creating and developing new web-sites regularly, You should think about template creation, collecting useful code snippets and things like that. You should do that to fasten development process, so I think You could use, change, optimize these template files to Your needs, however check out licence terms, if You use these for business purposes. However this is very generalize list for now, to clear out the best from the best sites. Use them well!

“CSSTidy is an opensource CSS parser and optimizer. It is available as executable file (available for Windows, Linux and Mac) 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.”

I pasted their information, because it says everything better than I could.

For some people there can be a question – why You need to optimize Your CSS code? Just if You want cleaner code, faster loading page, so You both – You and visitor benefit from optimization!

“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.”

Very useful template files, helping You not to start always from big fat zero..and code everything again and again – now You can spend more time adding new features and think more about design, then reiterative process.

Snipplr is very useful place storing and organizing many code snippets (Javascript, HTML, PHP, CSS, Ruby). You use regularly in Your development process. And also everybody can share and add their snippets, so the section Popular Code Snippets clearly demonstrates the best and the most used codes for everybody. Pretty great. Also these snippets work with TextMate, too.

“Every YUI Library component ships with a series of 300 examples that illustrate its implementation. These examples can serve as starting points for your exploration of YUI, as code snippets to get you started in your own programming, or simply as an inspiration as to how various interaction patterns can be enabled in the web browser via YUI.”

Very useful template files, which are great for starting points and You have good collection of examples to satisfy almost every web designer.

This grid system is becoming really popular – they offer commonly used dimensions, based on a width of 960 pixels offering 12 and 16 column grid systems. Designers use grids, to help their sites to look more harmonious and precise. You get several template files and mockups, when You download that grid system, which are really helpful in the right hands.

This framework is also based on Eric Meyer reset system, but also there are more features as basic styling, code is optimized without any double resets and more, go to their homepage to check for details.

I hope You’ll use these sites as a reference evolving Your skills and speed up Your development process! I am sure there are more sites out there, if You know some more, be honest and leave backlinks, will be appreciated!

Now we will see some great text CSS wrapping.

CSS3 Properties For Better Text And Word Wrapping

CSS3 is the one we use today. If you can believe it, its first drafts were published back in 1999, so after a 12 years period of development, you would expect the stylesheet to work wonders. And we all know it does. The word-wrap features were the last big addition to CSS3 and it was something CSS 2.1 didn’t feature. It also works in all major browsers, including old Internet Explorer. However, word-wrap has been removed from CSS3 and, instead of it, some other properties were added.

Text-wrap

Text-wrap is one of those new properties. There are three options to it: normal, none and avoid.

The normal property is the default value and it happens when no settings are specified. Any text wrapping you see out there right now is the equivalent of text-wrap: none;.

When the property is set to none, this tells the browser that text in the specified element should not break at all. This has something to do with overflowing and the overflow property. Once text reaches the end of the container, it will overflow its parent.

The last value, avoid, allows line breaking to happen, but also tells the browser to be selective about where breaks should happen. This is a smart idea, but it might not work so well – you can’t always base your decisions on the browser’s engine.

Talking about browsers, there is unfortunately no browser out there supporting the new text-wrap properties, so you might want to wait for a while until you will use them.

Overflow-wrap

The second new property is overflow-wrap and is the complete replacement for word-wrap. Its values are normal and break-word.

This property is for words which are too long and don’t have enough space in the container. The property specifies to the browser if it may break a word or not.

Note that if text-wrap is set to none, then overflow-wrap has no effect. Words will also not be hyphenated – for this wait a bit more, I will talk about it later on.

There is unfortunately no support for this property either, so wait with it for a while.

Word-break and line-break.

Browsers always assume words and lines should brake according to the English language way of doing it. The rule of words breaking only when there is a space or a punctuation mark doesn’t always apply, there are some languages where this is not the case.

There is no support for this property either yet, but it also seems like it will only be useful to people dealing with content which has other rules than in English – that is other languages. It also seems that the property needs some more working on, as it is quite unclear.

Text-overflow

Text-overflow is not entirely a new property. It allows clip and ellipsis as its only two values. The property defines how to handle text that overflows its parent container.

Clip is the default value and tells the browser to cut off text and leave the remaineder invisible. It is also happening by default in all browsers now. Note that for this property to work, the text will have to be inside an element that doesn’t allow natural line breaking. To be honest I don’t get this one and look forward to it being worked on.

The second property, ellipsis, tells the browser to cut off the text, but show an ellipsis (“…”) to indicate there is some text that is not visible.

Unlike the other new properties, this one is supported by all major browsers: IE6+, Chrome, Firefox 7+, Safari 1.3+ and Opera 11+. As you can see, there is not much support for older versions, but newer ones will always work well with text-overflow.

Hyphens

These are new in CSS3 and indicate how and if browsers should insert hyphens. None, manual and auto are its three properties. The first one tells the browser to never hyphenate words. Note that this is not the default property and browsers do not hyphenate words even if break points are defined.

Manual is the default property. The browser always avoids hyphenating unless hyphenation characters are indicated and waits for the designer to do it. There is always a way more to hyphenate words: manually. You can do it by inserting the soft hyphenation character, which is &shy;. A hyphenated word would look like this in HTML: de&shy;signer.

The auto property tells the browser to automatically insert word breaks and hyphenation in accordance to the defined language. I don’t know how well this works with languages other than English, but it might be worth trying.

Is there a time that you would like to have a refresher course or suddenly forget about that thing ? If yes, then you need some handy CSS cheat sheets. Is there a time that you would like to have a refresher course or suddenly forget about that thing ? If yes, then you need some handy CSS cheat sheets.