I often have to scramble to try and find just the right font-family for a site I am working on, so I created this little cheat sheet for myself. I decided it might be useful for others as well, so I’m sharing it here. Included are the various font-families that are typically used, along with a representation of what they look like. Keep in mind that not every computer has every font, so any fonts you don’t have will display the default generic font family instead (sans-serif, serif, or monospace). I just cut and paste the code in gray when I want to use one of these in my CSS.

Sans Serif

Sans serif is generally best for most text on screen.

Common Version:

font-family: Arial, Helvetica, sans-serif;

  »  Arial – The quick brown fox jumps over the lazy dog. 1234567890

  »  Helvetica – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: Verdana, Arial, Helvetica, “Trebuchet MS”, Tahoma, Geneva, “Lucida Sans Unicode”, “Lucida Grande”, “MS Sans Serif”, sans-serif;

  »  Trebuchet MS – The quick brown fox jumps over the lazy dog. 1234567890

  »  Verdana – The quick brown fox jumps over the lazy dog. 1234567890

  »  Tahoma – The quick brown fox jumps over the lazy dog. 1234567890

  »  Geneva – The quick brown fox jumps over the lazy dog. 1234567890

  »  Lucida Sans Unicode – The quick brown fox jumps over the lazy dog. 1234567890

  »  Lucida Grande – The quick brown fox jumps over the lazy dog. 1234567890

  »  MS Sans Serif – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

Serif

Serif is generally best for text designed to be printed.

Common Version:

font-family: Times, “Times New Roman”, Georgia, serif;

  »  Times – The quick brown fox jumps over the lazy dog. 1234567890

  »  Times New Roman – The quick brown fox jumps over the lazy dog. 1234567890

  »  Georgia – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: Times, “Times New Roman”, Georgia, Garamond, “Palatino Linotype”, Palatino, “Book Antiqua”, “New York”, serif;

  »  Garamond – The quick brown fox jumps over the lazy dog. 1234567890

  »  Palatino Linotype – The quick brown fox jumps over the lazy dog. 1234567890

  »  Palatino – The quick brown fox jumps over the lazy dog. 1234567890

  »  Book Antiqua – The quick brown fox jumps over the lazy dog. 1234567890

  »  New York – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: Garamond, Georgia, Times, “Times New Roman”, serif;

Monospace

Monospace is generally best when representing code or typewritten text.

Common version:

font-family: Courier, monospace;

  »  Courier – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: “Lucida Console”, Monaco, Courier, “Courier New”, monospace;

  »  Lucida Console – The quick brown fox jumps over the lazy dog. 1234567890

  »  Monaco – The quick brown fox jumps over the lazy dog. 1234567890

  »  Courier New – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: Courier, “Courier New”, monospace;

©2012 WebChicklet | Just a Geek Girl. All Rights Reserved.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

If you’ve been thinking of learning CSS but have become lost in the seemingly endless number of CSS tutorials that exist, you may want to read on. I’ve compiled my favorite CSS-related sites that specifically help the CSS newbie grasp the essential concepts. I cut my own CSS teeth by chewing on the information given by these sites, and I use most of the tools listed on a daily basis. I definitely don’t consider myself a CSS expert, but I would still be a confused newbie if it weren’t for the efforts of so many who have shared their knowledge and talents. It’s time to pass those on to you.

Bookmark this page at del.icio.us now so you can retrieve this list later, or pass it along to someone you know who might be struggling to learn CSS. Then bookmark and tag each of the sites listed below, using tags such as CSS, tutorials, resource, and howto, so you and others can benefit.

Use The Right Browser

The first thing you’ll need is the Firefox browser. If you intend to do any web site developing, you should be using Firefox as your main browser. You should test your sites in other browsers, of course, but Firefox is definitely the one to use during the development process. Why? It is very web standards compliant, and you can add plugins to help in the development process. If you don’t already have it on your computer, download and install it now.

CSS Cheat Sheet

Before you do anything else, open, save and print the following cheat sheet so you can have it handy at all times.
Added Bytes CSS Cheat Sheet (V2) is handy as a companion print out for those times when you just need a quick reminder.

CSS Debug Tools

Now, download some Firefox add-on tools that will make debugging CSS later on much easier.

Web Developer Toolbar is a must-have tool. It is useful for about 100 different reasons, but for the purposes of this post, you’ll be needing it mostly to live-edit the CSS of the current page. More on that later. For now, just add it to Firefox.

CSSViewer makes viewing the CSS properties of any element on a page easy and clear. Add it to Firefox now. Note that once you install it, you’ll need to click on View / Toolbars / Customize in your browser, find the CSSView icon in the list, and drag/drop it to your toolbar, so you’ll have one-click access to it at all times.

CSS Debug Toggle Bookmarklet lets you view the entire structure of a page with one click. Drag/drop the bookmarklet to your bookmarks toolbar. Note that there are several bookmarklet links on that page. Look for the CSS Debug Toggle link in the Second Update: section.

CSS Tutorials

Now that you’ve printed out the CSS Cheat Sheet and have your CSS Debug Tools at hand, you’re ready to start learning. I recommend using the following tutorials in the order listed.

W3Schools CSS Introduction is the classic tutorial that everyone should start with, and bookmark for future reference. It’s great for getting the high-level aspects under your belt, but the next two are better for hands-on learning, in my opinion.

Selectutorial’s CSS Selectors tutorial is fabulous for visually conceptualizing what happens as you complete each step.

CSS Basics is the one reference I’ve found that is easiest to understand. It also comes with a .pdf you can download as well as a version that is printable.

Understanding The CSS Box Model

Brainjar’s explanation makes the box model concept understandable.

The 3D CSS Box Model and the Interactive 3D CSS Box Model Demo are handy tools to visually understand CSS’s box model.

