CASCADING STYLE SHEET WEB TOOL

_______________

A Thesis

Presented to the

Faculty of

San Diego State University

_______________

In Partial Fulfillment

of the Requirements for the Degree

Master of Science

in

Computer Science

_______________

by

Kalthoum Y. Adam

Summer 2011
 iii

Copyright © 2011

by

Kalthoum Y. Adam

All Rights Reserved

 iv

DEDICATION

I dedicate this work to my parents who taught me not to give up on fulfilling my

dreams. To my faithful husband for his continued support and motivation. To my sons who
were my great inspiration. To all my family and friends for being there for me when I needed
them most.
 v

ABSTRACT OF THE THESIS

Cascading Style Sheet Web Tool

by
Kalthoum Y. Adam
Master of Science in Computer Science
San Diego State University, 2011

Cascading Style Sheet (CSS) is a style language that separates the style of a web
document from its content. It is used to customize the layout and control the appearance of
web pages written by markup languages. CSS saves time while developing the web page by
applying the same layout and style to all pages in the website. Furthermore, it makes the
website easy to maintain by just editing one file.
In this thesis, we developed a CSS web tool that is intended to web developers who
will hand-code their HTML and CSS to have a complete control over the web page layout
and style. The tool is a form wizard that helps developers through a user-friendly interface to
create a website template with a valid CSS and XHTML code.
 vi

TABLE OF CONTENTS

PAGE

ABSTRACT...............................................................................................................................v

LIST OF TABLES................................................................................................................. viii

LIST OF FIGURES ................................................................................................................. ix

ACKNOWLEDGEMENTS.......................................................................................................x

CHAPTER

1 INTRODUCTION .........................................................................................................1

1.1 Background ........................................................................................................1

1.2 Aim and objective ..............................................................................................2

1.3 Motivation..........................................................................................................2

1.4 Thesis outline .....................................................................................................2

2 CASCADING STYLE SHEETS ...................................................................................4

2.1 History of CSS ...................................................................................................4

2.2 HTML vs XHTML ............................................................................................5

2.3 (X)HTML and CSS............................................................................................7

2.4 CSS syntax .........................................................................................................9

2.5 CSS and Browser issues...................................................................................10

3 RELATED WEB APPLICATION AND TOOLS.......................................................12

3.1 Difference between application and tool .........................................................12

3.2 Web design applications ..................................................................................12

3.2.1 Adobe Dreamweaver ..............................................................................13

3.2.2 Microsoft Expression Web .....................................................................13

 vii

3.2.3 Amaya .....................................................................................................14

3.3 Web Design Tools............................................................................................14

4 CSS WIZARD AND TECHNOLOGIES USED.........................................................16

4.1 CSS generator Wizard......................................................................................16

4.2 Technologies used............................................................................................20

4.2.1 XHTML ..................................................................................................21

4.2.2 CSS .........................................................................................................21

4.2.3 JavaScript................................................................................................21

4.2.4 JQuery .....................................................................................................22

4.2.5 PHP .........................................................................................................23

5 TEST AND RESULTS ................................................................................................25

6 CONCLUSION AND FUTURE IMPROVEMENT ...................................................30

BIBLIOGRAPHY....................................................................................................................31

APPENDIX

ABBREVIATIONS .....................................................................................................33
 viii

LIST OF TABLES

PAGE

Table 2.1 Cascading Precedence Order .....................................................................................9

Table A.1. Abbreviations.........................................................................................................34

 ix

LIST OF FIGURES

PAGE

Figure 2.1 FireFox screen shot for 100% height......................................................................11

Figure 2.2. Internet Explorer screen shot for 100% height......................................................11

Figure 4.1 Layout screen..........................................................................................................16

Figure 4.2. Header options.......................................................................................................17

Figure 4.3. Body properties. ....................................................................................................18

Figure 4.4 Link and Headings properties.................................................................................19

Figure 4.5. Column properties screen. .....................................................................................19

Figure 4.6. Column properties options. ...................................................................................20

Figure 4.7. Output Files. ..........................................................................................................21

Figure 5.1 Mac OS and Chrome output Screen. ......................................................................26

Figure 5.2. Mac OS and Firefox output screen. .......................................................................27

Figure 5.3. Mac OS and Safari output screen. .........................................................................28

