Style sheets are an incredibly powerful feature of modern web design, and there’s absolutely no reason why you should use any other method to format your pages. Unfortunately, Amaya doesn’t make it particularly easy to create and maintain CSS files. So far, you’ve created styles manually, line by line. This is slow, prone to errors, and only works if you happen to know the language of css (font-family, color, and so on).
Now that you understand the basics of what a css file is, and the sort of commands it contains, we need to find a better program for editing css files. Preferably one that’s free. There are quite a few such programs available, downloadable from the internet. The best one, in my opinion, is Topstyle Lite. It’s a cut-down version of a commercial product called Topstyle Pro, which offers even more features. But for anyone who needs a basic program to easily create and edit css files, Topstyle Lite is perfect.
Your next task, therefore, is to download and install Topstyle Lite. Close Amaya for the moment, but don’t uninstall it. We’ll continue to use Amaya for editing HTML pages.
To download Topstyle Lite, go to www.newsgator.com and follow the links to Topstyle and then to Topstyle Lite. Or type "topstyle lite" into Google. Once you have downloaded the installer file, double-click it to start the installation. The version of Topstyle Lite that we’re using in this book is 3.5.
With TopStyle Lite installed, launch the program. Then go to the File menu and choose Open. Browse to your WebWork folder and locate the style file that we have already created, and double-click it to open it with Topstyle Lite. The screen will look something like this:
One of the great things about the web is that HTML and css files are just standard text files, rather than using proprietary or complex formats such as Word or Excel. This means that you can switch editors easily. If you don’t like Amaya, you can load your HTML file into another application. Equally, the css file that we created earlier with Amaya can now be loaded into Topstyle Lite.
Let’s start by changing the colour of our favourite cheese text, from yellow to blue. Not just any blue, but a nice bright pale blue. In Amaya, you’d have to know the name (or code number) for the particular colour, but Topstyle Lite makes things much easier.
Click somewhere within any of the 3 lines that make up the definition of the .fave-cheese class, and you’ll see the full details of the style shown on the right hand side of the screen. Click the yellow block and an arrow linking to a drop-down list of colours will appear. Click that arrow. Choose a colour from the list of options, or select the top option from the list which says Choose Colour. This then brings up a colour picker from which you can select the particular shade of blue that you want. When you’re finished, click OK. See how the definition of the class has been edited.
Let’s use TopStyle Lite to create a completely new style. We’ll create a tag style for a second- level heading, ie the <h2> tag.
Move your cursor down to the bottom of the screen, below the existing pair of style definitions. Then, from the Edit menu, click on New Selector. A selector is the official name for a style's title (whether it's a tag or a class). In this case it’s a tag so, in the HTML Element box, scroll down to h2, select it, and click OK.
TopStyle Lite will create the first and last lines of the style definition, like this:
h2 {
}
Now you can use the panel on the right hand side to select the style and design of your h2 tags. Here’s an example:
As you can see, I’ve chosen a text colour of dark orange, and a top border of a grey line that’s 1 pixel thick.
Using TopStyle Lite to create a new class, rather than a tag style, is just as easy. Again, choose New Selector from the Edit menu to bring up the New Selector box that looks like this:
From the set of radio buttons that offer a choice of Class or ID, choose Class. Then, in the box below, type the name of your class, and then choose the options as you wish. TopStyle Lite will automatically add the dot at the front of the class name if you forget.
When you’ve finished experimenting with TopStyle Lite, save your css file by choosing Save from the File menu, then quit the program.
Before we leave the subject of CSS and TopStyle Lite for the time being, let’s just check that our new <h2> tag style works correctly.
Open Amaya, then open your index.html page. Type a few words, and highlight them. Then, from the Insert menu, choose Heading and then H2. This will mark those words as a level-2 heading by surrounding them with an <h2> tag at the start and a </h2> tag at the end. Y ou should find that your words now display correctly, using the h2 style that you created with TopStyle Lite.