Cheatsheets_titleEveryone 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.


Table of Contents:

  1. Choose The Best CSS Cheat Sheet For You!
  2. 26 Cool CSS3 Tricks, Tips, Tutorial Sites and Articles
  3. 25 Incredibly Useful CSS Snippets for Developers
  4. 20 Handy HTML5 & CSS3 Tools, Resources And Guides
  5. Handy CSS Framework, Template And Snippet Sites
  6. CSS3 Properties For Better Text And Word Wrapping

Choose The Best CSS Cheat Sheet For You!

Not everyone has the same frame of work, that’s why we offer you 28 CSS cheat sheets. Now it’s up to you to choose the one that suits you best. Let’s start!


1. CSS 3 Cheat Sheet

Cheatsheets1

2. CSS V2 Cheat Sheet

Cheatsheets2

3. liquidicity CSS Help Sheet

Cheatsheets3

4. CSS Cheat Sheet

Cheatsheets5

5. Practical Cheat Sheet

Cheatsheets6

6. CSS Properties And Values

Cheatsheets8

7. Liberty Boy: CSS Style Sheet Quick Reference

Cheatsheets10

8. CSS Specificity- Cheat Sheet

Cheatsheets11

9. CSS Shorthand Cheat Sheet

Cheatsheets12

10. CSS3 Click Chart

Cheatsheets15

11. Design 215 : CSS Quick Reference Guide

Cheatsheets155

12. Cogeco : CSS Quick Reference Guide

Cheatsheets16

13. Digilife : Cascading Style Sheets Level 1 properties Cheat Sheet

Cheatsheets17

14. Dustin Diaz: CSS Shorthand Guide

Cheatsheets19

15. DZone : Core CSS: Part I

Cheatsheets20

16. HTML Primer : CSS Cheatsheet

Cheatsheets21

17. Ian Graham : CSS Level 1 and CSS-P Quick Reference Charts

Cheatsheets22

18. Javascript Kit: CSS Reference Guide

Cheatsheets24

19. KillerSites : HTML and CSS Codes

Cheatsheets25

20. NHS Designs: CSS and Web Design Cheat Sheet

Cheatsheets26

21. Tag Index : CSS and HTML Cheats and Codes

Cheatsheets27

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

title-css3-useful-webdev-webdesign-resourcesI 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.


 

1. Take Your Design To The Next Level With CSS3

In this article you’ll learn why CSS3 should be used and how web designers use it already in good way. Great article for getting you started with CSS3.

next-level-sm-css3-useful-webdev-webdesign-resources

2. Push Your Web Design Into The Future With CSS3

Here are five CSS3 techniques snatched from the future that you can put into practice in your website designs today.

future-sm-css3-useful-webdev-webdesign-resources

3. Super Awesome Buttons with CSS3 and RGBA

Learn how to create super cool, scalable buttons with CSS3.

buttons-css3-useful-webdev-webdesign-resources

View Demo

4. CSS 3 Cheat Sheet (PDF)

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)

cheat-sheet-css3-useful-webdev-webdesign-resources

5. CSS3.Info

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.

info-all-css3-useful-webdev-webdesign-resources

6. Introduction to CSS3 – Part 1: What Is It?

These six part series are providing an introduction to the new CSS3 standard which is set to take over from CSS2 from DesignShack.

designshack-css3-useful-webdev-webdesign-resources

7. Accessibility Features of CSS from W3

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.

w3-css3-useful-webdev-webdesign-resources

8. Conversation with CSS 3 team

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.

conversation-css3-useful-webdev-webdesign-resources

9. Six Questions: Eric Meyer on CSS3

Great interview with Eric Meyer about CSS3.

eric-meyer-css3-useful-webdev-webdesign-resources

10. The fundamental problems with CSS3

This article brings up several problems and issues with CSS3, interesting reading.

problems-css3-useful-webdev-webdesign-resources

11. CSS3 Exciting Functions and Features: 30+ Useful Tutorials

In this post you will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.

exciting-functions-css3-useful-webdev-webdesign-resources

12. Old School Clock with CSS3 and jQuery

old-school-clock-css3-useful-webdev-webdesign-resources

13. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

sliding-jquery-css3-useful-webdev-webdesign-resources

View Demo

14. Rounded Corner Boxes the CSS3 Way