Figure 5.4. Windows7 and IE8. ...............................................................................................29

 x

ACKNOWLEDGEMENTS
My grateful gratitude goes to my Professor Alan Riggins for his generous

encouragement and guidance. Without his support I wouldn't have finished my project. My

special thanks to committee members, Dr. Carl Eckberg and Dr. Roxana Smarandache, for

their support and time.

 1

CHAPTER 1

INTRODUCTION

The number of the Internet users is increasing rapidly. Many people use the Internet

as their main source of knowledge, communication, and online shopping. Recent statistics

show that 1.96 billion of the world's population is using the Internet as of June 30, 2010 [1].

Consequently, websites have become one of the important means of communication

required by companies, organizations, governments, and many individuals as a means of

reaching the largest number of people worldwide.

1.1 BACKGROUND
A web page document consists of two different components. The first part is the

content of the web page document, which has the information that is presented to the visitors.

The information comes in the form of texts, images, videos, or sounds. This part is written by

using Markup language such as eXtensible HyperText Markup Language (XHTML) and

HyperText Markup Language (HTML) which defines the structure of the document (see

Appendix for a list of abbreviations). The second part is the presentation of the document

which controls how the elements in the document are displayed such as the font, background,

and paragraph. This part is written by Cascading Style Sheet (CSS) language, which is a

technique to customize the web pages' layout and control their appearance.

In this project, a cascading style sheet web tool is developed. The main function of

this tool is to create a CSS file and its corresponding XHTML file through a user-friendly

wizard.
 2

1.2 AIM AND OBJECTIVE

There are many available software applications that make creating websites an easy

task. In addition to these applications, there are plenty of tools and utilities that help

developers to do specific tasks. These applications and tools give users an opportunity to

attain a better outcome and enrich the quality of the products with less time and effort.

CSS is a great technique that helps to define the layout and appearance of a website.

Therefore, CSS generator is a practical tool that aids web developers in the web design

process, especially those who write their own code using text editors.

The main objective of this thesis is to explain the importance of Cascading Style

Sheets, how this technique works, and its implications in the web design cycle. This thesis

will also present the CSS tool and the techniques that are used to build it.

1.3 MOTIVATION
Web page layout is an issue that many web designers face. It is often a challenging

task to build a layout that works perfectly with different browsers without adding codes or

using tools. Moreover, most CSS generator tools and applications are either too complex to

use or so overly simple that they don't satisfy user requirements.

The CSS generator tool is a simple and effective web tool to help web developers

who will hand code CSS and XHTML to have better control over the web page.

1.4 THESIS OUTLINE

This thesis is divided into six chapters. In the next chapter cascading style sheets, its

history, and structure is discussed. The following sections will cover markup languages and

their relation to CSS.

 3

Chapter three is a review of some related projects in the web design field. In the first

section, the difference between tool and application is explained. The next sections will

examine some applications and tools that contribute in the website development.

Chapter four will discuss the CSS web tool project and its features. In addition, the

author will demonstrate the technologies that are used to develop this tool.

Chapter five emphasizes the tests that are conducted during tool development and the

outputs of using different browsers.

The last chapter contains the conclusion as well as future improvements of the CSS

web tool.
 4

CHAPTER 2

CASCADING STYLE SHEETS

2.1 HISTORY OF CSS

Although style sheets have been used since the beginning of Standard Generalized

Markup Language (SGML), Cascading Style Sheets were introduced later to clearly

distinguish the presentation of the document from its content. [2]

CSS, HTML, and XHTML are maintained and controlled by the World Wide Web

Consortium (W3C). There are several levels of CSS. Each of them becomes a new version of

the previous one by adding new features and capabilities. The first one was CSS1, which was

published in 1996. CSS1 presents the following features:

 Font properties such as size, type, and other properties

 Text, managing text alignment and applying decorative elements to it for instance
 Backgrounds such as setting the background image for an element
 Color such as setting the background and foreground color for elements
 Block-level elements such as margins, paddings, spaces and borders
The second level of CSS was CSS2, which, in addition to the above features,

possesses new ones. Examples of this are element positioning, visual formatting, and media

types. This version was first introduced in 1998. An update to CSS2 was published in 2002 to

fix some errors in it without adding any new features.

CSS3 is the latest level which comes with a different approach than was introduced in

