You can download the tutorial source files to check your code and see the completed menu.

The HTML we need for this tutorial;

Firstly, we need the HTML, which consists of anchors (or links) within list items, which are themselves contained within an unordered list. Simple.

We will also include individual class names on each list item, which will be used later on in this tutorial.

Ok, so we have our HTML all set up, now we need the CSS.
We will start with removing the default styles for a list:

<ul>
<li class="home"><a href="#">Home</a></li>
<li class="webDesign"><a href="#">Web Design</a></li>
<li class="seo"><a href="#">SEO</a></li>
<li class="prices"><a href="#">Prices</a></li>
<li class="contact"><a href="#">Contact Me</a></li>
</ul>

Resetting default CSS on HTML elements;

Every HTML element has it’s own default CSS settings, whether these elements have margins, paddings, borders, etc, these default styles all effect an elements placement within a design.

If these default styles are not reset, they will cause cross-browser issues later on down the line – especially in the ever famous Internet Explorer range of browsers, but more specifically IE6 and IE7. (Find out more about Global CSS reset styles)

So anyway, here is how to remove the default styles of the unordered list:

ul {
list-style:none;
margin:0;
padding:0;
}

By resetting the default style for an unordered list, we have removed the list-style, this being the bullet point usually found to the left of each list item. We then removed the top and bottom margin of the unordered list and we have also removed the left padding from each list item, leaving our menu looking like this:

Ok, so currently we have a vertical list containing links, which is effectively now looking more like a menu than a bullet list. The next step is to make this vertical menu into a horizontal menu.

Vertical to horizontal…

This next piece of CSS will turn our vertical list into a horizontal menu, we will also space the list items evenly using margins.

li {
float:left;
}

Let’s take another look at what we have so far… As you can see, our list is now horizontal, and maybe a little close together, but we will sort that in the next step.

Improving the look of our menu;

This is where our menu starts to take shape, providing a little interactivity with a simple background colour hover state.

The “Display:block” we have put on the “li a” changes the anchor element from an inline-element to a block-level element. (The difference between inline and block level elements require their own tutorial, which will be covered at a later date).

li a {
height:32px;
display:block;
font-family:Helvetica, Arial, sans-serif;
text-decoration:none;
line-height:32px;
color:#666;
}

li a:hover {
color:#666;
text-decoration:underline;
}

The menu should now be looking like this:

It is starting to look more like your everyday HTML & CSS menu!
Now it’s time to step it up a gear and make it look professional.

Using background images with our HTML & CSS menu;

For this next step, you will need to either produce your own imagery, or you can download the image I used by right clicking on the image found below and saving it to your desktop.

You will notice there is 1 image, containing 2 versions of the same menu, but in different colours. This is what is known as a sprite. The idea of a sprite is one single image containing multiple images, which will be positioned to suit using CSS.

Having one single image serving the purpose of 10 seperate images means a users browser will require less server calls, improving website load times, whilst also providing the benefit of the single image being a smaller file size than if you created the 10 seperate images.

Background image text replacement;

This is actually a really advanced CSS technique, but you seem to be sticking with me ok so far, so lets give it a try. =)

Remember the individual classes we included on each list item at the start of the tutorial? This is where they come into play.

Here’s the CSS:

li a {
height:32px;
display:block;
font-family:Helvetica, Arial, sans-serif;
text-decoration:none;
line-height:32px;
color:#666;

text-indent:-9999em;
background:url(nav.gif) no-repeat 0 0;
}

li a:hover {
color:#666;
text-decoration:underline;
}

li.home a {
width:83px;
background-position:0 0;
}

li.home a:hover {
background-position:0 -32px;
}

The height of 32px we have provided for the CSS links is the height of a single button image. We then need to set the width of each link to it’s corresponding class name.
Also notice how we have added a text-indent and a background image to the “li a”. The text-indent sends the text content of the anchor -9999 em’s of the side of the page, but leaving the background image in it’s place.

The hover state moves the background position of the sprite -32px from the top, changing from green to orange.

We will continue setting the width and background-position for each individual link, leaving us with our professional looking HTML and CSS menu.

li.webDesign a {
width:125px;
background-position:-84px 0;
}

li.webDesign a:hover {
background-position:-84px -32px;
}

li.seo a {
width:67px;
background-position:-210px 0;
}

li.seo a:hover {
background-position:-210px -32px;
}

li.prices a {
width:83px;
background-position:-278px 0;
}

li.prices a:hover {
background-position:-278px -32px;
}

li.contact a {
width:121px;
background-position:-362px 0;
}
li.contact a:hover {
background-position:-362px -32px;
}

ul {
list-style:none;
margin:0;
padding:0;
overflow:auto;
}

li {
float:left;
}

li a {
height:32px;
display:block;
font-family:Helvetica, Arial, sans-serif;
text-decoration:none;
line-height:32px;
color:#666;
text-indent:-9999em;
background:url(nav.gif) no-repeat 0 0;
}