rounded-css3-useful-webdev-webdesign-resources

15. #57: Using CSS3 by Chris Coyier

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.

chris-coyier-css3-useful-webdev-webdesign-resources

16. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

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.

layout-html5-css3-useful-webdev-webdesign-resources

View Demo

17. 11 Classic CSS Techniques Made Simple with CSS3

In this tutorial from Nettuts you will learn eleven different time-consuming effects that can be achieved quite easily with CSS3.

11-simple-css3-useful-webdev-webdesign-resources

18. CSS 3 selectors explained – Overview of CSS 3 selector syntax

explained-selectors-css3-useful-webdev-webdesign-resources

19. 3 Easy and Fast CSS Techniques for Faux Image Cropping

faux-image-css3-useful-webdev-webdesign-resources

20. CSS3 Borders Preview

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.

borders-css3-useful-webdev-webdesign-resources

21. CSS3 property tests

browser-support-css3-useful-webdev-webdesign-resources

22. Overview of CSS3 Structural pseudo-classes

structural-pesudo-css3-useful-webdev-webdesign-resources

23. 5 CSS3 Techniques For Major Browsers using the Power of jQuery

techniques-css3-useful-webdev-webdesign-resources

24. jSlickmenu: A jQuery plugin for slick CSS3 menus

slick-jquery-menu-css3-useful-webdev-webdesign-resources

View Demo

25. CSS: border-radius and -moz-border-radius

border-radius-moz-css3-useful-webdev-webdesign-resources

26. Modernizr

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.

modernizr-css3-useful-webdev-webdesign-resources

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.

h1 {
	text-indent:-9999px;
	margin:0 auto;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat scroll;
}

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.

/* external links */
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}

Remove textarea scrollbar in IE

Internet Explorer has an annoying habit of adding scrollbars to textarea’s even when the textarea’s content is not overflowing. You can rectify this flaw with this easy to use snippet.

textarea{
	overflow:auto;
}

Drop cap

Commonplace these days in blogs and news sites is the dropcap. You’d be surprised at how easy it is to implement, and how well it degrades for older browsers.

p:first-letter{
	display:block;
	margin:5px 0 0 5px;
	float:left;
	color:#FF3366;
	font-size:60px;
	font-family:Georgia;
}

Css Transparency

Transparency is something that isn’t done the same way across browsers which can be annoying. Here’s how you can target transparency in multiple browsers.

.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Css Reset by Eric Meyer

Eric Meyer’s css reset has become almost standard now days for use at the start of your stylesheet. Having been adopted by some of the most influential designers, you can be sure of its quality.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Image preloader

Sometimes it is useful to pre-load your images so that when a certain element is needed, they’ll already be loaded for you and there wont be any delay or flickering.

div.loader{
	background:url(images/hover.gif) no-repeat;
	background:url(images/hover2.gif) no-repeat;
	background:url(images/hover3.gif) no-repeat;
	margin-left:-10000px;
}

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.

a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}

a:hover {
	background-position: 0 -30px;
}

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.

<head>
	Inconsolata:italic|Droid+Sans">
</head>
body {
	font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px;
}

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.

/* IE 6 */
* html .yourclass { }

/* IE 7 */
*+html .yourclass{ }

/* IE 7 and modern browsers */
html>body .yourclass { }

/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }

/* Opera 9.27 and below */
html:first-child .yourclass { }

/* Safari */
html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass {  }

/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .yourclass  {  }
}

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!

#footer {
	position:fixed;
	left:0px;
	bottom:0px;
	height:30px;
	width:100%;
	background:#999;
}

/* IE 6 */
* html #footer {
	position:absolute;
	top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

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.

img.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

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.

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

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.

.round{
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
}

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.

p{
	font-size:20px !important;
}

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.