the last two levels. This level divides the style sheet specifications into small modules instead

of a single large one. This division helps in developing web browsers that are more efficient

and compact. [3]

 5

2.2 HTML VS XHTML

Markup is information we add to a document to process and format the text in order

to produce a distinguishable version of that text. Markup languages specify the code for the

structure and presentation of the document. HTML and XHTML are markup languages that

are used to tell web browsers how to structure and display web pages. [4]

In 1980, a physicist at the CREN Organization released an authoring language

developed for creating and sharing multimedia-enabled integrated electronic document over

the Internet. This was the birth of Hypertext Markup Language (HTML). HTML unified

authors' fragmented collections of pictures, sounds, and text under one document to facilitate

sharing. In addition to that, HTML enabled hypertext linking which automatically links

documents in the web. [5]

Subsequently, many versions of HTML were introduced to improve the accessibility

and usability of the language. The newer versions of HTML focus on the separation of the

presentation from its structure, improving accessibility features, and document rendering, as

well as internationalization features. After Extensible Markup Language (XML) was

introduced, a new version of HTML with XML was needed. EXtensible HyperText Markup

Language (XHTML) was first presented as a new version of HTML 4.0 using XML 1.0. [6]

XHTML syntax is similar to HTML. In spite of the similarity between the two

markup languages, there are some differences between them. XHTML has all the elements in

HTML 4.01, combined with the strict syntax of XML. Since XML is a markup language that

produced "well-formed" documents, XHTML is a more rigorous and cleaner version of

HTML. Elements in the XHTML document must be properly nested and closed. This is not

the case with HTML which not only allows for optional close tags, but also offers the use of
 6

empty tags such line break <br> . [7] Since XHTML is a strict language, it is easier to

maintain, teach, and learn compared to HTML. XHTML is written in a precise code which

makes it more widely used in portable devices like cell phones, PDAs and other mobile

devices with scaled down browsers.

Let's look at an example of a markup code written by HTML and the same code in

XHTML:

This code is accepted as HTML:

<html>
<head>
<title>This is HTML example</title>
<body>
<h1>This is heading
<br>
<p><i>This is a paragraph</p></i>
<img alt=”image” src=”image.jpg”>
</body>

The same example following XHTML rules:

<html>
<head>
<title>This is XHTML example</title>
</head>
<body>
<h1>This is heading </h1>
<p><i>This is a paragraph </i></p>
<br />
<img alt=”image” src=”image.jpg” />
</body>
</html>

One major difference between HTML and XHTML is the DTD or DOCTYPE

statement. DTD stands for Document Type Definition and is used to specify which syntax is

used in the Web page. If you look at the source of an XHTML document the first thing you

will notice is DTD.

 7

There are three types used: strict (that will only validate if you have no deprecated

tags), transitional (which will still validate with deprecated tags), and frameset (which is for a

page that "sets" up "frames"). The three DTD's look like this [8]:

 Strict -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

 Transitional -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 Frameset -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd"> .

2.3 (X)HTML AND CSS

Style sheet is a file related to the document used to define its presentation on screen

or print. CSS is a style sheet that is designed to enable the user with more control over the

layout and the appearance of documents like XHTML and HTML.

The main purpose of CSS is to allow the separation of the (X)HTML webpage format

from its content by placing this format in a different file. By distinguishing the structure from

the presentation, we can easily standardize styles, designs, and layouts of all pages. Thus

providing the ability to maintain these pages in more flexible and efficient way.

There are three different ways to apply a cascading style sheets to (X)HTML

documents: external style sheets, internal style sheets, and inline styles.

Inline style means embedding the style in the body section of the document using a

style attribute. This type of styling is the least preferable by web developers for

implementing style due to the fact that it is less flexible and shifts away from the main

purpose of using CSS which is separating the style from content. However, this style is
 8

useful when we need to apply a different style to the element in a single occurrence. In

general this style is not recommended.

Example of inline style : <h1 style = ”text-align: left” > some text </h1>. [9]

The second type is internal style sheet. This style is embedded in the header section of

the (X)HTML document. It is used when we need to apply a unique style to a single page in

the website. To apply the internal style, <style> tag is used after <head> tag. The following

example is of applying color to the header element in the page:

<head>
<style type =”text/css”>
h1{ text-align:left;}
</style>
</head>

