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