li a:hover {
color:#666;
text-decoration:underline;
}

li.home a {
width:83px;
background-position:0 0;
}

li.home a:hover {
background-position:0 -32px;
}

li.webDesign a {
width:125px;
background-position:-84px 0;
}

li.webDesign a:hover {
background-position:-84px -32px;
}

li.seo a {
width:67px;
background-position:-210px 0;
}

li.seo a:hover {
background-position:-210px -32px;
}

li.prices a {
width:83px;
background-position:-278px 0;
}

li.prices a:hover {
background-position:-278px -32px;
}

li.contact a {
width:121px;
background-position:-362px 0;
}

li.contact a:hover {
background-position:-362px -32px;
}

This additional CSS completes our professional looking, simple HTML and CSS tutorial, which looks like this:

And finally, the complete CSS code:

ul {
list-style:none;
margin:0;
padding:0;
}

li {
float:left;
}

li a {
height:32px;
display:block;
font-family:Helvetica, Arial, sans-serif;
text-decoration:none;
line-height:32px;
color:#666;

text-indent:-9999em;
background:url(nav.gif) no-repeat 0 0;
}

li a:hover {
color:#666;
text-decoration:underline;
}

li.home a {
width:83px;
background-position:0 0;
}

li.home a:hover {
background-position:0 -32px;
}
li.webDesign a {
width:125px;
background-position:-84px 0;
}

li.webDesign a:hover {
background-position:-84px -32px;
}

li.seo a {
width:67px;
background-position:-210px 0;
}

li.seo a:hover {
background-position:-210px -32px;
}

li.prices a {
width:83px;
background-position:-278px 0;
}

li.prices a:hover {
background-position:-278px -32px;
}

li.contact a {
width:121px;
background-position:-362px 0;
}
li.contact a:hover {
background-position:-362px -32px;
}

ul {
list-style:none;
margin:0;
padding:0;
overflow:auto;
}

li {
float:left;
}

li a {
height:32px;
display:block;
font-family:Helvetica, Arial, sans-serif;
text-decoration:none;
line-height:32px;
color:#666;
text-indent:-9999em;
background:url(nav.gif) no-repeat 0 0;
}

li a:hover {
color:#666;
text-decoration:underline;
}

li.home a {
width:83px;
background-position:0 0;
}

li.home a:hover {
background-position:0 -32px;
}

li.webDesign a {
width:125px;
background-position:-84px 0;
}

li.webDesign a:hover {
background-position:-84px -32px;
}

li.seo a {
width:67px;
background-position:-210px 0;
}

li.seo a:hover {
background-position:-210px -32px;
}

li.prices a {
width:83px;
background-position:-278px 0;
}

li.prices a:hover {
background-position:-278px -32px;
}

li.contact a {
width:121px;
background-position:-362px 0;
}

li.contact a:hover {
background-position:-362px -32px;
}

I hope you enjoyed this HTML & CSS tutorial, and I look forward to receiving your comments and seeing your working examples!

You can download the tutorial source files to check your code and see the completed menu.

If you have any questions, please ask them using the comments.

This post will help you learn the very basics of CSS, starting with inline styles, which is provided within each HTML tag.

Learning CSS will give you complete control of how you want your website to look, with regards to position, colour, size, font, etc.

This tutorial assumes you know nothing about HTML or CSS. I will be providing you all the code you will need.

All you need to do is carefully ready the code, write it in your HTML editor and we will both achieve the very same result.

Writing your very first piece of CSS

Before we get started with the CSS, we will need the base on which to build upon.

With this in mind, open up notepad ready to begin.

The first thing we need is a HTML document of which to start our adventures into building websites!

With this in mind and our chosen text editors open, we need to save out a HTML document ready to view our work in a web browser.

So with Notepad open, go up to the menu and select ‘File > Save As…’ saving the file as inline-css.html (Save the document on your desktop for quick and easy access).

At this point it is important that you notice we have saved the file with an extension of .html (HyperText Mark-up Language).

Hello World!

With our HTML document now saved, we now need to provide a web browser with something to display.

As this is your very first piece of CSS, you will be writing the mandatory “Hello World!“.

Our first piece of HTML code is a <p> tag. In HTML, the <p> tag represents a paragraph written like so:

Hello World!

Notice how the paragraph tag effectively has two tags?

The first tag (<p>) tells the browser that ‘this is the start of the paragraph’. The second tag (</p>) tells the browser to close or finish the paragraph.

Both of these tags are required to provide a web browser with all the information it needs to display a paragraph.

At this point, save your document.

When you have saved your document, open it in your browser of choice. I will be using Firefox.

To open your document using Firefox, choose ‘File > open file > inline-css.html’.

In your website browser you should see this:

Yes, yes, boring I know, but we will now move onto the presentation. Our first piece of CSS!

