Ausnetech Pty Ltd - Computer Consultants

Australian Internet and Intranet Technologies

Home

About Us

Services

Prices & Quotes

Newsletters

Articles

Client Functions:

Issue Tracking

DEVELOPING VISUALLY APPEALING AND ACCESSIBLE SITES

Back to the index

Basic Formatting with CSS and HTML

HTML and CSS are the basic building blocks to building great websites. This section will show you how to utilise them to format text, tables and other HTML elements almost effortlessly!

This article assumes you have a basic understanding of what a website is and how to use a WYSIWYG editor. It will mention some things that you might not be aware of, such as tables, tags and attributes – but by the end of this page you’ll know enough to get you on the right track!

Using CSS (Cascading Style Sheets), you can format your website in a way that will make it look great and load quickly. Whether you're using a WYSIWYG editor such as Macromedia Dreamweaver or Microsoft Frontpage, or coding by hand, you can use CSS to benefit your website with very little effort.

CSS Basics
First, we must understand what CSS is and how it works with your web pages. CSS stands for Cascading Style Sheets. Using CSS you can choose how you want to display ‘HTML Elements’ – the parts of your page that your users will see, such as a table or text. For the purposes of this article, I’ll be showing you how to use an External Style Sheet – one that is not actually in the HTML file that your site is. The main benefit of using an External Style sheet is that of portability; we can transfer all the styles in this file to any HTML page in your entire site in seconds!

To begin, create your style sheet using any text editor and start by saving it as styles.css. The syntax is made up using three parts – a selector, a property and a value, each controlling a different part of your HTML file.

selector {
    property: value 
         };

CSS Definition for BODY
Let’s start by editing the ‘body’ selector. If you have any HTML experience you will know that the

<body>

tag is the main element in any page – all content is inside it’s borders. By formatting the ‘body’ selector it will change all child elements (unless we tell it otherwise).

              
body	{
      color: red 
    	};

This code will change the color of all text inside on your site! Save this file and open a new blank document with the following lines:

              
<html>
  <head>
    <link href="styles.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Save this file as index.html in the same folder as styles.css and open it. The body text should be red. The important line in the index.html file is

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

This line tells the browser to look for a CSS file and use it for formatting – without it you would see no difference. Now let’s take a look at some more examples of CSS formatting. Reopen your styles.css file and enter the following code:

a:link {
	  color: red;
        }

Can you guess what this piece of code will do to your site? Have a look by saving the file and opening your index.html and creating a link to any site. If you don’t know how to do this, enter this code to create a link to www.google.com:

<a href=http://www.google.com>Google</a>

Save the file and open it in your web browser. All the links on the page should now be red! In these pages I can only scratch the surface of the design possibilities made available by using CSS, but using this knowledge as a basis to learn from you can master it in no time!

Previous: Site Layout

Next: Optimising Images

Links

Website development | Graphic design | Imaging | Programming | Accounting/business software