Basic Cascading Style Sheets: Part II

In 'Basic Cascading Style Sheets: Part 1 ', we looked at how to insert CSS into the HEAD tags of your HTML pages for formatting within an individual page. Now we show how to create a separate CSS template to link to multiple pages. This will enable you to make for­matting changes once, to update your entire site. Additionally, we will review formatting styles and the impact of CSS on the links in your pages.

Creating a CSS template


The CSS code shown below will be inserted into a separate file. Once this is done, you can link all of your HTML pages to utilise the formatting styles within. First, open Notepad and insert the following in an empty file :

.subheading
{
COLOR:blue;
FONT-FAMILY:Arial;
FONT-SIZE:13px;
FONT-WEIGHT:bold;
}

Now save the file as a CSS file. Go to the File menu, select Save As, and save the file as template.css. Make sure that you select All Files in the Save As Type drop-down menu, otherwise it may be saved as a .txt (text) file, not as CSS.

Close this document. You have now created a CSS template with one item named '.subheading'.

Notice the code is identical to what was placed in the HEAD tags last month, except we omitted the open and close STYLE commands. Because we used the .css extension, the computer already knows this is the style type used.

Linking a template to HTML pages


In the HEAD portion of your HTML page (where you inserted CSS script last month), insert this line of code:

<link rel="stylesheet" type="text/css" href="template.css">

This tells the page to look for the template.css file you just made. This line of code must go into the HEAD of every HTML document that you want to reference the CSS settings. This will achieve the same result as inserting the CSS script directly into the HTML page. Consequently, you call your settings in the same way as before.

For example: <font class= "sub­heading"> Subheading text </font>

Figure 1 shows how this all comes together.

Using CSS


CSS settings aren't limited to use within the FONT command only. If you set up a CSS class as 'TD.subheading', then it would ONLY work in the instance of a TD (e.g.: text ). The absence of anything before the full stop in this example therefore means the style can be applied to all commands, such as P, TD or even BLOCKQUOTE, as long as they are closed off appropriately.

Figure 1 shows the implementation within the paragraph command.

Links and CSS


Links are treated slightly differently than standard class settings. Whenever you have a link, code it exactly the way you would without CSS.

For example: <a href="http://www.pcworld.idg.com.au">click here</a>.

As soon as the computer reads the 'a' (anchor) command, it automatically recognises the three states of links - normal, visited and hover - and treats them according to the CSS style you determine.

To illustrate, if you were to add the following definitions to your CSS template, normal links would be red, Verdana, not underlined and the specified font size. Links over which a mouse hovered, or one that has already been clicked on, would be blue and underlined.

A:link
{
color:red;
font-family:Verdana;
text-decoration:none;
font-size:10.8px;
}
A:visited,A:hover
{
color:blue;
font-family:Verdana;
text-decoration:underline;
FONT-SIZE:10.8px;
}

Using the information covered in this series, you are now ready to successfully implement CSS to affect every page in your Web site.

COMMONLY USED CSS STYLES
Example Description
font-family:arial, helvetica; Of those listed, the first available font will be applied
font-style:italic; Text will display in italics
font-style:bold; Text will display in bold
font-size:10pt; Text will be rendered as 10 point type
color:#00ffff; Text will display in the specified colour
background-color:blue; The element's background colour will be blue text-decoration:underline; Specified text will be underlined text-transform:lowercase; Specified text will be lowercase text-align:center Text will be centre aligned

Join the PC World newsletter!

Error: Please check your email address.

Our Back to Business guide highlights the best products for you to boost your productivity at home, on the road, at the office, or in the classroom.

Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Most Popular Reviews

Latest News Articles

Resources

PCW Evaluation Team

Azadeh Williams

HP OfficeJet Pro 8730

A smarter way to print for busy small business owners, combining speedy printing with scanning and copying, making it easier to produce high quality documents and images at a touch of a button.

Andrew Grant

HP OfficeJet Pro 8730

I've had a multifunction printer in the office going on 10 years now. It was a neat bit of kit back in the day -- print, copy, scan, fax -- when printing over WiFi felt a bit like magic. It’s seen better days though and an upgrade’s well overdue. This HP OfficeJet Pro 8730 looks like it ticks all the same boxes: print, copy, scan, and fax. (Really? Does anyone fax anything any more? I guess it's good to know the facility’s there, just in case.) Printing over WiFi is more-or- less standard these days.

Ed Dawson

HP OfficeJet Pro 8730

As a freelance writer who is always on the go, I like my technology to be both efficient and effective so I can do my job well. The HP OfficeJet Pro 8730 Inkjet Printer ticks all the boxes in terms of form factor, performance and user interface.

Michael Hargreaves

Windows 10 for Business / Dell XPS 13

I’d happily recommend this touchscreen laptop and Windows 10 as a great way to get serious work done at a desk or on the road.

Aysha Strobbe

Windows 10 / HP Spectre x360

Ultimately, I think the Windows 10 environment is excellent for me as it caters for so many different uses. The inclusion of the Xbox app is also great for when you need some downtime too!

Mark Escubio

Windows 10 / Lenovo Yoga 910

For me, the Xbox Play Anywhere is a great new feature as it allows you to play your current Xbox games with higher resolutions and better graphics without forking out extra cash for another copy. Although available titles are still scarce, but I’m sure it will grow in time.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?