Chapter W9. Using Styles Sheets

Chapter W9. Using Styles Sheets

*"Hopefully, future Web innovations will emulate the example set by the Web Consortium in its work on CSS"*
*-- Jakob Nielsen*
Goals for this chapter: Using Styles Sheets Link your styles Embedded Styles CSS1, CSS2 and CSS3 Layers	rpm packages covered in this chapter: httpd (apache)

In this chapter we will introduce two new concepts: Style Sheets and layer. These new HTML elements allows to positionate HTML components in a specific page location: code, images, and other HTML stuff.

Using Styles Sheets.

The W3.ORG, the World Wide Web, fix a simple definition for Style Sheets:
"Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994."

You can check this definition at: http://www.w3.org/Style/

Why Style Sheets? The answer is because they are necessary to create a better look and control your code in a simple and effective mode.

A simple and intuitive mode to understand Styles and in particular Cascading Style Sheets is reading the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>CSS1 Test Suite: CSS1 vs. CSS2</TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet" type="text/css" media="screen" href="base.css">
<STYLE type="text/css">
UL.CSS2 {max-width: 70%; background-color: silver;}
LI {margin: 0.25em;}
LI:first-child {color: green;}
LI[class] {color: green;}
LI[class="green"] {color: green;}
LI[class~="green"] {color: green;}
LI#test1 > EM {color: green;}
LI#test2:after {content: "*"; color: green;}</STYLE>

</HEAD>

<BODY>
<H2>CSS1 Test Suite: CSS1 vs. CSS2</H2>

<HR>
[<A HREF="sec02.htm">Previous</A>] [<A HREF="sec04.htm">Next</A>] [<A HREF="sec00.htm">Section</A>] [<A HREF="index.html">Contents</A>] [<A HREF="http://www.w3.org/TR/REC-CSS1#forward-compatible-parsing">Specification</A>]<BR>
<HR>
<P>
This page is intended to give some idea of how much support your user agent has for both CSS1 and CSS2. These are not intended to be normative tests, but instead indicators of what to expect further on in the test, and where potential confusion may arise. Note that just because a user agent passes the following tests, it cannot be assumed to have full support for either CSS1 or CSS2.
</P>
<P>
Following are some CSS1 tests:
</P>
<UL style="background-color: silver;">
<LI style="font-family: sans-serif; color: black;">This list item should be in a sans-serif font, and all list items should have a quarter-em margin.</LI>
<LI style="text-decoration: underline;">This list item should be underlined.</LI>
<LI style="color: green;">This list item should be green in color.</LI>
<LI style="background-color: green;"> This list item should have a green background.</LI>
<LI style="border: 1px solid green;">This list item should be surrounded by a one-pixel solid green border.</LI>
<LI style="display: none;">This list item should <EM>not</EM> be visible.</LI>
</UL>
<P>
If your user agent did not display the above list as described, or seemed to have trouble with some of the display, then it does not have complete CSS1 support. (Even if it did render the list correctly, it may not have complete CSS1 support.)
</P>
<P>
Following are some CSS2 tests:
</P>
<UL class="CSS2">
<LI>This list item should be green, the list itself should be no more than 70% the width of its parent element, and all list items should have a quarter-em margin.</LI>
<LI class="green">This list item should be green.</LI>
<LI class="green item">This list item should be green.</LI>
<LI ID="test1">This list item should be black, but the <EM>emphasized text</EM> should be green.</LI>
<LI ID="test2">This list item should be black, and followed by a green asterisk.</LI>
<LI style="font-stretch: ultra-expanded;">This list item should have an ultra-expanded font.</LI>
<LI style="text-shadow: 2px 2px 1px white;">This list item should have a white text-shadow. In addition, there should be a blank space following it which is the size of a single list item, since the next list item has been set to have a visibility of <TT>hidden</TT>.</LI>
<LI style="visibility: hidden;"><STRONG>This list item should <EM>not</EM> be visible.</STRONG></LI>
</UL>
<P>
If your user agent did not display the above list as described, or seemed to have trouble with some of the display, then it does not have complete CSS2 support. (Even if it did render the list correctly, it may not have complete CSS2 support.)
</P>

Here for example we have:

<LI style="font-family: sans-serif; color: black;">This list item should be in a sans-serif font, and all list items should have a quarter-em margin.</LI>

With this mode we can fix in advance, like a template, what may be the page behaviour, about fonts,

The Official Guide for the CSS1 is available at http://www.w3.org/TR/REC-CSS1

We list here some elements to introduce the CSS features.

