In this quick guide, I’ll go through the basics of using CSS to tile background images.

Before I go into tiling I’ll demonstrate the way I use to define a background image and then explain it.

#mypage{
	background: #fff url(background.gif);}

This is the very simplest it gets. The ‘#fff’ tells the browser to make the background of the div white and the ‘url(image.jpg)’ tells it to put that image over the black. The image will be tiled vertically and horizontally. Using this CSS is exactly the same as using:

#mypage{
	background-color: #fff;
	background-image: url(background.gif);}

Now, maybe we don’t want the image to tile vertically and horizontally. We might have a webpage that has a gradient background that fades into a solid colour. CSS makes this simple to do.

In this example I want the background to fade from grey (#ccc) to white. First of all I save my image in photoshop. It’s simply a 1px wide gif image. To tile the image horizontally I would use the CSS:

#mypage{
	background: #fff url(background.gif) repeat-x;}

If you want to you could tile the image vertically by using:

#mypage{
	background: #fff url(background.gif) repeat-y;}

Again, this is shorthand for using the code:

#mypage{
	background-color: #000;
	background-image: url(image.jpg);
	background-repeat: repeat-x;}

Finally, you can tell the browser not to repeat the background image at all.

#mypage{
	background: #fff url(background.gif) no-repeat;}

Hopefully this quick article will have given you a quick demonstration on how to tile background images using CSS. I’ll hopefully be writing another quick guide on using fixed background images.

In this tutorial you will see how to create this contact form and style it so that it looks like this. In the future I am going to make some further guides on how to take the information entered and send it to yourself using PHP or ASP, but that’s for another day.

Right, so first of all we’re going to need our form. I am going to use this one. Your free to use this code if you don’t have a form of your own. Here’s the code for the form:

<form action=”” method=”post”>
	<label for="user_name">Your Name</label>
	<input type="text" name="user_name" class="inputbox"/>
	<label for="user_email">Your Email</label>
	<input type="text" name="user_email" class="inputbox"/>
	<label for="user_message">Your Message</label>
	<textarea name="user_message"></textarea>
	<input type="submit" value="submit" name="submit" class="submit"/>
</form>

Now as you can see the form is very simple and doesn’t look very good at all just yet. We’re going to fix that though.

First of all, we’re going to give the form a css class so that we can style it and all the elements within it. To do this we simply change:

<form action=”” method=”post”>

To:

<form action=”” method=”post" class="webform">

You will notice I added a class to our form rather than an id. This is simply because you might want to use more than one form on your page and using a class will keep the page valid whether you have one form or ten.

Simple, eh? Now lets start styling.

In our CSS document, we’re going to add a style for our form. So we add:

.webform{}

All of our styling will go between the { and the }. Now, I dont want my form to be too wide so I’ll add a width to my CSS.

.webform{
	width:400px;}

Next, we’ll add a font, a font colour and a background colour.

