The confused state of affairs produces several possible strategies for HTML authors and coders:

1. Write for the commercial market dominated by Internet Explorer 5.x/6.x with about 85% of the browser market (Rutgers-Newark supports only IE 5.0.),ignoring the remaining 15%.

2. Write for academic institutions (such as Rutgers-Newark) where Netscape 4.7 is well-entrenched despite the fact that there has not been a significant upgrade since 1998 and there is minimal W3C support.

3. Write to Netscape 6.x standards, which closely support the W3C standard, and hope that AOL, which owns Netscape, will change the market share imbalance by introducing Netscape 6.x features into its AOL browser.

4. Write for the cutting edge represented by Netscape 6.x, Opera, Kommander, and Amaya for experimental and demonstration purposes.

   In practice, web authors often have only a few simple choices:

5. Write the code they know and hope for the best.

6. Let commercial HTML software such as Dreamweaver and GoLive solve the problem even though the bloated code they produce may be hard to modify or understand.

7. Write hybrid code for three or more browser standards simultaneously and rely on browser detection software (sometimes called a "browser sniffer") to construct complex code with forking paths.

   The strategy we will follow in this course for the rest of the semester will do the following: Use CSS supported by IE 5.0 in the Rutgers-Newark labs. Explore IE5.5/6.0+, which students must obtain and use on their own. Accomodate Netscape 4.7 browsers in the Rutgers-Newark labs, with its have weak support for CSS. Test code in Netscape 6.x (not suported in the Rutgers-Newark labs), which students must obtain and use on their own.

8. Cascading Style Sheets get their name from the fact that style statements can be located 1) locally for use just where they take effect, 2) internally with global application to an entire document, or 3) externally in a separate file for reference by one or more files.

9. The "cascade" effect takes place because external statements can be overridden by internal file statements, which in turn can be overridden by local statements.

   Example: imagine the external style sheet makes text in all <Hx> tags red, but the internal statement within the document overrides this when it makes text in <H3> and <H4> green; then a local statement in the document makes the text in one particular <H3> blue.

10. One advantage of stylesheets is that values for attributes such as size, color, etc. can be centralized in one place, where they can be easily changed (Castro, 240 13.1-2).

11. Common formats can be developed for all the pages in a project.

12. Stylesheets can do many things well beyond the reach of HTML -- as we shall see.

13. Each style statement contains an element (such as H1), a property (such as text color), and a value (such as red). The property and value are always separated by a colon, never the equals sign or quotes. Example: color:red.

14. Several definitions can be grouped together -- separated by semicolons. Example: color:red; background:pink