5.2         Font properties
5.2.1         Font matching
5.2.2         'font-family'
5.2.3         'font-style'
5.2.4         'font-variant'
5.2.5         'font-weight'
5.2.6         'font-size'
5.2.7         'font'
5.3         Color and background properties
5.3.1         'color'
5.3.2         'background-color'
5.3.3         'background-image'
5.3.4         'background-repeat'
5.3.5         'background-attachment'
5.3.6         'background-position'
5.3.7         'background'
5.4         Text properties
5.4.1         'word-spacing'
5.4.2         'letter-spacing'
5.4.3         'text-decoration'
5.4.4         'vertical-align'
5.4.5         'text-transform'
5.4.6         'text-align'
5.4.7         'text-indent'
5.4.8         'line-height'
5.5         Box properties
5.5.1         'margin-top'
5.5.2         'margin-right'
5.5.3         'margin-bottom'
5.5.4         'margin-left'
5.5.5         'margin'
5.5.6         'padding-top'
5.5.7         'padding-right'
5.5.8         'padding-bottom'
5.5.9         'padding-left'
5.5.10         'padding'
5.5.11         'border-top-width'
5.5.12         'border-right-width'
5.5.13         'border-bottom-width'
5.5.14         'border-left-width'
5.5.15         'border-width'
5.5.16         'border-color'
5.5.17         'border-style'
5.5.18         'border-top'
5.5.19         'border-right'
5.5.20         'border-bottom'
5.5.21         'border-left'
5.5.22         'border'
5.5.23         'width'
5.5.24         'height'
5.5.25         'float'
5.5.26         'clear'
5.6         Classification properties
5.6.1         'display'
5.6.2         'white-space'
5.6.3         'list-style-type'
5.6.4         'list-style-image'
5.6.5         'list-style-position'
5.6.6         'list-style'

Not all the browsers support Styles. Check if your browser is supported: http://www.w3.org/Style/CSS/#browsers. Generally Linux browser works fine.

Therefore styles, are a new mode to create and positionate code in HTML files. In the previous chapters we introduce how to positionate code and images using Tables. Check CSS1, CSS2 and CSS3 section below.

How we can see in the previous example a style define a font, a color and a size