CSS Layouts: Templates and Generators

At this point, you’re ready to start playing on your own, so now’s the time to introduce you to CSS layout templates and CSS layout generators. One of the best ways to learn CSS is to look at layouts and study the code for them. Here are my favorite layouts.

168 CSS Layouts give you plenty to choose from. Download a few and study the code.

Another option is to use a generator to help you create layouts. Generators give you the flexibility to design your layout your way, fairly easily. Once you’ve downloaded the resulting layout, study the code. Here are the two generators I like best.

CSS Creator Css Layout Generator is quick and easy to use (especially if you actually read the instructions..hint, hint).

YAML Builder is a generator that I’ve already reviewed here.

Debugging CSS

I’ve already covered the tools you’ll need to debug CSS early on in this post, but I wanted to link to a few helpful debug tutorials that will help you out when you are trying to figure out why your code isn’t doing what you think it should be doing.

Duke Listens – Debugging CSS helps you understand how to best use the Firefox Web Developer add-on you downloaded earlier (limiting the discussion to just a couple of Web Developer’s many features).

Debugging CSS, The Easy Way breaks the debugging process down so that you can track down exactly where the problem lies – which is the first step in figuring out what is wrong.

Debugging CSS describes the debugging process in easy-to-comprehend steps.

CSS, Different Browsers and IE especially

Obviously, there are different browsers in the world, so you’ll need to test your pages in at least the most popular. You can simply install each browser on your computer if you’d like, and test that way, or you can use a service to do the testing for you. I recommend Browsershots for this. Although you’ll see the option to check your site in lots of different browsers and versions, I don’t recommend checking too many, as it will take a long time, and it just isn’t worth it. I usually check the Windows versions of Firefox 2 and any versions above, IE 6 and any versions above, and the latest versions of Opera and Safari, plus the latest version of Safari for Mac.

Finally, it’s time to tackle the elephant in the room – IE. IE doesn’t play by the same rules as most browsers, so you’ll often be tripping over IE CSS problems. Luckily, others have already encountered the problems, and have written about how to deal with them. A few good resources are below.

Explorer Exposed lists the most common problems with fixes and hacks to deal with them.

WebCredible’s IE CSS Issues lists 5 of the most common problems, with solutions to each.

IE CSS Bug Fixes lists a few fixes for problems you may run across.

Debugging CSS in Internet Explorer has some problem solving tips.

IE CSS Bugs That’ll Get You Every Time gives more tips for dealing with IE issues.

And finally, How To Create an IE Only Stylesheet shows how to do just that.

That’s it! Good luck on your quest to master CSS.

©2012 WebChicklet | Just a Geek Girl. All Rights Reserved.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

What we want is something that looks like this instead:

In order to achieve this, a simple CSS class should be added that can then be applied to your <br> tag. (I’ve called this class .clear in the code below). This class makes use of the CSS Clear property, and is very easy to use.

Let’s take a look at the code:


<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
.floatleft {
float: left;
margin: 0 5px 5px 0;
}
.clear {
clear: both;
}
</style>
<div style="width: 400px;">
<p><img src="testpic.png" alt="" title="testpic" class="floatleft" height="314" width="155" /> This is a test to figure out how to force new blocks to begin after the bottom of an image, and not after the bottom of the text. Will play around with various scenarios. Placing each paragraph in its own div doesn't help.</p>
<br class="clear" />
<p><img src="testpic.png" alt="" title="testpic" class="floatleft" height="314" width="155" /> This is a test to figure out how to force new blocks to begin after the bottom of an image, and not after the bottom of the text. Will play around with various scenarios.</p>
<br class="clear" />
<p><img src="testpic.png" alt="" title="testpic" class="floatleft" height="314" width="155" /> This is a test to figure out how to force new blocks to begin after the bottom of an image, and not after the bottom of the text. Will play around with various scenarios.</p>
</div>
</head>
</html>


Notice the .clear class? Notice how we’ve then used it with each of the BR tags? That’s all you need to do. What it does is tell the browser to not allow any element to be floated either to the left or the right side of the element (essentially “clearing” the sides of an element of any other floating elements).

And just to make this look really “pretty”, I’ve added in a DIV tag with a width of 400, so you can see how it would look in a typical blog post.

So the next time you wonder why your floated images/text aren’t lining up vertically the way you expected, just remember to clear your floats!

You can get more information about the CSS Clear Property here.

©2012 WebChicklet | Just a Geek Girl. All Rights Reserved.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

YAML Builder is described as a tool for visual development of CSS layouts, and the way it works is really sweet. By simply making a few choices from the options presented, you can quickly create multi-column layouts in various widths and with choices of navigation options. Below is a screenshot of what this looks like (image reduced in size to fit here):

The options tool sits on top of the generated layout, and as you make changes to the various options, the generated layout underneath immediately reflects the changes you made. It’s fast and easy, taking all of the stress, hard work, and tedium out of the CSS template building process. This enables you to immediately start playing with the fun parts of the design process…getting creative with colors and images. Oh, and in case you were wondering, it creates flexible, accessible code that works even with IE5 and up.

You can read more about YAML here (in English), but the tool itself is so intuitive that there’s really very little need for instructions. And that, for me, says a lot about why I love this tool so much.

Is it free? Well, maybe. YAML has been licensed under Creative Commons Attribution 2.0 License (CC-A 2.0), which means that it permits both the non-commercial and the commercial use of the framework, for free, on the condition that a backlink to the project homepage remains in the layout. If, however, you wish to remove the backlink condition, you will need to pay for either a one-project license or a general multi-project license. You can read more about these license conditions here.

©2012 WebChicklet | Just a Geek Girl. All Rights Reserved.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.