External style sheet is the third and the most recommended type for styling

documents. The style is placed in an external file which, facilitates changing the appearance

of all pages in the website by merely editing one file. The external file can be created using

any text editor and saved with .css extension. In the (X)HTML document we refer to the

external file in the header section of each page of the document. For example :

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

More than one external style sheet can be used in the same document simply by

adding the reference of each style sheet after the head tag as in the example above.

Cascading means applying more than one style rule to a single element in the

document. This creates an order of precedence among rules. The highest level of precedence

that will be applied by the browser and lower ones will be ignored.

Although the inline style is the least preferable type, it has more precedence over

both external and internal style sheets when applying them to elements. Internal style sheet
 9

comes in the second level and the external style sheet comes in the lowest level. This is

called the Abstraction level.

Ownership is another method of determining the order of precedence. The user of the

document has the highest level of precedence, the author comes next, and lastly the browser

specification has the lowest level.

Table 2.1 shows the cascading order in different scales. [10]

Table 2.1 Cascading Precedence Order

Lowest <==========================> Highest

Ownership Browser Defaults User's Style Sheet Author's Style

Sheet

Abstraction level External Style Internal Style Inline Styles

Sheet Sheet

Tag selector specificity Contextual CLASS ID

Selector Quantity

2.4 CSS SYNTAX

CSS is a language that is easy to read and write. A CSS document consists of set of

rules, and each rule consists of selector and its declaration. The selector is the (X)HTML

element that we need to apply style to its properties. The declaration part contains the

property with the assigned value. Declaration can have more than one property separated by

a semicolon. The following is the syntax of a CSS rule: selector { property1 : value ;

property: value; … } , For example to set the body properties we could have the following

rule: body { background-color: blue; color: red; text-align: left; }.

 10

2.5 CSS AND BROWSER ISSUES

Browser compatibility is one of the major problems that faces web developers when

they write CSS. Different browsers possess different specifications, and even some elements

don't exist in one browser and exist in another. Elements occasionally appear different in

different browsers because some browsers don't support all properties. Furthermore, as

explained earlier, if the browser style sheet has a higher precedence for a certain element,

then that style is applied. But because browsers have different style sheet, the final outcome

will differ from one browser to another. This inconsistency in the appearance of the

document formatted by CSS forces web developers to test how the document looks in

different browsers before they deploy it. There are some techniques that are used to solve this

problem and some times more codes are added to the CSS file to overcome this issue.

As an example, the height property of the div element is supported differently by

different browsers. For instance, when we set the height to 100%, Internet Explorer stretches

the div to the content inside it. On the other hand, Firefox gives the full screen height to that

div. To solve this problem there are few different tricks. One of these is to simply set the

height of the body and any root elements to 100%. [11]

Figures 2.1 and 2.2 show how the same page appears in IE and Firefox.
 11

Figure
Figure
2.12.1.
FireFox
FireFox
screen
screen
shotshot
for for
100%100%
height
height.

Figure
Figure
2.12.2.
FireFox
Internet
screen
Explorer
shot for
screen
100%shot
height
for 100% height.
 12

CHAPTER 3

RELATED WEB APPLICATION AND TOOLS

3.1 DIFFERENCE BETWEEN APPLICATION AND TOOL

Software is a collection of applications that tells the computer what to do. It comes in

different types. An application contains many different parts that perform individual tasks

and work together to construct an entire system. This system works as one piece. On the

other hand, a software tool is either a single component of the software application that

serves specific function in the program, or it could be a small program that supports,

maintains, or debugs another program.

Software tools have great benefits to computers. They protect computers from

crashing, keep them running accurately, and make sure that memory is being used efficiently.

Another benefit of software tools is to protect important data for business and personal

computers. People often forget to save their data to other removable storage disks. Software

tools decrease the potential of losing important information and increase the performance of

the computer itself. [12]

3.2 WEB DESIGN APPLICATIONS

Web design is creating websites with contents intend to reach end-user through the

World Wide Web. The final outcome is displayed to the public by web browser such as

Internet Explorer(IE), FireFox, Opera, Safari, and many other software. The content of the

website could be texts, images, audios, and videos. Contents could be static or interactive.

When you design a website, you should be aware of the basic aspects of design:
 13

 Web page content: The substance, and information you include in your site should be
