One of the most important but overlooked aspects of a web design is the typography. The fonts you use and how you present those fonts can really make or break your website design. Thankfully you can use CSS to really make your fonts look great!

The first thing to learn when it comes to CSS fonts are the selectors and what each of them do. Here are the main font selectors and what they do:

font-family
This selects which font you want to use for your text. You can specify more than one font family, then if the browser cant find the font you use first it will move on to the next one and so on until it finds one it recognises.

font-size
As you might of guessed this defines the size of the font. You can define this as a pixel size (e.g. 12px), as a general size (e.g. large, small etc.).

font-style
The font style attribute defines extra styles to your font such as italic.

font-weight
The font weight sets the weight of the font. To define the weight of your font you can use words (such as normal, bold or bolder) or you can use values (e.g 100, 200, 300 etc.) the higher the values get the bolder the font will get.

These are the main font properties you will use. Now lets have a look at defining a font in CSS. We will add the font to an id called content. Basically this means that everything in the content div will be given the font style we define whilst everything outside the div will have a seperate style.

In the example above we first define the font family, you might notice I slected three fonts all seperated by a comma. This is (as described above) so the browser can find another font to use if it cant find arial. Next we define the font size which is pretty self explanitory. Then we define the font weight and font style. As the default for these two values is normal if you didn’t want to have italic or bold text then you wouldn’t have to define them so your css style would look like:

Now we will move on to writing the above style in shorthand. Writing in shorthand has the same effects as writing it the long way, it just saves some space.

The way the style should be layed out is:

So an example of a font style would be:

And that’s all you need to know for the basics of text styling with CSS.

This tutorial will show you how to make a horizontal CSS list menu. No images, no javascript. Just a simple, cross browser compatible CSS list menu! If you want to see the finished product or you just want the code, look here.

First of all we’ll need the HTML for our list menu, this is just a normal unordered list.

It’s just a simple html page with an unordered list menu on. You might notice I’ve added a div called menu around the list, I like to do this as it helps me remember what part of the code does what if I ever have to go back to it.

Next we’re going to add the CSS code for the div called menu that surrounds the list.

Again this is nice and simple. The menu div will be the full width of the div it’s inside and will have a dark grey background.

Next we add the syling for the list and the list items.

Again it’s all pretty simple, you should be able to understand the code with a little bit of CSS knowledge. Have a tinker with the code if you’re unsure about something.

You might also want to sign up for the RSS Feed or view some of my other CSS Tutorials

Here’s a rather quick css tutorial, but in my opinion, a rather important one. Have you ever noticed when you code a website that uses floating div’s that IE6 does some really weird things with the margin widths?

I’ve came across this before, normally you can get away with a few extra pixels without having to worry, but when you’re coding sites that have large margins on a floating div it can really get messy. Anyway I decided enough was enough, I wasn’t going to leave it, I fiddled around for an hour or two with my CSS file and finally I came up with the reason IE6 doubles the margin on a floating div and that reason is…..(drum roll..)….there is no reason, it shouldn’t do it, it can only be described as a bug!

The Fix

Now to the important part, how to fix the weird margin problem in IE6, and the fix is just as weird as the problem you simply add:

Into the CSS code for the floating element.

Again there’s no reason why this should happen, it’s just one of those things!

I find if you use this technique with the essential css code from my other tutorial I can quickly create layouts that are very, very cross browser compatible.

In this guide I’ll be going through how to start out learning CSS. Hopefully by the end of this tutorial you will be much more comfortable using CSS to code websites.

CSS or cascading style sheets are used to style html or xhtml documents. The idea behind CSS is to allow you to dramatically change how a webpage looks without editing any HTML. CSS is normally stored in an external css file, this means that you can change how hundreds of pages look by changing some code in a single CSS file. It is a good idea if you have some experience with html or xhtml before you do this tutorial.

The Syntax

First of all I’ll demonstrate what the CSS syntax should look like:

An example of some working CSS syntax is:

