Apply Styles To A Mark-Up Language Document

Reading: Apply styles to a mark-up language document
Apply styles to a mark-up language

document
Inside this document:

Introduction
In-line styles
Embedded style sheets
External style sheets
Cascading Style Sheets (CSS)
Compatibility across platforms
Positioning elements on screen
Designing with CSS
Colours on the web
Summary
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
Web designers also need to consider a number of variables and standards

when applying style to their web page.
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

</tr>
</table>
<p align="center"><font color="#990000" size="5"
face="Courier New">These are
simple examples
of styles.</font></p>
</body>
</html>
In the browser, this HTML document will look like this:
Figure: Screenshot of simple in-line styles applied in the browser window
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">
Page background is rendered as light yellow

(note hexadecimal code is used for web
colours)
<h2><font color="#336666" >
The colour of this heading is changed
<font face="Arial">
Changes font of text. If no font is specified,

the web page will be displayed in the default
font as set by the browser
<font size="6">
Text in HTML can be described in seven

sizes where 1 is smallest and 7 is largest
<table width="75%">
The width of the table will shift to take up

75% of the width of the browser. Table
width can also be defined in pixels.
<tr bgcolor="#336666">
The background colour of this row in the
317462657.doc

table is changed to Aqua
<td bgcolor="#CCCCFF" align="right">
The background colour of this table cell

only is set to light blue and the text is
aligned to the right
<font color="#990000" size="5"

face="Courier New">
The font, size and colour of this line of text

are changed
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.

You can define styles in the <head> section of an HTML document and then
apply those styles to the various headings, images and other page elements
throughout the document. This is known as an "Embedded" style sheet.
They can be useful when you want one page to have a unique style. This is
more efficient than using in-line styles (but still not the best way - as you
will see further on).
Embedded style sheets are created by inserting the "style" element into the
"Head" section of a HTML document. Let's look at simple example:
<style type="text/css">
body { color: blue; background: yellow; }
</style>
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

You can also define styles once in a separate Cascading Style Sheet (CSS)
document and then link to it from many different HTML pages. This is
known as an External style sheet.
To understand the advantages of style sheets consider this example:
You could insert a font tag for every paragraph in a whole site like this:
<p><font face="arial" size="3" color="green"> Hello, this is
green text <font></p>
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.
Linking to external style sheets

The code for linking from a HTML page to an external style sheet is placed
between the <head></head> tags of the page and will look something like
this:
<link rel="stylesheet" href="styles/style.css">
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

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #006666;}
h2 {
font-size: 14px;
font-weight: bold;
color: #006666;}
h3 {
font-size: 12px;
font-weight: bold;
color: #FF6600;}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;}
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".
Cascading Style Sheets (CSS)

Style sheets used for web pages are also referred to as Cascading Style
Sheets (or CSS). The term "cascading" refers to the priority given to
317462657.doc
different style rules applied to the same document. There is a 'cascading'

order of importance, depending on where the style information is located.
Cascading order of importance

A web browser will give priority to style instructions in the following order:
1. In-line styles
2. Embedded style sheet
3. External style sheet
4. Browser default settings
For example a font style applied to an HTML tag has a higher priority than a
font style applied in either an embedded or external style sheet. If the
browser finds no style instructions, then it will apply its on default standards
(including fonts, colours etc.).
The Web's Cascading Style Sheets, Level 1 and Cascading Style Sheets,
Level 2 are standards that have been developed by a working group of the
World Wide Web Consortium (W3C): www.w3.org Refer to the W3C
website for full details of the CSS specification.
Compatibility across platforms

Laying out elements on a web page is much less accurate than formatting a
word processing document. Variables that will affect how your page will
look to your users include:
Browser type and version
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.
Browser type and version

The way your web page displays will be influenced to a degree by the types
of browser the user has. Browsers vary in their compliance with web
standards and employ different approaches to processing code and
displaying pages. Web designers spend a lot of time ensuring that their sites
317462657.doc
will work across a range of browsers. Some of the most common web
browsers include:
Internet Explorer (various versions)
Mozilla Firefox
Safari (Mac only)
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 a site that adheres to international web standards (as set by

the W3C: www.w3.org)
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
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
800 x 600 (most common)
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 .
Positioning elements on-screen

It can be difficult to accurately position web page elements on-screen due to
the factors mentioned above. Two widely-used methods for laying out web
page elements are:
using tables
using CSS
Positioning using tables

Because of the restricted layout options available in HTML, tables have
often been used to lay out content in a visually pleasing way. For example a
table with two columns may be created where the left column contains
navigation buttons and the right column shows the page content. Take a look
at the example below:
317462657.doc
Figure: Simple web page using table layout
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
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
11
Designing with CSS

Web design is moving away from the use of tables for layout towards using
Cascading Style Sheets (CSS) to position HTML elements on the page.
Cascading Style Sheets (CSS) can give you a precise control over the look
of your web pages and the placement of elements on the screen.
Using CSS positioning means you can change the layout of pages much
more easily later on if you need to.
For a good introduction to using CSS for layout go to the W3 Schools
website: www.w3schools.com In the "Quick Starters" section (in the righthand column) go to "My First CSS" and undertake their tutorial.
For an excellent overview of the design possibilities of style sheets, go to
the CSS Zen Garden website: www.csszengarden.com. Click on a few of
the different styles to see the same page using different style sheets. The
code stays the same - only the external .css file changes!
For a more in-depth introduction to CSS go to the Friendly Bit website:
friendlybit.com. Go to the CSS section and find the article called "Beginners
guide to CSS and standards"
Setting link colours

CSS allows you to specify four colours for text links:
Unvisited links - links that have not been clicked
Visited links - links that have previously been visited.
Hover - where the mouse is hovering over the link
Active link - where the mouse clicks on the link
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
12
Colours on the web

Colours for the web can be described in one of three ways.
A limited set of 16 standard colours can be described just using a descriptive
word (e.g. <color="green">). They are: aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
All colours can also be described using a "hexadecimal" (or "hex") code.
(e.g. <color="#336699">). This number represents RGB values (RGB =
Red, Blue, Green). The lowest value that can be given to one light source is
0 (hex #00) and the highest value is 255 (hex #FF). So the Hexadecimal
values for each of the RGB values can go up in the following order from
dark to light:
00, 33, 66, 99, CC, FF
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
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
14

Apply Styles To A Mark-Up Language Document

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Apply Styles To A Mark-Up Language Document

Încărcat de

Drepturi de autor:

Formate disponibile

Reading: Apply styles to a mark-up language document