related to the site and the area of the public that the website is concerned with.
 The usability: Make your website user-friendly and easy to navigate.
 The appearance: The graphics and text should include a single style that flows
throughout, to show consistency. The style should be professional, appealing and
relevant.
 The structure: of the web site as a whole.[13]
The following applications create websites dynamically to users without necessarily

mastering (X)HTML and CSS syntax.

3.2.1 Adobe Dreamweaver

Adobe Dreamweaver is a commercial web editor application to create a standard-

based websites. Also known as Macromedia Dreamweaver. The editor is a What-You-See-Is-

What-You-Get (WYSIWYG) web editor, which means the design you see in the screen is what

the visitors of the website will see. Dreamweaver has coding tools for HTML, XHTML,

XML, CSS ,and JavaScript. It also has a code editor where you can easily edit your code.

[14]

Although, this application is a powerful and rich, users need some time to get familiar

with its features. Another limitation in this application is the accessibility over the internet.

Since Dreamweaver is a desktop application, you should download it in order to use it. Not to

mention its price which is close to $ 400. Moreover, Dreamweaver is not supported in all

operating systems like Unix and Linux.

3.2.2 Microsoft Expression Web

Microsoft Expression Web is the new version of Microsoft Front page. It is software

for creating standard-based websites with CSS based layout. Similar to Dreamweaver, this

software is a WYSIWYG HTML editor. Microsoft Expression Web is a commercial

 14

application. It is designed mainly to create ASP.NET documents. In addition to that, it

supports XHTML with CSS. The User interface is similar to Adobe Dreamweaver.

Microsoft Expression has some limitations similar to Adobe Dreamweaver. Users

need to learn this application and be familiar with it is features before using it. Although it’s

cheaper than Dreamweaver, it is quite expensive. Limited accessibility is another

disadvantage of Expression because the application is desktop software that is supported by

windows operating system only.

3.2.3 Amaya
Amaya is a W3C web editor and browser used to create a web-standard web page. It

is a free WYSIWYG web application. This app was developed to provide a framework that

can integrate with W3C technologies. It started with HTML and CSS, and it now supports

XHTML, MathML and SVG. [15]

Amaya web editor has great features and is supported by Macintosh, Linux, Unix and

Windows. However since it is still free web app, there is a lot of stability and usability

issues. And it doesn't have built-in FTP support.[16]

3.3 WEB DESIGN TOOLS

Designing a website is an easier job as a result of new technologies that become

available. These technologies spare the developer both time and effort to produce more

efficient websites.

There are many web design tools, each one of which does a specific task in the design

process. Some of the tools are free which make it even more convenient for developers.

Below are some tools that are useful and reliable.

 15

1. Firebug: A free web development tool that comes as an extension of Firefox web
browser. This tool facilitates debugging and editing HTML and CSS. It also has a
Console for logging, analyzing and debugging JavaScript, and an inspection tool for
Document Object Model (DOM).
2. Web developer extension: Another great extension tool of Firefox web browser. It
helps with validating your XHTML document. It also facilitates debugging JavaScript
and CSS by displaying warnings and errors in the error console. This tool also fills
out web forms to help in testing. As well as having more functionality.
3. Google Web Toolkit (GWT): A free and open source tool that is used in building and
optimizing complex browser-based applications. The main function of this tool is to
help individuals with minimum experience in browser quirks, XMLHttpRequest, and
JavaScript. In addition, it is used to build productive and high-performance web
applications.
4. IE developer tool: The Microsoft version of Firefox web developer extension. It has
mainly the same features available in web developer tool. This tool is free for IE 6
and 7.
5. ColorZilla: A simple tool and very useful. It is an extension of Firefox browser and
used as an eyedropper, color picker and color palette browser.
 16

CHAPTER 4

CSS WIZARD AND TECHNOLOGIES USED

This chapter demonstrates the CSS web tool project and technologies that are used to
build it.

4.1 CSS GENERATOR WIZARD

CSS generator wizard tool is a simple tool written by XHTML, CSS, and JavaScript

to build the form and the wizard in which the end-user can put his selection. In conjunction,

PHP script is used to process user selection and creates the CSS and XHTML files.

The wizard starts with specifying user's layout selection as shown in Figure 4.1.

Figure
Figure
4.1 Layout
4.1. Layout
screen
screen.

