APPENDIX 1, SGML/XML:

HOW TO WRITE CSS STYLE SHEETS







CONTENTS


* Style Sheet in an External File
* Defining Styles in the Head of the Document
* Defining Styles In-Line
* Importing an External Style Sheet

* "CSS Positioning"






The Netscape Navigator/Communicator 4.0 web browser, and the Microsoft Internet Explorer 4.0 web browser, both have CSS1 capability. (However, according to the W3C, "there are some disparities where CSS1 features have not been fully or correctly implemented.")

CSS are the style sheets generally associated with HTML documents. However, the XML in Microsoft's Internet Explorer uses CSS, rather than XSL style sheets. Netscape Navigator/Communicator 5.0's XML, due out later this year, will also use CSS to convert XML data into HTML display, but Netscape says that they are working to integrate XSL into the browser as soon as possible.

A condensed version of W3C's CSS1 spec can be found in the tutorial "Get Started With Cascading Style Sheets," by Matt Rotter and Charity Kahn, at http://www.cnet.com/Content/Builder/Authoring/CSS/
The authors list the most important information about each CSS property and its available values. This "CSS Reference Table" can be accessed directly, at http://builder.cnet.com/Authoring/CSS/table.html






STYLE SHEET IN AN EXTERNAL FILE
(Linking To An External Style Sheet)


Information about the remote/external style sheet is placed (by you) somewhere within the <head> region of your HTML document. In particular, the URL ("internet address") of the style sheet is specified in an "href" attribute. This allows the style sheet to be located either on the same machine as your web site, or anywhere in the world.

Linking to an external style sheet is the most efficient way to ensure that each web page on a web site conforms to a specially-designed style or layout. (That is, only one style sheet needs to be written, and each web page on the site simply links to that one style sheet.)


An HTML file (World Wide Web page), having filename "test1.html": 


        <html>


        <head>
        <title>Just a Test!</title>
        <link rel=stylesheet type="text/css" href="style1.css">
        </head>

	<body>


	<h1>Welcome</h1>

	Please click
	  <a href="http://www.sdsu.edu">here</a>
	for SDSU's web page.


	</body>

	</html>


A CSS file, filename "style1.css": 


	A:link  { color: red;
                background: green;
                text-decoration: none; }


	A:visited  { color: black;
                   background: red;
                   text-decoration: none; }


	H1  {font:80pt Verdana, Arial;color:#00FF00;font-weight:bold;}

(Notice that styles can be listed on multiple lines, or in a single line.)


In the style sheet above,

"A:link" sets the style for hypertext links which have not yet been visited by the user.
"A:visited" sets the style for hypertext links which have been visited.

The "text-decoration:none" removes the underline that normally accompanies hypertext links.
The "background:" puts an appropriately-colored rectangle behind the associated text.







DEFINING STYLES IN THE HEAD OF THE DOCUMENT


An HTML file, filename "test2.html": 


        <html>


        <head>
        <title>Just a Test!</title>
<style>
or
<style type="text/css">
or
Netscape's <style type="text/javascript">
        H1 { font:80pt Verdana, Arial; color:#FF0000; font-weight:bold; }
        </style>
        </head>

        <body>

 
        <h1>Welcome</h1>

        Please click
          <a href="http://www.sdsu.edu">here</a>
        for SDSU's web page.

 
        </body>

        </html>






DEFINING STYLES IN-LINE 




   ...
   <body>
   ...

   <H3 style="font-family: Arial; font-style: italic; color: green">
   This is green, italic, Arial H3-sized header
   </H3>

   <H3>And this is a normal H3-sized header</H3>

   ...
   </body>
   ...



EXAMPLE:

In Chapter 4.3, the words "TRY IT NOW!" were printed in blinking red text on a yellow background. This effect was accomplished by using in-line style commands to (temporarily) modify the characteristics of the <H3> header tag. 

<h3 style="color:#FF0000; text-decoration:blink; background:#FFFF00;">TRY IT NOW !</h3>






IMPORTING AN EXTERNAL STYLE SHEET


You can also merge an external style sheet into an HTML document with CSS's @import function.

"Note: the @import command is buggy in both Navigator/Communicator 4.0 and MS Internet Explorer 4.0. Until the bugs are ironed out, we recommend you stick with the <link> tag."
(The <link> tag was discussed earlier, at the top of this web page.)

The <link> tag lets you use only one style sheet, whereas @import lets you merge as many external style sheets as desired. 


        <html>

        <head>
        <title>Just a Test!</title>          
        <style type="text/css">
        @import url("basic.css")
        </style>
        </head>

        ...






CSS POSITIONING


"CSS positioning is already supported by both Netscape Navigator 4.0 and Microsoft Internet Explorer 4.0."


Example:
H1 { position: absolute; top: 150px; width: 200px; height: 200px }

Will place <H1> header text inside a box which is 150 pixels from the top of the page and is 200 pixels wide by 200 pixels high.


Example:
A better example uses in-line styles and <DIV> and <SPAN> tags.

<DIV style="position:absolute; top:150px; width:200px; height:200px; background-color:red"> This text would be displayed in a red 200-by-200-pixel box which is 150 pixels from the top of the window.<DIV>



BACK TO: Project #1, Table of Contents
Current page was last modified/altered on: 8-31-98