Professional Documents
Culture Documents
317462657.doc
State of New South Wales, Department of Education and Training 2006
Introduction
In HTML, the appearance of web pages in a browser can be defined in a
number of ways including
In-line styles
In-line styles
The most basic way to add styles to HTML documents is to add "attributes"
to mark-up tags on each individual HTML page. Because the styles are
written alongside the tags, these are called "in-line" styles.
Take a look at this example of HTML code:
<html>
<head>
<title>This is the title of the document</title>
</head>
<body bgcolor="#FFFFCC">
<h2><font color="#336666" face="Verdana">Demonstration
of styles in HTML</font></h2>
<p>This document is marked up with "in-line"
styles.</p>
<p>This means that styles such as <font
face="Arial">font</font>, <font color="#FF0000">color
</font>,
<font size="6">size</font> and alignment are added as
attributes to HTML tags.
Here is a sample table:</p>
<table width="75%" border="1" align="center">
<tr bgcolor="#336666">
<td><strong><font color="#FFFFFF" size="4"
face="Verdana">Column
1</font></strong></td>
<td><strong><font color="#FFFFFF" size="4"
face="Arial">Column
2</font></strong></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Content of table cell</td>
<td bgcolor="#CCCCFF" align="right">More content aligned right</td>
317462657.doc
State of New South Wales, Department of Education and Training 2006
Look over the HTML text for this page and note the way that style has been
applied. Some examples are as follows:
Tag
Style applied
<body bgcolor="#FFFFCC">
<font face="Arial">
<font size="6">
<table width="75%">
<tr bgcolor="#336666">
317462657.doc
State of New South Wales, Department of Education and Training 2006
This gives you a good overview of applying styles "in-line" on a web page.
This is the simplest way of applying styles for web pages.
It is important to understand the effect of in-line styles but they are not used
very often in practice. This method requires every line of HTML to have
style elements added - you can see that if your web site got up to even ten
pages (let alone thousands of pages as many websites contain) this would
make for very repetitive coding!
The flexibility provided by styles sheets means that it is much more sensible
to apply styles at a broader level as we shall see below.
Everything between the <style> tags is written in a format for style rules
that reads basically as follows:
selector {property: value}
In this example, the style rule selects the 'body' tag, the properties being set
are color and background and the values are blue and yellow respectively.
This means that all text on the page will be blue and the page background
will be yellow.
You can set values for a wide range of properties using embedded style
sheets including, for example, setting all <p> tags to Verdana font, or
making all tables have a grey background.
317462657.doc
State of New South Wales, Department of Education and Training 2006
However, it is far better to have one style sheet linked to every page in the
site. The external style sheet dictates the font, size and colour of every
instance of the paragraph <p> tag so that the same line in the HTML
document would simply look like this:
<p>Hello, this is green text</p>
One obvious advantage is that the HTML code is much simpler. However,
there are other benefits. Download times are faster, and site maintenance is
easier - changes to styles are made in one place only, and you have instant
control over design attributes across multiple pages.
This line basically says "Insert a link from this page to the stylesheet called
"styles.css" inside the "styles" folder. Notice that the style sheet has a
filename extension of ".css". A CSS document can be created in a simple
text editor (such as Notepad or TextEdit). It needs to contain the code for
each style (see extract below) and needs to be saved with the correct ".css"
extension.
If you insert this same style sheet link into every one of the HTML pages in
your website, you will be able to update the appearance of your pages from
a single central document, "styles.css"
Here is an extract from an external style sheet:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;}
h1 {
317462657.doc
State of New South Wales, Department of Education and Training 2006
Notice that this sample covers the Paragraph <p> tag and heading levels 1, 2
and 3. (<h1>, <h2>, <h3>). The body tag <body> ensures that no matter
what text is on screen (e.g. table cells, lists, etc.) it will appear in the same
font.
Note that three possible fonts are listed for each. This is done in case the
user's machine does not have the first font installed.
Font size
The size of the font is set in point size - the same as used in word
processors. The weight of the heading fonts is set as Bold.
You can also set font size relative to each other using percentages. For
example, your <p> tags may be set at 100%, your <h3> may be 100% bold,
your <h2> may be 110% bold and your <h1> may be 120% bold. This will
allow the user to resize website text in their browser window but will retain
the relative importance of each heading. Note also that Mac and Windows
fonts may display at different sizes. This is an important accessibility point particularly for users with poor vision who may have difficulty reading
small text.
For a more in-depth discussion on the use of external style sheets, go to the
Friendly Bit website: friendlybit.com. Go to the CSS section and find the
article called "Beginners guide to CSS and standards".
317462657.doc
State of New South Wales, Department of Education and Training 2006
Operating system
Monitor settings
It may seem OK to say that your site works on 80% of user's computers (for
example users, with Windows XP and Internet Explorer Version 6) but
would any business willingly cut themselves off from 20% of their possible
market? You should always test your websites across a variety of computers
to ensure that it will work on most of your user's machines.
317462657.doc
State of New South Wales, Department of Education and Training 2006
will work across a range of browsers. Some of the most common web
browsers include:
Mozilla Firefox
Opera
Compounding this situation is that there are a range of other settings that
vary between users (such as whether Java is enabled, latest plug-ins are
installed or images are turned off).
For details of current browser usage on the web, go to Wikipedia
(en.wikipedia.org) and search for the term "usage share". At time of
publication there is a graphic which displays the history of browser usage on
the web since 1994. The biggest trend in recent years has been steadily
growing number of users moving from Internet Explorer to the Mozilla
Firefox browser. Also see The Counter: www.thecounter.com and look at the
"Global Stats" section
Operating systems
The two main operating systems in general use are Windows (in various
versions from Windows 98 and up) and Mac (mainly OSX). A great deal of
effort is sometimes required to ensure that a website will work under all
possible operating systems. Generally this is done in one of two ways:
Creating versions of the site that work best under specific operating
systems - and using a script to detect user's settings and redirect
them to the most appropriate version of the site. This is much more
time-consuming but allows designers to exploit the extended
capabilities of DHTML for example.
Even if web standards are adhered to, operating systems can process
information in different ways.
The technical effort to make websites perform perfectly under all systems is
huge and often not very economical. Sometimes the best solution is to build
as best you can and make sure that the site "degrades gracefully". That is,
even if it does not display perfectly, the information is still readable and
useable.
317462657.doc
State of New South Wales, Department of Education and Training 2006
Monitor settings
Web designers have no control over web users' monitor settings. Screen
resolution is crucial to how well your page will display.
In computing, on-screen space is measured in pixels. Computers can have a
variety of pixels settings, the most common ones being (width x height):
640 x 480
1024 x 768
1152 x 864
1280 x 600
1600 x 1200
If you create your web page with a graphic (for example, a heading banner)
that is 760 pixels wide, this will work well on a resolution of 800 x 600.
However, users with their monitor set at 640 x 480 will have to scroll to see
the whole picture, users with 1280 x 600 settings will see the picture with a
load of white space around it. You can see that designing for all monitor
resolutions is not going to be easy.
For more in-depth exploration of design issues on the web, take a look at the
"Design" section of the Webmonkey website: www.webmonkey.com .
using tables
using CSS
317462657.doc
State of New South Wales, Department of Education and Training 2006
This simple web page has been laid out using a table with two rows and two
columns. The code for this page is as follows:
<html>
<head>
<title>This is the title of the document</title>
</head>
<body>
<table width="760" border="0">
<tr>
<td colspan="2"><img src="images/banner.gif" width="760"
height="48"></td>
</tr>
<tr>
<td width="140" valign="top" bgcolor="#FFFFCC">
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p></td>
<td width="620" valign="top" bgcolor="#CCFFFF">
<h1>Heading</h1>
<p>Here is the page content (This has been cut short
in this sample...) </p></td>
</tr>
</table>
</body>
</html>
The cells in the first row have been "merged" to form one cell ("colspan" is
short for column span) which holds the banner image. In the second row, the
left column then holds navigation while the right displays the page content.
Notice that the left column is restricted to 140 pixels wide (<td
width="140">).
Notice that the table border is set to zero (<table width="760" border="0">).
This means that the table itself is invisible in the browser window. Each
317462657.doc
State of New South Wales, Department of Education and Training 2006
10
table cell has been coloured differently so that you can see the effect of the
table on layout.
Another typical use of tables for layout is when an image needs to appear
beside some text (for example a portrait photo with a quote from that
person).
With experience, table layout can be used to great effect. Some of the
drawbacks are that tables make your HTML documents larger and more
complicated than they need to be. It also takes more time to get a consistent
look across all the pages in a site. Tables for layout can also cause
accessibility problems for people using screen readers or internet enabled
PDAs or mobile phones.
317462657.doc
State of New South Wales, Department of Education and Training 2006
11
The colours that you choose can fit in with the design of your site. It is good
practice to ensure that unvisited and visited links are set to different colours.
This allows the user to determine where they have been on your site. This
can considerably reduce confusion - web site users will tend to follow the
same path if they cannot tell that they have been there before.
Here is an example CSS extract showing correct layout for links:
a:link
a:visited
a:hover
a:active
{color:
{color:
{color:
{color:
#0000CC}
#0066FF}
#336699}
#FF0000}
Note that it is important that the styles are described in the order above - if
you place the 'hover' class first, the hover colour will not work.
317462657.doc
State of New South Wales, Department of Education and Training 2006
12
For example, the colour red will have full strength "red" value and no blue
or green - so its hex colour is "#FF0000". Similarly the hex code for Blue is
"#0000FF". If all three RGB values are the same, the colour will be a shade
of grey (e.g. "#999999" is a mid-grey colour, "#000000" is black and
"#FFFFFF" is white).
There are many online resources that fully explain the use of colour on the
web. Take a look at W3 Schools: www.w3schools.com. Go to "Learn
HTML" and then select "HTML colors". Also for a colour palette, try this
Visibone Color Chart: html-color-codes.com. Alternatively, take a look at
Wikipedia: en.wikipedia.org Search for the term "web colors" (note US
spelling)
Browser-safe colours
In the early days of the web, many computers could display only 256
colours. To make this worse, Windows and Apple computers used different
default colour settings. This led to the recommendation to limit web colour
palettes to 216 "Browser-safe" colours. If you used a "non-safe" colour, then
it would "dither" and change to the closest available web-safe colour giving designers unpredictable results on some machines.
Browser-safe colours are no longer really an issue as almost all computers
now display at least thousands of colours.
317462657.doc
State of New South Wales, Department of Education and Training 2006
13
Summary
Using styles is an easy and efficient way to control the formatting of web
pages. Separating content from its presentation makes it quicker and easier
to update the look of a whole site. Using standard CSS to style your web
pages will mean that your web site will display well on a wide range of
browsers, platforms, window sizes and devices.
317462657.doc
State of New South Wales, Department of Education and Training 2006
14