The first selection is a drop down menu for the Doctype of the XHTML file. There

are three options: Strict, Transitional, or Frameset. For more information about XHTML
 17

doctype, refer to chapter 2. The second selection is the page alignment, i.e., full page,

centered page, or left aligned page. With the last two options the user can set the width of the

page compared to the full page. The third selection is the body background color, which is

selection is useful when the page alignment is center or left page alignment. The rest of the

selections are the website layout div elements. The wizard gives the user the option to choose

up to 3 columns and header and footer for the webpage. When the user check a selection, the

wizard will give options to set the height or width, and the background color of the div.

As shown in Figure 4.2, the options become visible when the check box is selected. In

this example the height option is available.

Figure 4.2. Header options.

The second dialog box in CSS wizard is for body properties. Figure 4.3 shows a

screen shot of that dialog box.

In body properties, the user can set the body background properties by choosing a

background image, selecting the position of the image and whether it is repeated or not.

Font properties have default values. User can change them to his own preference.

Link and heading are optional selections which expand for the user to provide more specific

options.

In the link selection, the user has the option to set the link state properties. The wizard

offers three state settings: the link state which is how the hyperlink text appears when page
 18

Figure 4.3. Body properties.

first loaded, The visited state which is how it is displayed when hyperlink is clicked, and the

hover state which is how text appears when mouse hovers over the link. The default setting is

provided for each state, but the user always has the option to change them to his preferred

setting.

For heading, the user has the option to set h1 to h3 properties. Figure 4.4 shows the

expanded options for both link and headings.

The third dialog box is for setting the properties of paragraph and list in the columns.

Since the main column is always available, the selection for that div is always shown. For the

left and right columns, the selections to set their properties are shown if they are part of user

selection in the first dialog box. Otherwise their selection will be hidden by default. Figure

4.5 shows third dialog when the user selects to have two columns, main and left.

Users can expand the selections for column properties or can simply ignore them. If

(s)he chooses to set the properties for the paragraph and list, then the option will be available.

The default setting is provided and the user can change them.
 19

Figure
Figure
4.44.4.
LinkLink
andand
Headings
headings
properties
properties.

Figure 4.5. Column properties screen.

 20

Figure 4.6 shows the last step in CSS generator wizard. The user can still go back and

change insertions, or reset the whole wizard. If user is satisfied with insertions, then the

create button will execute the PHP script to build the output files. Output files are: the

XHTML file with doctype selection and divs of the layout selections, the CSS file which

include code correspondent to user insertions, and if user uploaded any image as a

background.

Figure 4.6. Column properties options.

Figure 4.7 shows the output files where user can check them or save them.

4.2 TECHNOLOGIES USED

CSS project was built using some web application languages. The following sections
talks about these languages.
 21

Figure 4.7. Output files.

4.2.1 XHTML
XHTML 1.0 transitional language was used to construct the webpage form wizard.

For more details about this markup language please refer to (section 2.3) in this thesis.

4.2.2 CSS
CSS stands for Cascading Style Sheets. CSS was used to style the form wizard. CSS

was explained in detail in chapter 2.

4.2.3 JavaScript
JavaScript is a scripting language which is used to add dynamic functionality to web

pages written by markup languages. It is a client-side language, that means it can run in the

client's computer with no need of network connection. It is also an interpreted language

which means it does not need a separate program to execute it. JavaScript code is embedded

within the XHTML/HTML document, so that when the page is loaded into the web browser,

the JavaScript code is translated by the client's machine. [17]

JavaScript is not a difficult language to learn. In addition, it is a loosely typed

language which means that you can use variables in the syntax for any type of data. This

makes it even easier for a non-programmer to use it.

Moreover, JavaScript is an object-oriented language in which the webpage and any

element included are objects and their attributes are the properties. For example, to set the
 22

background color of any element in the document using JavaScript we can access it by:

document.getElementById(element id).style.background-color= value;

Many people confuse JavaScript language with Java. In fact, they are totally different

languages except for naming convention. The syntax of JavaScript code is similar to C. The

following is an example of simple JavaScript code for a button that gives message when it is

clicked:

<form>
<input type="button" onclick= "alert('Hello World')" value="Click Me">
</form>

In this project, JavaScript was used to make CSS form wizard more dynamic and