<HTML>
           <HEAD>
                      <TITLE>title</TITLE>
                      <LINK REL=STYLESHEET TYPE="text/css"
                        HREF="http://style.com/cool" TITLE="Cool">
                      <STYLE TYPE="text/css">
                        @import url(http://style.com/basic);
                        H1 { color: blue }
                      </STYLE>
          </HEAD>
         <BODY>
                      <H1>Headline is blue</H1>
                      <P STYLE="color: green">While the paragraph is green.
        </BODY>
</HTML>

Examples about HTML Style results are available in Web ... we present the public HTML page at CNN.COM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>CNN.com - Entertainment</title>

        <SCRIPT src="http://i.cnn.net/cnn/virtual/2000/code/main.js" language="javascript">
</SCRIPT>
        <LINK rel="stylesheet" href="/virtual/2000/style/main.css" type="text/css">
        <LINK rel="stylesheet" href="http://i.cnn.net/cnn/virtual/2001/style/rd.css" type="text/css">
        <SCRIPT language="JavaScript" type="text/javascript">
                

</SCRIPT>
        <LINK rel="stylesheet" href="/virtual/2000/style/entertainment.css" type="text/css">
        
</head>
<body bgcolor="#FFFFFF">
<a name="top_of_page"></a>
<a href="#ContentArea"><img src="http://i.cnn.net/cnn/images/hub2000/1.gif" hspace="0" vspace="0" width="10" height="1" border="0" alt="Skip to main content" align="right"></a>


<table width="770" border="0" cellpadding="0" cellspacing="0">
        <tr>
                <td colspan="4">
<SCRIPT Language="Javascript">
tophat=("<IFRAME SRC=\"http://toolbar.netscape.com/tw_hat/iframe/cnn.html\" WIDTH=\"100%\" FRAMEBORDER=\"0\" HEIGHT=\"26\" MARGINHEIGHT=\"0\" MARGINWIDTH=\"0\" SCROLLING=\"no\">\n");
middlehat = "";
bottomhat=("\n<\/IFRAME>\n");
</SCRIPT>
<SCRIPT Language="Javascript" SRC="http://toolbar.netscape.com/toolbar.twhat?template=ua_dt&dom=cnn">
</SCRIPT>
...

We can also find web sites where different sizes

<BASE HREF="http://www.style.com/">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="keywords" content="STYLE, style, style.com, vogue,
Vogue, vogue magazine, W, w magazine, fashion, models, runway, supermodels, catwalk, prada, calvin klein, gisele">
<meta name="description" content="Style.Com">
<META NAME="AUTHOR" CONTENT="Benjamin Sternthal, Akemi Shimizu, Dell Davis, Michael Mertens">
<title>STYLE.COM</title>
<style type="text/css">

</style>
...

Link your styles

The HTML Language allows you to use the remote (on the Web) or local Styles.

The code to use this remote styles is possible using the Link Tag.

Exactly:

<HEAD>
<TITLE>A Document that load styles sheets</TITLE>
<LINK REL=STYLESHEET HREF="MySite/MyStyle.css">
</HEAD>

<HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Apple</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="PICS-Label" CONTENT='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" for "http://www.apple.com" on "1999.12.29T20:06-0800" r (n 0 s 0 v 0 l 0))'>
<META NAME="keywords" CONTENT="Apple Computer, Power Macintosh, PowerBook, AppleWorks, WebObjects, iMovie, QuickTime, Desktop Movies, Software, Operating Systems, Mac OS, iMac, iBook">
<META NAME="Description" CONTENT="Visit www.apple.com for the latest news, the hottest products, and technical support resources from Apple Computer, Inc.">
<META HTTP-EQUIV="Expires" CONTENT="Fri, 26 Mar 1999 23:59:59 GMT">
<META NAME="Date.Modified" CONTENT="19992109">
<LINK REL="home" HREF="http://www.apple.com/">
<LINK REL="index" HREF="http://www.apple.com/find/siteindex.html">
<LINK REL="find" HREF="http://www.apple.com/find/">
...

The concept is very simple. You have a remote style that you want to link in your HTML page or you want to use.

However, is also possible to have to choose the mode how the remote style affect the local page.

The REL attribute specify what is the relationship between the local page and the remote style.

Some examples about REL are:

REL=STYLESHEET
REL="HOME"

Netscape on Linux works fine with Styles, you need to check this with old or non-linux browsers.

Embedded Styles

Another mode to load a style is the embedded mode.

This means that you simply add the Style code in the

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso8859-1" />
<TITLE>Welcome to Microsoft's Homepage</TITLE>
<META http-equiv="PICS-Label" content="(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" by "inet@microsoft.com" for "/" on "1997.06.30T14:21-0500" r (n 0 s 0 v 0 l 0))" />
<META NAME="KEYWORDS" CONTENT="products; headlines; downloads; news; Web site; what's new; solutions; services; software; contests; corporate news;" />
<META NAME="DESCRIPTION" CONTENT="The entry page to Microsoft's Web site. Find software, solutions and answers. Support, and Microsoft news." />
<META NAME="MS.LOCALE" CONTENT="EN-US" />
<META NAME="CATEGORY" CONTENT="home page" />
<STYLE TYPE="text/css">

</STYLE>
<script language="JavaScript">
...
<SPAN ID="TBDownLevelDiv">
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0" BGCOLOR="#FFFFFF">
<TR>
<TD VALIGN="TOP" HEIGHT="60" ROWSPAN="2"><A HREF="/isapi/gomscom.asp?target=/" TARGET="_top"><IMG SRC="/library/homepage/images/ms-banner.gif" WIDTH="250" HEIGHT="60" ALT="Microsoft Home" BORDER="0" /></A></TD>
<TD VALIGN="TOP" HEIGHT="20" ALIGN="RIGHT"><IMG SRC="/library/toolbar/images/curve.gif" WIDTH="18" HEIGHT="20" ALT="" BORDER="0" /></TD>
<TD BGCOLOR="#000000" HEIGHT="20" VALIGN="MIDDLE" ALIGN="RIGHT" NOWRAP="" COLSPAN="2">
<FONT COLOR="#FFFFFF" FACE="Verdana, Arial" SIZE="1">
<B>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/catalog/default.asp?subid=22" TARGET="_top"><FONT COLOR="#FFFFFF">All Products</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/support/" TARGET="_top"><FONT COLOR="#FFFFFF">Support</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gosearch.asp?target=/us/default.asp" TARGET="_top"><FONT COLOR="#FFFFFF">Search</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/" TARGET="_top"><FONT COLOR="#FFFFFF">microsoft.com Home</FONT></A> 
 