.webform{
	width:400px;
	font:11px Arial, Helvetica, sans-serif;
	color:#777;
	background-color:#fff;}

Now that the basic styling for our form is done, we can add some styling to the labels and inputs. First of all we will tackle the labels with the following CSS.

.webform label{
	display:block;
	width:300px;
	font-weight:bold;}

All the CSS above is pretty simple, we used the “display:block;” so that all the labels will start on a new line. This means we dont have to add any breaks (
tags) after every line. After we added the styling to our labels you can see that the form is starting to look a lot better. Now for the inputs.

.webform .inputbox{
	height:18px;
	width:250px;
	padding:4px 3px 2px 3px;
	margin:2px 0 10px 3px;
	border:1px solid #ccc;}

Again, I haven’t used anything to difficult to style the input boxes but they look a lot better! You might have noticed the submit button is a bit screwed up, dont worry, we’ll be fixing that later. But first we will make the textarea look better with the following CSS.

.webform textarea{
	height:80px;
	width:250px;
	padding:4px 3px 2px 3px;
	margin:2px 0 10px 3px;
	border:1px solid #ccc;}

So now the form is looking fine and dandy, apart from that pesky submit button. Lets add a class to it.

Change:

<input type="submit" value="submit" name="submit"/>

To:

<input type="submit" value="submit" name="submit" class="submit"/>

Now our submit button has a class of submit. Now for the CSS.

.submit{
	margin:2px 0 0 3px;
	background-color:#eee;
	height:30px;
	width:80px;
	padding:0;
	border:1px solid #ccc;
	display:block;
	color:#666;}

Again, we have used the “display:block;” style to put the button on a new line without using a break. I have also added a background colour, padding, a border and margin. All of these are pretty simple CSS styles. If you need help with the different CSS styles check out the beginners guide to CSS tutorial.

As you can see, our form is looking very nice now and it has all been done with some simple CSS and minimal extra HTML. You can see the finished CSS form here.

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.

#content{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;}

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:

#content{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;}

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:

#content{
	font: font-style font-weight font-size font-family}

So an example of a font style would be:

#content{
	font: italic bold 12px Arial, Helvetica, sans-serif;}

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

I find cheat sheets are great for helping me aclimatise quicker! So here’s a collection of my favourites:

CSS Cheat Sheets

Now I code something using CSS at least once a day but I still have the need every once in a while to look up some obscure property, so having this CSS cheat sheet lying around comes in handy.

HTML Cheat Sheets

HTML cheat sheets can always come in handy from time to time, bookmark it or print it out so you know where it is when you need it!

jQuery cheat sheets

I’ve been doing a lot of work with jQuery recently and although my javascript isn’t very good this jQuery cheat sheet (and another one from ColorCharge that I cant find on their website anymore) has helped a lot.

ASP Cheat Sheet

PHP Cheat Sheet

MySQL Cheat Sheet

SQL Cheat Sheet

Regular Expressions Cheat Sheet

MOD_REWRITE Cheat Sheet

HTML Characters Chart

Now I realise a lot of these cheat sheets are from the same website, this is just because they’re the best ones I’ve came across. If you know of anoher good cheat sheet that I’ve missed, let me know and I’ll get it up.

I’ll update this post as and when I find new cheat sheets thatI think are worth telling people about.

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

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<br style="clear:left"/>
</div>

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.

.menu{
	width: 100%;
	background-color: #333; }

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.

.menu ul{
	margin: 0; padding: 0;
	float: left;}

.menu ul li{
	display: inline;}

.menu ul li a{
	float: left; text-decoration: none;
	color: white;
	padding: 10.5px 11px;
	background-color: #333; }

.menu ul li a:visited{
	color: white;}

.menu ul li a:hover, .menu ul li .current{
	color: #fff;
	background-color:#0b75b2;}

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

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:

display: inline;

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.

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:

selector{property:value;}

An example of some working CSS syntax is:

html{color:#333333;}

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:

html{color:#333333;background-color:#cccccc;}

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:

p{color:#333333;}

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:

.text_one{color:#333333;}

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:

.text_one{color:#333333;}.text_two{color:#cccccc;}

I would then apply the classes to my elements by using this code:

<p class="text_one">Text Here</p>
<p class="text_two">Text Here</p>

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:

#divname{selector:value;}

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

#divname{selector:class;}

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:

<style type="text/css">
CSS Code Goes Here
</style>

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:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

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

First of all we’ll do the HTML for the list menu, this will simply be:

<div class="listmenu">
<ul>
	<li><a href="#">List Item 1</a></li>
	<li><a href="#">List Item  2</a></li>
	<li><a href="#">List Item  3</a></li>
	<li><a href="#">List Item  4</a></li>
</ul>
</div>

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:

.listmenu ul {
margin: 0 0 5px 0;
padding: 0 0 2px 0;
list-style-type: none;width:185px;}

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:

.listmenu li a {
color: #333;
display: block;
border-left:3px solid #666;
border-right:3px solid #666;
height: 16px;
padding: 4px 0 4px 14px;
text-decoration: none;
font-weight:bold;
background-color:#fff;}

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:

html{
font:12px Arial, Helvetica, sans-serif;
color:#333;
padding:0;
margin:0;}

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:

.listmenu li a:hover {
background-color: #666;
color:#fff;}

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:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html{
font:12px Arial, Helvetica, sans-serif;
color:#333;
padding:0;
margin:0;}

.listmenu ul {
margin: 0 0 5px 0;
padding: 0 0 2px 0;
list-style-type: none;
width:185px;}

.listmenu li a {
color: #333;
display: block;
border-left:3px solid #666;
border-right:3px solid #666;
height: 16px;
padding: 4px 0 4px 14px;
text-decoration: none;
font-weight:bold;
background-color:#fff;}

.listmenu li a:hover {
background-color: #666;
color:#fff;}
</style>
<div class="listmenu">
<ul>
	<li><a href="#">List Item 1</a></li>
	<li><a href="#">List Item  2</a></li>
	<li><a href="#">List Item  3</a></li>
	<li><a href="#">List Item  4</a></li>
</ul>
</div>

First of all I’m going to talk about how the actual CSS code is laid out. There isn’t really a right or wrong way to do this, its simply personal preference, use what comes easiest to you.

I like to use:

.class{
selector: value;}

The first thing you will notice is that on the selector I tabbed in, this is a tip I picked up from a thread on TalkFreelance and it comes in really useful when your searching for a specific class. The other thing you might notice is the closing bracket is on the same line as the last selector, this simply helps save some space, and in my opinion makes the whole thing easier to read.

Next is to group similar selectors on the same line, for example:

.class{
margin:0; padding: 0;}

Again this just helps to neaten the stylesheet up and makes it easier to search later on.

When I’m creating complex layouts using lots of CSS I often find it easier to split the CSS into multiple stylesheets, for me its helps keep things organised and makes specific things easier to find later on. For example, I might make a separate stylesheet for my link styles, I then simply import it by adding this code at the top of my main stylesheet:

@import url(linkstyles.css);

Next we’ll move onto the code I use as a base point for all of my layouts.

As you probably already know, all browsers like to render things differently, this can prove to be a real pain when it comes to making a layout that looks the same in all browsers. To make this a little bit easier its always a good idea to make sure the browser isn’t adding its own code to parts of the page. To do this I simply use code like:

html{
margin:0; padding:0;}
Body{
margin:0; padding:0;}

This code will make sure that there is no padding or margin on the page before you start.

It’s a good idea to do this for virtually everything you add to your page, just to make sure your browser isn’t adding anything itself. So for example you could also use:

p{
margin:0; padding:0;}

There’s nothing to stop you adding padding or margins to individual paragraphs by applying a class or ID to them. Similarly if you needed a 10px top margin on your html you could simply change the code to:

html{
margin: 10px 0 0 0; padding:0;}

The next thing is images, I don’t know about you but I hate the way browsers put a blue border around any hyperlinked image on my page. Well there’s one easy way to get rid of them all at once, simply add:

img{
border:0;}

Into your CSS stylesheet, this will remove all borders from all images on your page, again if you want a border of some sort on any one of your images, there’s nothing to stop you adding a class or ID to it.

The final essential bit of code in my CSS file is to do with floating divs, on some of my layouts I use a lot of them and that can lead to a hell of a lot of clearing divs. To get round this I use a class called clear which looks like:

.clear{
clear: both;}

I can then add:

<div class="clear"></div>

To my layout whenever I need to clear some floating divs, this often saves a lot of time and code!

If you enjoyed this guide please consider signing up for my RSS Feed. You can sign up for my RSS Feed here!

Thanks for reading!