@font-face {
	font-family: 'Graublau Web';
	src: url('GraublauWeb.eot');
	src: local('☺'),
		url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

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.

.wrapper {
	width:960px;
	margin:0 auto;
}

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.

.box {
	min-height:500px;
	height:auto !important;
	height:500px;
}

Image loading

This image loading effects mimics that of an ajax loader, where a loading circle is displayed while content loads. This works especially well for larger, slower loading images, and is css only!

img {
	background: url(loader.gif) no−repeat 50% 50%;
}

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.

.container {
	min-height: 10em;
	display: table-cell;
	vertical-align: middle;
}

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.

.pullquote {
	width: 300px;
	float: right;
	margin: 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font: italic bold #ff0000 ;
}

Text Selection

Some people are unaware that it is possible to change the color when you highlight text in your browser. It is so easy to with two selectors; just be careful you don’t ruin your site with it.

::selection {
color: #000000;
background-color: #FF0000;
}
::-moz-selection {
color: #000000;
background: #FF0000;
}

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!

.page-break{
	page-break-before:always;
}

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.


1. CSS3 Selectors Test

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.

Selectors-test-css3-tools-generators

2. CSS3 Please!

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.

Please-css3-tools-generators

3. CSS3 Generator

Allows you to create and costumize multiple CSS3 effects.

Generator-css3-tools-generators

4. CSS3 Transforms

You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms  (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

Transforms-css3-tools-generators

5. CSS3 Gradient Generator

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.

Gradient-css3-tools-generators

6. Border Radius

Allows you to create rounded edge rectangles.

Border-radius-css3-tools-generators

7. Modernizr

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.

Modernizr-css3-tools-generators

8. CSS3 Previews

Many new CSS3 feature previews and demos.

Previews-css3-tools-generators

9. CSS Template Layout Module

Learn about popular CSS3 modules and opportunities CSS3 offers.

Template-layout-module-css3-tools-generators

10. 5 Techniques to Acquaint You With CSS 3

Learn some of the most popular new CSS3 features.

Techniques-acquaint-you-with-css3-tools-generators

11. Web Browser CSS Support

This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.

Web-browser-support-css3-tools-generators

12. Font Drag

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.

Font-drag-css3-tools-generators

13. CSS3 Cheat Sheet

Downloadable PDF file containing complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

Cheat-sheet-css3-tools-generators

14. Sizzle

A pure-JavaScript CSS selector engine
designed to be easily dropped in to a host library.

Sizzle-css3-tools-generators

15. Web Designers’ Browser Support Checklist

Displays web browser support on HTML5 and CSS3.

Web-designer-checklist-css3-tools-generators

16. HTML5 Visual Cheat Sheet

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.

Visual-cheat-sheet-css3-tools-generators

17. HTML5 Demos And Previews

You can watch HTML5 demos, new features and check out browser support.

Demo-preview-html5-css3-tools-generators

18. The Power Of HTML5 and CSS3

Article covering HTML5 and CSS3 combination advantages.

Power-html5-css3-tools-generators

19. HTML5 Cheat Sheet

HTML5 features and useful info at one place.

Cheat-sheet-2-html5-css3-tools-generators

20. HTML5 Gallery

A showcase of sites using HTML5 markup

Gallery-html5-css3-tools-generators

Now lets look at some great CSS frameworks.


title-css10 Really Handy CSS Framework, Template And Snippet Sites For Smart Web Designer

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!


1. CSSTidy

csstidy

“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!

Get executable file here or use online optimizer!

2. Clean CSS

cleancss

You can also use this online optimizer version, which is very similar, but I am design geek, so I enjoy this site a little more. This calls, pick Your favorite one!

3. Blueprint CSS

blueprintcss

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

blueprint-test

4. Code-Sucks

code-sucks

Great collection of many different css layouts, code snippets (CSS, JavaScript, PHP), website templates. These really become handy in web development process. Put these in good use.

code-snippet

5. Snipplr

snipplr

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.

6. MaxDesign

Perhaps You know this site, I think I mentioned it somewhere before, but however this site must be included, because it’s really useful.

There You can find listamatic1 (one list – many different ways how to style it), listamatic2 () and several tutorials how to create CSS based lists, CSS floats and use CSS selectors.

maxdesign

7. MeyerWeb CSS Reset

Eric Meyer CSS reset is very popular. You should use resets to neutralize browser’s default style. Also Eric pointed, that this is just a starting point, but very good one.

meyerweb

8. YUI Library

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

yui-library

9. 960 Grid System

960-grid-system

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.

Download / Demo

10. Sensible Standards CSS Framework

sencss

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.

Image by bluehor.

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.

Image by indiamos.

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.

This post may contain affiliate links. See our disclosure about affiliate links here.