</B>
</FONT></TD>
</TR>
<TR>
<TD VALIGN="TOP" HEIGHT="40" WIDTH="19"><IMG SRC="/library/images/gifs/homepage/1ptrans.gif" WIDTH="19" HEIGHT="40" ALT="" BORDER="0" /></TD>
</TR>
<TR>
<TD BGCOLOR="#0099FF" HEIGHT="20" VALIGN="MIDDLE" NOWRAP="" COLSPAN="4">
<FONT COLOR="#FFFFFF" FACE="Verdana, Arial" SIZE="1"><B>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/" TARGET="_top"><FONT COLOR="#FFFFFF">Home</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/usa/events/default.asp" TARGET="_top"><FONT COLOR="#FFFFFF">Events/Training</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/goregwiz.asp?target=/regsys/pic.asp?sec=0" TARGET="_top"><FONT COLOR="#FFFFFF">Subscribe</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/mscorp/" TARGET="_top"><FONT COLOR="#FFFFFF">About Microsoft</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/worldwide/" TARGET="_top"><FONT COLOR="#FFFFFF">US/Worldwide</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/downloads/" TARGET="_top"><FONT COLOR="#FFFFFF">Downloads</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/goregwiz.asp?target=/contactus/contactus.asp" TARGET="_top"><FONT COLOR="#FFFFFF">Contact Us</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
 
 
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="http://msn.com/" TARGET="_top"><FONT COLOR="#FFFFFF">MSN.com</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>
</B></FONT></TD>
</TR>
</TABLE>
</SPAN>

He we can observe the use of the Tag Classes.

For example we can create a class with A: link tag

Valid examples are:

A:link.blue {color: blue}

To use this new class you can for example:

Is also possible to apply a style to a part of a document that does not have to proper behaviour. To apply these changes you can use the <SPAN> </SPAN>.

For example in the previous example we found:

<SPAN>
...
<A STYLE="color:#FFFFFF;text-decoration:none;" HREF="/isapi/gomscom.asp?target=/catalog/default.asp?subid=22" TARGET="_top"><FONT COLOR="#FFFFFF">All Products</FONT></A> 
 
<FONT COLOR="#FFFFFF">|</FONT>

</SPAN>

CSS1, CSS2 and CSS3

What are CSS? and CSS1, CSS2 and CSS3 ?

CSS stand for Cascading Style Sheet. The CSS1, CSS2 and CSS2 are different generetions or level released by W3 Consortium.

The CSS1 was relesead in Dec 17 1996, before the HTML 3.2 Specifications. The CCS2 was releases May 18 1998,and the last May 23 2001, was released the documents for CSS3, that we present here some modules.

The main goal of this chapter is to introduce these Styles. You can broswe the Official Documentation at http://www.w3.org/TR/

Or locally:

The CSS Styles are the most used in the Web. Learn to use and doing practice with these styles may create the difference between your Web site and others.

Layers

Another mode to fix images in a fixed position inside the page, is using the layers.

...
<table width="135" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="home/imgs/home_logo.gif" width="135" height="108" alt="The Hartford logo"></td>
    </tr>+
</table>
</div>
<div id="Layer3" style="position:absolute; left:124px; top:432px; width:101px; height:44px; z-index:6">
<table width="101" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><a href="sitemap/index.html"><img src="home/imgs/findit.gif" width="101" height="44" alt="site map" border="0"></a></td>
    </tr>
</table>
</div>
<div id="Layer4" style="position:absolute; left:339px; top:1px; width:339px; height:118px; z-index:8">
<table width="339" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="home/imgs/blueplus.gif" width="398" height="118" alt="bring it on"></td>
    </tr>
</table>
</div>
<div id="Layer5" style="position:absolute; left:12px; top:67px; width:161px; height:261px; z-index:2">
<table width="161" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td> <img src="home/imgs/random.jpg" name="random_img" width="161" height="261">
        <script language="JavaScript1.1">
...

Layers have a style and allows to positionate an image inside a page.

For example the tag:

<div id="Layer5" style="position:absolute; left:12px; top:67px; width:161px; height:261px; z-index:2">

in a specific position.

Another important and usefull HTML tag to positionate images and text inside HTML page is the SPAN

The Style page at W3.org, includes the following declaration:

<li><span class="date">010220</span> The <a
href="http://www.webstandards.org/upgrade/pr.html">Browser upgrade
initiative</a> of the <a href="http://www.webstandards.org/">WaSP</a>
(Web Standards Project) aims to rid the world of old, non-standards
compliant browsers that hold back progress.

SPAN tags enable you to assign style characteristics to content that is not neatly contained between a set of tags.

Exercises

Find two Web sites that uses Styles.
Find two Web sites that uses Layer.

Tests

What is a Style Sheet ?
What is a CSS ?
List the actual CSS Styles?
What is the latest CSS Style available ?
What is a layer?
What is the HTML tag for a layer ?
What is a <SPAN> ?
Where is used the HTML tag: "LINK REL=STYLESHEET HREF=MyStyles/ClassicStyle.css" ?
Who defines the Style in the HTML Language ?
List two Styles types.

Read the answers to the exercises.

Check the Interactive Exam Cram WebMaster:

Internet Resources for this Chapter.