What we will be aiming to achieve with CSS

For our first piece of CSS we will be making our ‘Hello World!’ look a little less boring. The finished product will look like this:

Our first piece of CSS using inline styles

With the HTML we had previosuly written as our base, we will now add the inline styles (CSS) to make it more visually appealing.

The first thing we need to include is the ‘style’ attribute to our paragraph tag. This allows us to add our chosen styles, changing the appearance of our chosen HTML tag. The ‘style’ attribute is added like so:

<p style="">Hello World!</p>

With the required attribute added to out HTML tag, we will be changing our font-family from the (windows default) of ‘Serif’ to Georgia.

We will also change the font-style to display as italic’s.

<p style="font-family:georgia; font-style:italic;">Hello World!</p>

Inline CSS is written in a format of providing a property and a value to this property.

Our chosen ‘properties’ found in the above code are ‘font-family‘ and ‘font-style‘.

The values to these properties are ‘georgia‘ and ‘italic‘.

Next we will be increasing the font-size and changing the colour.

<p style="font-family:georgia; font-style:italic; font-size:40px; color:#afafaf;">Hello World!</p>

Notice the property ‘color’ has a value with a preceeding ‘#’ (hash)? The ‘#’ describes to a web browser that the hexadecimal colour value of ‘afafaf’ should be used.

Save your document, and refresh your browser window, you should now see the finished product:

Thats it! Your first piece of inline CSS is now done. Play around and experiment with CSS properties and values, of which you can find at W3C Schools.

I hope you enjoyed this tutorial and as always, please, please do leave your comments below. They are all very much appreciated!

If you can set yourself a target that you read through just a few of the tutorials found on Learn CSS, I promise that you will be well on your way to building HTML & CSS websites in no time!

So, where to start? Well I guess the best place to start learning CSS would be the beginning:

What is CSS?

CSS is an acronym that stands for Cascading Style Sheets.
As the name Cascading Style Sheets suggests, the presentation (otherwise known as styles) are applied to the HTML in a cascading manner, meaning CSS uses a priority scheme to determine which style rules to apply if more than one rule matches for a selected element. In this so-called cascade, priorities or weights are calculated and assign the cascaded style to the selected element. Specificity can be a secret weapon in using CSS at an advanced level.

What is CSS used for?

A Cascading Style Sheet is used to define a websites layout/visual structure and is primarily used for separating a documents presentation (how it looks) from the website’s HTML mark-up (how it works).

Separating the styles from the mark-up also provides the following benefits:

• Consistency of font-weights, font-colours, font families, background colours, background images, etc can all be updated in one place – the stylesheet – rather than having to edit/update individual pages.
• A stylesheet is (usually) stored in the web browser cache, which means pages will load quicker on page reload.

How does using CSS benefit me?

If used correctly, CSS is one of the most time-saving and key features of future proofing a website.
The use of good naming conventions, writing generic styles for element re-usability, and for maintaining or adjusting the height, width, positioning, colour, size, etc of any element throughout a website, and being able to do all this in a single stylesheet makes learning CSS a high priority for anyone wanting to get into the website design industry.

What sort of things can I do with CSS?

CSS gives you the ability to change a plain looking HTML website into a beautiful and usable one by:

• Providing a visual structure/layout to a website.
• Making a thumbnail gallery that on hover, displays a larger version.
• Make text links/buttons easier to see and more “click-able” by adding a background image.
• Call to actions not standing out? CSS will help you with that by changing font-size, background colour, etc.

Using CSS in a professional environment:

In a working capacity (either freelance or in a design agency), a front-end web developer is provided with a Photoshop PSD file (or equivalent) and is expected to write semantic HTML (mark-up), then using CSS (presentation), cutting out and applying images as backgrounds to elements, changing font colours and sizes, positioning elements where they are supposed to be according to the design supplied.

CSS also allows you to do simple things such as:

• Making your text headings a different colour from your paragraph text.
• Move a text column from the right hand side of the web page to the left.
• Make an unordered list look like a navigational menu which includes an element of user interactivity by providing a hover state which includes a background image swap.

CSS can be used to create simple things such as text colour change on hover or can even be used to create complex drop down menus and image galleries. There is a massive collection found over at CSS Play – a fantastic resource provided by Stu Nicholls. I have learned so much from this website from just playing with the code of downloaded examples just to find out how they work. So I suggest (in the near future) for your continual progression, it is well worth looking there to see what sort of things can be achieved with nothing more than pure HTML and CSS.

• JQuery,
• SEO (Search Engine Optimisation),
• Photoshop, Dreamweaver & Flash,
• Design inspiration,
• Useful/Helpful links,
• Free downloads, etc

Due to the nature and idea behind Learn CSS as a tutorial site, the “Learn CSS” website layout, functionality, aesthetics and content will update (read “improve and grow”), as will your knowledge in HTML and CSS!