This would make the font colour of everything in the <html> </html> tags #333333.

You can define multiple properties for one selector as long as you seperate them with a semicolon (;). For example:

This would give the page a light grey (#cccccc) background with dark grey text (#333333).

The Selectors

There are three main types of selectors, the first type are the selectors that correspond to html elements such as body, p, li etc. Here’s an example of the p selector at work:

That would change the text colour of everything inside the <p> </p> tags on your web page.

Next we have classes. A class will allow you to name sets of styles, this means you can have two paragraphs that are styled differently in a single page. A class selector looks like:

In the example I called my class text_one. You must always put the full stop before the name of the class as this tells your browser what you’re defining. Classes can come in useful when you want to style a number of elements differently. For example I might have two paragraphs, one that has dark grey text and one that has light grey text. My CSS would look like:

The great thing about classes is that you can use the same class as many times as you want in an html document. That brings us on to the final selector an ID.

I use ID’s to define the main parts of a layout, for example if a page has a wrapper div I would make that an ID. The other important thing to remember about an ID is that it should only appear on an html page once. To define an id simply use:

Then to use it in your html document you would use the code:

And that’s it for selectors!

Style Sheets

There are two ways of including a css in your pages. The first way is internally, you would do this by using the code:

The reason I don’t recommend using internal styles is because the whole point behind style sheets is to keep the styling and the actual html of the page separate and using internal style sheets would be defeating the object.

The next method of including css into your html is to use external style sheets. This consists of creating a file, which is normally called something like style.css and then including it inbetween the <head></head> tags in your html file. The code for including a css file is:

Obviously you would replace “style.css” for the path and name of your css stylesheet.

That’s just about everything you need to know when you’re first starting out with CSS! My advice to you now is to sit down and practice what you’ve learned here. I’ll be adding some more tutorials soon so keep checking back!

If you like this site you could always sign up for my rss feed and if you’re feeling generous you could buy me a pint using that button on the top right of every page :D

I used to find it hard to find a list menu that was compatible with all the browsers I use without having to use any CSS hacks that’s why when I created this one I decided to keep it and use it as my standard list menu, that way I only have to change certain aspects of the styling to make it look how I want it to look.
First of all we’ll do the HTML for the list menu, this will simply be:

And that’s it as far as the HTML for our list goes, if you’re confused now you might want to do some more reading on HTML. You can see the list so far Here. As you can see, it’s nothing special yet!
Now we’ll move onto the CSS. You might have noticed that our listmenu was inside a class called “listmenu” that’s simply so we can reuse the list menu as many times as we want on a single page, while using an ID would only let us use it once.
Here’s the code for the listmenu class:

All I have done here is added a little bit of padding and margin to space the whole list out from the side of the page, you can change this to whatever you need to make it fit your layout. I also added a width, pretty obvious what that does :p and a “list-style-type: none;” that will remove the bullet points from the end of the list. You can see what the whole list looks like now if you go Here. As you can see, there’s still some work to do!
Next we’re going to add the CSS to style the list item, this will only work on list items that are hyperlinked like the ones in the HTML code posted above. The code for the list item looks like this:

The display:block; makes your browser put each list item on a new line rather than all on one line. The two borders simply add a 3px #666 border to either side of our list menu, they’re just there to make it look a bit nicer :p. The rest of the CSS is pretty self explanatory.

Here I added some extra CSS code:

All the above code does is sets a font face, size and colour for the page to tidy it up a bit.

As you can see here the menu is starting to take shape now, all we need is a nice rollover effect.

To add the rollover we use this CSS:

All this does is change the background colour to #666 and the font colour to #fff when you put your mouse over it. If you take a look here you will see our list menu is complete! I’ll post the full code for the finished menu at the bottom of he page incase you get stuck.

If you liked this tutorial, please consider letting me know by posting a comment, and if you like RSS Feeds and tutorials like this, please sign up for my RSS Feed.

Vertical List Menu: