Reading: 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 2

In-line styles 2

Embedded style sheets 4

External style sheets 5

Cascading Style Sheets (CSS) 5

Compatibility across platforms 7

Positioning elements on screen 9

Designing with CSS 11

Colours on the web 12

Summary 13

Introduction

In HTML, the appearance of web pages in a browser can be defined in a number of ways including

· In-line styles

· Embedded style sheets

· External style sheets

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>
</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 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.

Embedded style sheets

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:

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.

External style sheets

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:

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 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #006666;}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #006666;}
h3 {
font-family: Arial, Helvetica, sans-serif;
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.

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 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:

In-line styles
Embedded style sheet
External style sheet
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 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.

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:

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">).