interactive with users. For example, the selection of checked boxes controls the presence of

the hidden options. When it is checked; more options are displayed which enables the user to

set them as was shown in Figure 4.2. As for columns selection, the checked check box

displays the column properties in the column properties section. JavaScript is also applied to

add some functionality to the reset function, such as resetting the color input box and hiding

option boxes for selections.

4.2.4 JQuery
JQuery is a compact JavaScript Library that makes the HTML dynamic and adds cool

features on to it. It simplifies document traversing, event handling, animating and Ajax

interactions. Furthermore, JQuery enables developers to construct plugin with the JavaScript

library to create powerful html documents.[18]

To use JQuery you need first to add the JQuery library to your webpage, this is

simply done by adding the following line to the head section of the XHTML/HTML :
 23

<script type="text/javascript" src="jquery.js"></script>

You can alternatively use hosted JQuery library from Google or Microsoft. The

following is an example of basic JQuery “hide method” to hide <p> element when button is

clicked [19]:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

JQuery is applied to build an interactive wizard from the regular XHTML form. This

will make it easier for the user to use the multi step form. Moreover, the user can go back to

change his entries before submitting them. JQuery color picker plugin was added to the

wizard to give dynamic color input fields.

4.2.5 PHP
PHP stands for Hypertext Preprocessor. It is a server-side scripting language which

means that code is executed in the server and then sent to the client. PHP is used so widely in

web development for writing dynamically generated pages quickly. It can be embedded into

HTML code. PHP has a syntax influenced by C, Java, and Perl with some specific features.

[20]
 24

PHP has some unique features that makes it preferable over other server-side

scripting. When it comes to performance, PHP scripts are faster. PHP is also portable

between platforms and runs in different operating systems. PHP syntax is clear and consistent

and that makes it a sophisticated and ease to use language. Additionally, it is an open source

project and it is supported by wide range different databases like MySQL, Oracle and

Microsoft SQL Server. [21]

PHP can retrieve information passed by (X)HTML. And it can generate documents

and send them back to clients or save them in the server.

In CSS wizard, information regarding user selections such as, XHTML doctype,

layout of the page, and properties of the elements are sent to PHP file in the server. PHP will

then process the information that are received to generate CSS and XHTML documents.

PHP scripts starts with <?php and ends with ?>. This is an example of simple php

code to print out Hello World:

<?php
echo “Hello World” ;
?>
 25

CHAPTER 5

TEST AND RESULTS

Testing was done through the development phase. It was applied with every single

element or functionality added to the tool. This helped to simplify the final test.

The CSS wizard was mainly developed in Mac OS. Mozilla FireFox 3.6.16 was used

to test and display the web tool during the development phase. Continued testing was applied

to check the web tool compatibility to different web browser like Safari, Internet Explorer

and Google Chrome. Furthermore, the CSS tool has been tested for platform compatibility

with Mac OS and Windows7 using the same web browsers. Another testing was applied to

check the output files. This was the most important test because it was the main objective of

building this tool. This test was conducted using two platforms, Mac OS and Windows7, and

the following web browsers: Mozilla FireFox 3.6.16, Safari 5.0.3, Internet Explorer 8.0 and

Google Chrome.

The following Figures show the output XHTML with the following inputs:

Page alignment is centered with 80% width, header is 50px height, left column is 20% width,

right column is 20% width, main column is 80% height and footer is 20px height.

The main column shows how the heading will appear in the website, left column and right

column show how both ordered and unordered lists look in these columns. Many properties

that user can still choose were not used in this testing.
 26

Operating system Mac OS:

 Figure 5.1 with Google Chrome browser:

Figure 5.1 Mac OS and Chrome output screen.

 27

Operating System: Mac OS

 Figure 5.2 with Firefox browser:

Figure 5.2. Mac OS and Firefox output screen.

 28

Operating System: Mac OS

 Figure 5.3 with Safari browser:

Figure 5.3. Mac OS and Safari output screen.

 29

Operating System: Windows 7

 Figure 5.4 with Internet Explorer 8.0 browser

Figure 5.4. Windows7 and IE8.

 30

CHAPTER 6

CONCLUSION AND FUTURE IMPROVEMENT

This Thesis presents the CSS generator wizard web tool as a helpful tool for web

developers who hand code the CSS and (X)HTML. As with any web tool, CSS wizard tool

