The Best CSS editor in my opinion is Topstyle available from: http://www.topstyle4.com/ They have a free trial which I recommend you look at. Another excellent CSS tool, is rapid CSS.  This tool is cheaper than Topstyle, and has a very similar toolset. Rapid CSS: http://www.blumentals.net/rapidcss/

Simply put, CSS (Cascading Style Sheets) is a powerful "tool" that webmasters have available to them, to help them design and then further, maintain the look and feel of their sites, with minimum effort. In this chapter, I just want to wet your appetite for style sheets, and show you their potential. In the remainder [...]

In the last chapter I gave you an introduction to Cascading Style Sheets (CSS) by showing you some examples of text formatting using stylesheets. You also saw how quickly you could change the look and feel of a complete site, by changing one file – the stylesheet. In this chapter, we’ll continue with this introduction [...]

So far, I showed you some simple examples of what CSS can do for your site. It’s now time to learn how to do this for yourself. I’ll take it one step at a time so that it will be easy to follow. If you don’t understand one section, re-read it. Note: You do need [...]

In the last chapter, you downloaded a tool called Topstyle Lite. This tool is great for exploring CSS, so if you didn’t download it, I highly recommend you get it now. In this chapter, we’ll look at how to use it to create and modify stylesheets. OK, start Topstyle Lite. We have seen some "selectors" [...]

In the last chapter we looked at using Topstyle Lite to create cascading style sheets (CSS). Hopefully you have had time to play with it some more, and become comfortable with creating a style sheet. One thing I can’t do in this course is teach you everything there is to know about CSS. My goal [...]

In the last chapter we looked at "Pseudo-Class Selectors". Don’t be put off by it name, its not as difficult as it sounds! If you have done any research on CSS, you will probably have heard of "Pseudo-Element Selectors" as well. That is what I would like to look at now, but again, don’t be [...]

In the last chapter we looked at "Pseudo-Element Selectors", and despite its complicated name, we saw that they were easy to use. The drop-capital example from the last chapter used the "float" property, and it is that property I want to look at now, with specific reference to images. NOTE: If you use a very [...]

In the last chapter, we talked about Class & ID selectors, and I left you with this example: http://creatingfatcontent.com/csscourse/7/7.htm   .rightalignimage{ float: right; margin-right: 20px; } .leftalignimage{ float: left; margin-right: 20px; } In that example, I created a couple of classes to modify the properties of images. One for left align, and one for right [...]

As you have followed this tutorial, you may have noticed that when you change the size of text using CSS, you have a number of options. You can see this for yourself in Topstyle Lite. Create a new style sheet, and click the New Selector button. Select h1 from the HTML elements list, and click [...]

We have come a long way in our understanding of CSS, and I hope I haven’t lost you so far. Now in this section, I don’t want you to worry about what we are doing, or how its done. Just sit back, and look at the examples. Study the HTML and the CSS if you [...]

In the last chapter we saw some sample layouts, but I didn’t go into any details on how to achieve them yourself. That is what we are starting now, and I promise, we will take it slowly. When it comes to web design, you can setup: * fixed-width layout – e.g. you can create a [...]

In the last section we saw a simple two column layout. Now, I would like to create another 2 column layout, but this time, with a footer area. I also want to set you up with a strategy for creating CSS layouts, so that its not too daunting starting with a blank html document, and [...]

In the last section you created a two column layout. Now, I want to show you how easy it is to convert that to a three column layout. As a reminder, here is the template we created in the last section: http://creatingfatcontent.com/csscourse/12/2col-10.html   body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 70%; } h1 [...]

In the last chapter we created a floated three-column CSS template. Now, I want to start looking at positioned layouts, as these have the advantage that "divs" can be in any order in the HTML file (meaning main content can be moved up the document to make it the first thing the search engines see [...]

In the last chapter we looked at the box model, which is vital to creating CSS layouts. You can remind yourself of the box model here: http://creatingfatcontent.com/csscourse/14/box-model.htm   Now, I want to look at the next part of this puzzle – how to position a box on the page using absolute positioning in CSS. In [...]

In the last chapter we looked at absolute positioning of boxes on the screen, and how the coordinates that are defined as "absolute" are not always taken from the upper left hand corner of the screen. You should go back and read part XV if you are not comfortable with this idea. I want to [...]

In the last chapter, we built a positioned 2 column layout, so now we can take it one step further, and turn it into a 3 column layout. Here is the 2 column template we created in the last session: http://creatingfatcontent.com/csscourse/17/basictemplate.htm   body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 70%; } #header { [...]

With the basis of our three-column template established, the last remaining piece of the jigsaw is the navigation system. When most people start building websites, the navigation menu is usually created using a table, and either plain text links, or graphic buttons. From an SEO point of view, text links are far better, as the [...]

Here is the basic menu we created in the previous chapter: http://creatingfatcontent.com/csscourse/19/basicmenu.html   #mainmenu { width: 250px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-transform: capitalize; border: thin dashed Silver; } #mainmenu ul { list-style: none; margin: 0px; }   Let’s work on this to make it look nicer. Firstly, how about removing the underlines from [...]

Here is the menu we created in the last chapter: http://creatingfatcontent.com/csscourse/20/basicmenu.html   Here is the same menu, but as a horizontal one, instead of vertical: http://creatingfatcontent.com/csscourse/20/basicmenu2.html   Let’s see how to create it. We will start off with the same HTML file as the original vertical menu, and just create a new style sheet. We [...]

To show you what I mean, have a look at this page: http://creatingfatcontent.com/csscourse/21/pbtreview.htm   Scroll down the page, and as you do so, watch the right hand “box” that contains my newsletter opt-in box. See how it scrolls up the screen with the content, and disappears off the top? Wouldn’t it be nice if, as [...]

Using background images in your templates is easy. You can add a background image to the entire web page, or just a box on your web page. To add a background image to the entire page, add a body{} section to your CSS file. Add a background-image selector, with the url of the image to [...]

When you are designing a template, you might like to customise the bullet points on the lists used on your pages. A great way of doing this is to use a custom image for the bullet. In this example, I am going to change the bullets of a list from the default circle, to a [...]