15. LOCAL STYLES: A style statement follows the formula STYLE="PROPERTY:VALUE". It can be put into a local tag (Castro, 242 13.3-4, 14.9-10).

    Example: within an H2 tag, the full local code would be:

    <H2 style="color:red; background:pink">Red text on a pink field</H2>

    Example: Red text on a pink field

    Thus within any local container tag you can insert a style="attribute:value" statement to create a wide variety of effects (until the local tag is closed, of course). But ultimately replacing all the old local tags with standard style statements can be of little value as a general practice.

    INTERNAL STYLES: A more useful approach is to put all these statements once into the STYLE section in the HEAD of a document where they would apply to every H2 tag in the document (Castro, 244 14.1-2).

    This document-wide ro global formula is SELECTOR {ATTRIBUTE:VALUE} -- notice the internal colon again between attribute and value -- and the surrounding squiggly braces {} (instead of quotes). Example: H2 {color:red; background:pink}

    Here's how this code statement appears in the STYLE section:

    <HEAD>
    <STYLE>
    H2 {color:red; background:pink}
    </STYLE>
    </HEAD>

    To make sure that older browsers like NS3 and IE3 would not be confused, the entire STYLE section is put into a comment tag, which will be assumed in these exercises but not shown again: (Castro, 245 14.3)

    <STYLE>
    <--
    ...
    </STYLE>
    -->

    Style statements apply to mutiple tags when the selectors are separated by commas -- here H2, H2, and H3 (Castro, 245):

    <STYLE>
    <--
    H1, H2, H3 {color:red; background:pink}
    </STYLE>
    -->

    INHERITANCE: When one tag occurs within another, they are said to have a parent-child relationship, such as a word in italics (child) within a in bold (parent). Parent-child dependencies can be expressed in STYLE statements by by tags separated by spaces: here the statement applies only to the child EM tag within a parent H2 tag (Castro, 245). (If a comma had separated H2 and EM, the statement would apply to all H2 and EM tags anywhere in the document):

    <STYLE>
    <--
    H2 EM {color:red; background:pink}
    </STYLE>
    -->

    EXTERNAL STYLESHEETs: The external stylesheet file has a .CSS extension and contains just statements without <STYLE> or </STYLE> tags. An example:. (Castro.246 14.4):

    H1, H2, H3 {color:red; background:pink}
    H2 EM {color:brown; background:tan}

    To reference an external stylesheet file a LINK tag with the URL pv the stylesheet is placed high in the HEAD of the document (Castro, 247 14.5-8):

    <LINK REL=stylesheet TYPE="text/css" HREF="mystylesheet.css>

    Note: If a relative HREF doesnl;t work, try an absolute one. Query: Can a document have noth a LINK to an external stylesheet and an internal STYLE section. If so, is their location significant?

    CLASSES and DOT NOTATION: Existing tags can be modified with dot notation to create style classes (Castro 249 14.11-12). The formula is TAG.CLASS {ATTRIBUTE:VALUE}. Here's an example:

    <STYLE>
    H1.rouge {color:red; background:pink}
    H2.earth EM {color:brown; background:tan}
    </STYLE>

    which would be applied in the BODY of the document as follows:

    <H1 class="rouge">This is rouge. </H1 >

    This is rouge

    
    <H2 class="earth">This is earth. </H2>

    This is earth

    In addition dot notation can create independent classes which can be applied as needed to any tag in the document - or even to custom tags you can create yourself (Castro 249)

    <STYLE>
    .rouge {color:red; background:pink}
    .earth {color:brown; background:tan}
    </STYLE>

    These classes can be applied to other tags:

    <H3 class="rouge"> </H3 >

    This is rouge

    
    <H4 class="earth"> </H4>

    This is earth

    IDs and POUND SIGN NOTATION: Pound sign (#) notation can be used to apply a style to a unique element or ID which occurs only once in a document.

    <STYLE>
    H5#rouge27 {color:pink; background:red} -- a specific subclass
    #rouge27 {color:pink; background:red} -- or a general class
    </STYLE>

    which would be referenced as

    <H5 ID="rouge27"> </H5 >

    This is rouge

    CUSTOM TAGS: To review, it is useful to apply STYLES to any tag with a tangible area, such as BODY, H1, P, or BLOCKQUOTE, remembering the closing tag such as /BODY, /P, or /BLOCKQUOTE. Being able to set the attributes and values just once for all the tags of a particular type in a document can be an enormous convenience! Query: Where would this be most useful?

    But where no tag exists already for your purpose, you can invent your own using SPAN... /SPAN tags for inline elements and DIV... /DIV tags for block elements (Castro 251-55).

    Existing block elements include P, TABLE, H1, BLOCKQUOTE, LI, DD, and any others which incorporate a carriage return. Inline elements include FONT, B, IMG -- without a carriage return

    Custom inline tags can be created using SPAN (Castro 254-55).

    Custom block tags can be created using DIV (Castro 252-53).

    Normally the block level DIV tag is a larger container for smaller inline SPAN tags.

    STYLESHEETS really come into their own when formatting is used structurally, not to indulge the web page author but to direct the reader in navigating the page or site. Distinctive styles can be created for the navigational skelton, help elements, headings. main points, reference material, issues and problems, digressions and humor, unsolved problems, references, links, the about section, and others. The meaningful application of Stylesheets across several pages indicates a mature site, which may reflect development over a considerable period of time.

    Styles can be defined for links (Castro, 256):

    A:LINK {color:blue; background:lightblue} -- never clicked
    A:VISITED {color:gray; background:lightgray} -- already clicked
    A:ACTIVE {color:red; background:yellow} -- while clicked
    A:HOVER {color:green ; background:lightgreen} -- during mouseover

    Incidentally, the popular code to remove underlining from all links (Castro, 270) is:

    A {text-decoration:none}

    Query: Where should this statement come, in relation to other style statements? Incidentally, the single line of HOVER code above can take the place of many mouseover routines. Be warned that drastic changes in font size, face, color, weight, background and style, which can be assigned to the HOVER tag, are annoying if they repaint the entire screen as though it had a nervous twitch!

    If you have previously added conventional tags to change font size, face, color, weight, background and style as impulse dictated and without any particular structural reason, you may have a good deal of rethinking to do in introducing styles. The advantage of stylesheets begins when you start to think of design elements not as free-standing ornaments but as organic structures with an informational function.

    Although FONT tags have been "deprecated" by W3C as obsolete and marked for future removal, so much existing code uses them that a long period of transition will follow probably in which browsers continue to provide retrospective or legacy support.

    For the forseeable future a mixture of FONT tags and STYLE statements will be found in many documents. In truth It is sometime more convenient to insert an occasional FONT tag than to redefine a STYLE if it is to be used only once.

In following these exercises to learn stylesheets -- be sure to use fresh dupl icate files in each case! After each step, save and preview the results in your browser: Exercise 1: Replace as many of the FONT tags as possible with local STYLE statements. Exercise 2: Survey your entire document for all the STYLE formats you use and condense them into a single set of internal STYLE statements, placing them in STYLE section in the head of the document -- using both existing tags and classes for custom tags. Then, using the internal STYLE statements at the head of the document, convert as many of the local formatting tags as possible to style statements. Exercise 3: Once you see a pattern emerging in the styles you use, move the STYLE section to an external stylesheet file so other documents can also link to it. If you can't make up your mind about font and color combinations, it is fairly easy once you reach this level to produce a series of related external stylesheets, perhaps varying in color and font combinations. You can switch among the external stylesheets by changing the HREF value in the LINK tag.

When external stylesheets are used effectively, the appearance of a document is a way of interpreting its structure, effectively separating content and appearance. Exploiting this, a recent development in stylesheets is the production of media-specific stylesheets, one for the screen, another for printing (considering the price of color toner), another for projection, and finally one for readers using e-mail on a PDA or cell phone. Netscape 6 supports alternate stylesheet selection directly from the View menu. Internet Explorer supports a several possible scripting and software methods to manage stylesheet selection.

Next: How stylesheets control fonts, bold, italics, line height, text color, backgrounds, spacing, alignment, positioning, hiding/displaying elements, layers, borders, margins, padding, and page breaks (Chapters 15-16).

STYLE STRUCTURE: A SUMMARY:

Netscape 4.7 has limited support for CSS.

Syntax of Internal STYLE statements (global within document)
TAG {ATTRIBUTE:VALUE}	simple form
TAG {ATTRIBUTE1:VALUE; ATTRIBUTE2:VALUE}	multiple attributes
TAG {ATTRIBUTE1:VALUE1 VALUE2 VALUE3}	multiple values
TAG1, TAG2 {ATTRIBUTE:VALUE}	multiple tags sharing a statement
TAG1 TAG2 {ATTRIBUTE:VALUE}	inheritance
.CLASSNAME {ATTRIBUTE:VALUE}	general dot notation
TAG.CLASSNAME {ATTRIBUTE:VALUE}	specific dot notation
#IDNAME {ATTRIBUTE:VALUE}	pound sign notation for unique ID
TAG#IDNAME {ATTRIBUTE:VALUE}	same, specific to tag

Applying Style Locally
Existing tags:
TAG STYLE="ATTRIBUTE:VALUE"	locally defined style
TAG="CLASSNAME"	application of class style
TAG ID="CLASSNAME"	application of ID style
Custom tags: `
SPAN STYLE="ATTRIBUTE:VALUE"	locally defined style
SPAN = "CLASS"	application of class style
SPAN ID = "CLASS"	application of ID style
DIV STYLE="ATTRIBUTE:VALUE"	locally defined style
DIV = "CLASS"	application of class style
DIV ID = "CLASS"	application of ID style

350:465 Writing HTML for the Web
Heyward Ehrlich
Dept. of English, Rutgers-Newark
Email: ehrlich@andromeda.rutgers.edu
File created November 5, 2001