saves both time and efforts by simply following easy steps to create the desired CSS and

XHTML files. This tool builds the website layout by enabling the user to choose the Doctype

for the XHTML webpage and the page structure. The page structure consists of number of

columns, header and footer. The user can specify the width and the height for the layout

structure. Then the user can set the properties of the body and columns of the website.

This work covers the most required CSS options by web developers. In future

versions, it can be improved to cover more options. For instance, in this version the

maximum number of columns which can be created by using this tool is three. Therefore,

The future versions can give more number of columns and layout options. Another

enhancement objective is to provide more properties for the columns such as tables and

forms. Menus also can be added as some developers could require it.
 31

BIBLIOGRAPHY

[1] Internet World Stats. World Internet Usage Statistics News and World Population
Stats, n.d. http://www.internetworldstats.com/stats.htm, accessed: Apr. 9, 2011.
[2] XML UK: A Forum for SGML and XML Users and Developers. CSS History &
Information, 2008. http://www.xmluk.org/css-history-information.htm, accessed:
April. 9, 2011.
[3] P. Carey. New perspectives on HTML and XHTML. 5th ed., Cengage Learning,
Florence, KY, 2008.
[4] T. A. Powell. HTML & XHTML: The complete reference. 4th ed., McGraw-Hill
Osborne Media, New York, NY, 2003.
[5] C. Musciano and B. Kennedy. HTML & XHTML: The definitive guide. 6th ed.,
O'Reilly Media, Inc., Sebastopol, CA, 2006.
[6] W3Schools Online Web Tutorials. XHTML Tutorial, n.d.
http://www.w3schools.com/xhtml, accessed April 22, 2011.
[7] The Web Standards Project. HTML Versus XHTML, 2003.
http://www.webstandards.org/learn/articles/askw3c/oct2003/, accessed April 30,
2011.
[8] Htmlfixit.com. XHTML vs. HTML, n.d.
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml,
accessed April 22, 2011.
[9] S. Collison. Beginning CSS web development: from novice to professional. Springer
Verlag New York, Inc., New York, NY, 2006.
[10] B. Wilson. What 'Cascading' Means. University of Toronto, n.d.
http://www.cs.toronto.edu/~darrell/csc104h/html/style/cascade.htm, accessed April
30, 2011.
[11] TutWow. Quick Tip: CSS 100% Height, 2008.
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/, accessed May 14, 2011.
[12] Super Web Group. What Do Software Tools Do?, n.d.
http://www.superwebgroup.com/what-do-software-tools-do/, accessed April 24,
2011.
[13] Wikipedia. Web design, 2011. http://en.wikipedia.org/wiki/Web_design, accessed
April 24, 2011.
[14] Adobe. Web design software, HTML editor | Adobe Dreamweaver CS5.5, n.d.
http://www.adobe.com/products/dreamweaver.html, accessed May 9, 2011.
[15] World Wide Web Consortium (W3C). Amaya, 2010. http://www.w3.org/Amaya/,
accessed April 30 2011.
 32

[16] C. Heng. The Site Wizard. 2008. http://www.thesitewizard.com/reviews/amaya.shtml,

accessed April 30, 2011.
[17] E. Gandy and S. Stobart. JavaScript: Creating dynamic web pages. Lexden
Publishing Limited, Colchester, Essex, 2005.
[18] JQuery. JQuery: Write Less Do More, 2010. http://jquery.com/, accessed April 28,
2011.
[19] W3Schools. JQuery Tutorial, n.d. http://www.w3schools.com/jquery, accessed April
28, 2011.
[20] PHP Group. PHP: Hypertext Preprocessor, n.d. http://www.php.net, accessed April
28, 2011.
[21] V. Vikram. PHP: A beginner's guide. McGraw-Hill Osborne Media, New York, NY,
2008.
 33

APPENDIX

ABBREVIATIONS
 34

Table A.1. Abbreviations

CSS Cascading Style Sheet

CREN European Organization for Nuclear Research

DTD Document Type Declaration

HTML Hypertext Markup Language

IE Internet Explorer

PHP Hypertext Preprocessor

SGML Standard Generalized Markup Language

SQL Structured Query Language

W3C World Wide Web Consortium

XHTML Extensible HyperText Markup Language

XML Extensible Markup Language