Basic Cascading Style Sheets: Part 1

Integrating Cascading Style Sheets (CSS) into your HTML pages can not only enhance your site, but also make coding easier. In this first of a two-part series, we investigate the language of CSS and how the syntax differs from standard HTML. In 'Basic Cascading Style Sheets: Part II ', we will build upon this knowledge and create a working example.

What is CSS?


Cascading Style Sheets were introduced specifically to add flexibility to the HTML language. There are many things you can do with CSS, such as positioning items on your Web page using X, Y and Z coordinates - hence reducing the need for HTML tables.

We will focus on the formatting of HTML text. CSS is used so frequently by Web page designers that its use and understanding is a necessity for anyone doing HTML coding.

What does it do?


In the context of this column, CSS allows you to create a template for your text's appearance. Imagine a scenario where you have 10 pages on your site, each containing several subheadings. For consistency, you may want all subheadings to look the same. Consequently, you may use the following code several times throughout each of your 10 pages (where 'Subheading Text' is your desired title).

<font color="blue" size="3" face="arial"><b>Subheading Text</b></font>

What if a decision was then made that all those subheadings should be red, not blue? Using HTML alone, you would have to locate and make the changes several times in each page - a time-consuming task.


With CSS, you can create a template of common text characteristics used through­out the site. These details are then linked to each of the 10 pages. Instead of having to re-code the entire Web site, one change is made in the template, and all subheadings will simultaneously change to reflect this.

There are two commonly used ways to implement CSS within your Web site. The first is to create a separate .css file which links to all your HTML pages, as referred to above. This is used specifically for multiple pages on a site.

For now, we will review the insertion of these settings into the HEAD of your HTML document. The formatting therefore only affects the file containing the code.

Inserting CSS into the HTML code


Let's take the subheading example used earlier. Insert the following code between the and tags of your HTML file. It doesn't matter if this is before or after the tags. <p><br/> <b><STYLE type="text/css"><br/> .subheading<br/> {<br/> COLOR:blue;<br/> FONT-FAMILY:Arial;<br/> FONT-SIZE:13px;<br/> FONT-WEIGHT:bold;<br/> }<br/> </STYLE> </b></p><p>You have now created the formatting that can be referenced with every sub­heading in this file.</p><p>Instead of writ­ing the full font and bold commands used earlier, you now simply need to write the following into your HTML code for each instance of the subheading:</p><p><b><font class="subheading">Subheading text</font></b></p><p>This calls the settings within the HEAD and attributes them to the text between the open and close FONT command. If you change the colour in the CSS settings to red, all calls to this class will automatically change.</p><p>See <a href="http://demo.idg.com.au/pcw/html_nov02_fig1.gif" target="_new">Figure 1</a> for example code.</p><p></p><h2>The code looks different to HTML</h2><br/> You will notice that this language is subtly different from standard HTML. The insertion of the STYLE type in the HEAD section lets the HTML page know you are about to use CSS.<br/><p>Notice the full stop and the item name. Although we named the item '.sub­heading', we could have named it '.giraffe' or something equally non-obvious, as long as the font class referenced it accordingly. (We will discuss the use of the full stop in 'Basic Cascading Style Sheets: Part II '). The settings for each item are then surrounded by curly brackets. This denotes the beginning and end of that object declaration.</p><p>In this instance, we then list four settings. The colour of the contained text will be blue; the face will be Arial; the size is 13 pixels; and the text is bold. Note the use of a colon between the property and value (color:blue), and that each value ends with a semicolon.</p><p>These are only four of the many formatting styles available. In 'Basic Cascading Style Sheets: Part II ' we will investigate others, and look at implementing CSS to change the appear­ance of links. Additionally, we shall create a working example and link our CSS code from a separate template to affect multiple pages.</p>

Join the PC World newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
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 Articles

Resources

PCW Evaluation Team

Matthew Stivala

HP OfficeJet 250 Mobile Printer

The HP OfficeJet 250 Mobile Printer is a great device that fits perfectly into my fast paced and mobile lifestyle. My first impression of the printer itself was how incredibly compact and sleek the device was.

Armand Abogado

HP OfficeJet 250 Mobile Printer

Wireless printing from my iPhone was also a handy feature, the whole experience was quick and seamless with no setup requirements - accessed through the default iOS printing menu options.

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.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?