Using Style Sheet Code

Thanks to several PageBuilders and external website owners, MSN® TV user may finally begin to become interested in the use simple, effective CSS style sheet code in our webpages! The javascript experts from the old, now defunct "alt.discuss.javascript" and "advanced.html" NGs used lots of CSS style code for several years in DHTML webpages for our MSN-TV browsers! For more comprehensive CSS/DHTML demos and tutorials, check out the NG posts and webpages of my friends Art C, Maglev, Davemagic, R_Endymion, jtwobears, RWEDGE, WbWzrd, Nook, cwdjrx, and others!

Many of us started using simple CSS code in the alt.discuss NGs and used or linked to style sheets we found on the web for our PageBuilder and other external websites. We've found lots of great CSS tutorials on the web, including the resources at the W3C Website - the world web code standards agency. We learned to use W3C CSS Core Style Sheets by seeing how they were constructed and how to link to and use them on our own webpages. Pick your favorite style sheet from among the eight offerings: Chocolate, Midnight, Modernist, Oldstyle, Steely, Swiss, Traditional, and Ultramarine. Select the style you like from the choices in the top listing, then click the radio button at the bottom to see only the style sheet code to study or C&P the code.

By carefully studying the core style sheets and noting how they can change the appearance of our basic webpage formatting, we easily learn basic CSS practice. Folks, spend a little time at the above W3C CSS style templates webpage, and check-out all the style sheet templates available by using them on your own webpage demos. You may see several "ready-made" styles you like for your own webpages! Link to the files to start using style sheets; then C&P a few style sheets into your own webpages or File Editiors; and finally, learn to set-up your own CSS file folders in your File Editors at the Zone, Geocities, Tripod, Angelfire, etc!

If you don't have access to other CSS style sheet templates, use those available at the W3C website, or practice creating and linkng to your own simple style sheets. The W3C style sheet templates are available in various themes and list the formatting properties for all the HTML elements (tags) that may be used on a webpage. All you have to do to use the style sheet is place a link to the style sheet file in an "Add text" box at the top of your PageBuilder document. Then assign the desired style to the HTML elements tags within your documents using "id" and "class" names in the various HTML element tags in your document.

As soon as we began using PageBuilder Advanced Editors, I suggested that anytime you use a PageBuilder Advanced Editor method, it would be preferable to extend the head tag and place the link to the style sheet inside the head tags of the document, which is standard practice. I further suggest that if you use CSS and style sheets in PageBuilder webpages, you should use a PB AE method to extend the head tag and place your style sheet code within the head tag of your document – which is standard practice! Also, link tags to external style sheets are required to be in the head tag of a document as per the HTML 4.0-4.01 DTD. But; with PageBuilder, as noted below, you can place your link in an "Add text" box at the top of the document.

Our research on style sheet code at the W3C website and using lots of great CSS tutorials on the web, has introduced another advance in PageBuilder and external webpage advanced editing! I suggest all PageBuilders begin to use syle sheets – it's the future of webpage editing! The W3C is trying to eliminate most of the HTML formmating tags in future revisions of the HTML DTD, in favor of style sheets usage. Within a few years our webpage formatting should be done mostly by style sheets rather than HTML tags; although the old HTML tags and attributes will be with us for some time to come!

I hope more PageBuilders will take a clue from our early CSS pioneer's efforts and start learning to use CSS style code. CSS style sheets and inline style code gives webpage designers far more control over page styles and formatting than the standard HTML tags! There's some neat tricks you can do with CSS style sheet code. Most of the HTML tags will accept the HTML core "id", "class" name attributes, and the "style" attribute. You can create some neat effects using inline CSS style code in individual HTML tags.

MSN-TV does not support all the CSS properties in use today. You have to check the MSN-TV CSS Support website to learn how our browsers support CSS. If you use inline style in HTML tags, you should check the HTML tags in a good HTML code book to learn which HTML tags accept the "style" attribute.

Note: The present MSN-TV Developer CSS website is not as inclusive and informative as Jos Claerbout's original article about WebTV CSS support. Jos's original works are archived at Stanford University by friends of Jos's family. To see the original WebTV CSS support webpage, click here! Thanks to my friend, Art C, for providing this link in the javascript NG!

To create your own CSS style sheet with all your preferred style definition codes listed in one file for easy editing and linking to your webpage documents, all you need to do is create simple text files, without HTML tags or style tags; but, with all your CSS definition rules typed in proper syntax. I suggest you create a "Style" or "CSS" folder in your Advanced Editor at the Zone, Geocities, Tripod, or other advanced file editors, for all your CSS text files and use the ".css" file extension for all style files you create. However, you can use any file extension you want, including the ".txt" extension, or use just a file name without an extension. I suggest you use descriptive file names that describe the basic style sheet "theme" like the names of the style sheets CW referred to at the W3C website.

Note: Remember you are creating simple text documents without HTML or style tags! You can see what I mean by "without HTML or style tags" by looking at the style sheets CW referred to at the W3C website – these are PLAIN TEXT documents, that contain only the style rule definitions, and show that you can use multi-line CSS comment tags (/* ... comments here ... */) for labeling sections of the files and adding notes and explanations – OK? You cannot use a PageBuilder webpage for a remotely linked CSS file because PageBuilder creates HTML documents rather than the simple text files you need for style sheet files.

Here's two example of very simplistic style sheets:

/* this style: basic webpage - green/magenta links - alert, h3, quote, and bold class selectors */ body {background-color: #ddddff; color: #000080; font-size: small;} a:link {color: green;} a:visited {color: teal;} h3 {color: #ffd700; font-style: italic; font-weight: bolder; text-decoration: underline;} .alert {color: red; text-decoration: underline; font-weight: bold;} .quote {color: #000000; font-size: x-small; font-style: italic; margin-left: 25px;} .bold {color: #000000; font-weight: bolder; font-size: large;}

The above style sheet could be saved in your File Manager as: "basic.css" file in a "Style" folder.

/* this style: quotes page - links, body, titles, emphasis, notice, headings, dropcaps, quote, notebody, p-i-u-b backgrund color */ a:link {color: teal; font-size: medium;} a:visited {color: magenta; font-size: small;} body {background-color: #ddddff; color: #000080; font-size: small;} #em {text-style: italic; text-decoration: underline; font-weight: bold;} #header {color: red; background-color: #99ff99; font-weight: bolder;} p i u b {background: red;} .title {color: green; font-size: x-large; font-weight: bold; text-align: center;} .lrgtitle {color: green; font-size: xx-large; font-weight: bold; text-align: center;} .notice {color: red; font-size: large; text-align: center; text-decoration: underline;} .notebody {color: red; font-size: medium; text-align: center;} h1, h2, h3, h4, h5, h6 {color: green; font-weight: bold; text-align: left; text-decoration: underline;} .dropcap {color: green; font-size: x-large; text-decoration: relief;} #quote {color: red; font-size: x-small; margin-left: 20px;}

This style sheet could be saved in your File Manager as: "format1.css" in your "Style" folder.

These examples show how you create multiple style sheets for all your common used styles. Just put all the various combinations of style sheet definitions you would typically use on multiple webpages in central files in your Advanced Editor File Manager and link them to each individual webpage as desired.

These style sheet examples above, when linked to a webpage will, in part, format the link colors, and h3 headers as shown in the style sheet property definitions. The class (".class") and "id" ("#id") selectors shown are used in the webpage's HTML element tags, like this:

<span id="em">This text is underlined, italic, and bold text!</span>

<p class="quote">Some quoted text here. Should be indented, italic, and small size text here!</p>

And, so forth. Check your textbooks and online tutorials and you will see that most all the HTML tags accept the "id" and "class" core attributes to pass CSS style code formatting to the HTML element tags within a document.

The style sheet is a simple text document, which defines the desired style sheet rules.The multiline comment tags are used here for notes to list the style sheet properties for identifying the style sheet application. Typical generic, multi-document style sheets are relatively long documents that contain almost every conceivable style definition for all the various combinations of HTML element tags and multi-contextual selectors. Webpage authors embed these all-inclusive style sheets into their documents, even though they only use a relatively few of the available styles in a specific webpage style!

Then changing style is relatively quick and easy since a wide diversity of style choices are available in the style sheet – it's just a matter of changing the id's and classes of the document's HTML elements! CSS style sheets offer much added flexibility to webpage design and styling! It sure is much easier than the endless, repetitous editing of the individual HTML elements within a document! However; remember: when advisable, you can override the style sheet definition for any HTML (tags) element by changing the value of the element's attributes!

Note: there is no style tags, or HTML comment tags to hide the code from non-style browsers – It's not necessary! As shown below – the external style sheet link code is embeded in the webpage in the singleton link tag, which is ignored by non-style browsers. However: remember: non-style browsers will read content, as plain text, between style tags if the style code isn't hidden by HTML comment tags inside the style tags!

When the webpage is accessed by a style-compliant browser, the style sheet is loaded into RAM and used to format the webpage display. The style sheet should be given an appropriate name and stored in your Advanced Editor File Manager folders; preferably in a folder named "style", with a ".css" file extension.

Then to link your style sheets to any PageBuilder webpage, add the following link tag in an "Add text" box at the top of your document, or in an extended head tag of an Advanced Editor method:

<link rel="stylesheet" type="text/css" href="http://URLofFile.css">

Note: You must use the "rel" and "type" attributes in your link tag to tell the browser how to handle the file, because you are actually importing a plain text file into the document! For PageBuilder documents you will have to use absolute URL's in the link tags because you have to link a style sheet from the Zone or other webpage providers; but, for webpages at the Zone or other file editors, where the style sheet files are stored on the same servers, you can use relative addressing using only folder and file (path) names!

Note: Our MSN-TV browsers, below upgrade level 2.8, do not support the CSS importing (@import url("style.css");) of CSS style sheet files, like this:

<style type="text/css"> @import url("http://www.server.domain/user/folder/file.css"); </style>

Lack of support for CSS style sheet "importing" is the most common reason our older upgrade level LBB browsers cannot view many websites like banks and our stock brokerage accounts! Most everytime I access a webpage I cannot view, I have found, from the source code, that the webpage uses an extensive imported CSS style sheet! MSN-TV needs to support the CSS style sheet "@import" function, and drop some of the crap that doesn't work very good, like Real Audio and Windows Media Player!

See the source code of this document for a styled division that uses an "id" (pound symbol - "#") selector to overwrite the bottom link of this PageBuilder cocument. You should use "id" selectors for specific "named" styled elements like divisions, and use ".class" selectors for general classes of HTML elements like headers, paragraphs, etc. Use style sheets for a while and you will work out your preferred method of using ID's and class selectors. Just be sure you're consistent with your naming schemes, or you'll have problems with multiple style sheets cross-compatibility!

You can use a single style sheet and link to multiple documents, which is standard practice – put all your standard, basic style code in one file and link to all your documents. Also, you can use multiple style sheets for parts of webpage documents. Just create as many separate classes of contextual selector groups as needed and apply separate classes of style to individual sections and elements on your webpage using HTML tag class attributes and span tags.

And, when a webpage needs special formatting that is not included in the linked style sheet, you can add a local style sheet to the document, and/or use local inline style code in the HTML tags to supplement, or even override the linked or local style sheet.

Style sheets are technically called "cascading style sheets" because of the "order of precidence' between external linked style sheets, local style sheets, inline style code, and attributes in HTML element tags. Basically, the order of precidence "cascades" down to local inline style code and attribute values inside webpage HTML element tags. In other words: local style sheets override linked external style sheets; and, inline HTML tag style code overrides the local style sheets! Also, you can override the style definition for any HTML tag element by changing the tag's attribute values – a little practice will help you understand and effectively apply the CSS cascade style order of preference!

The above cascade rules are a simplistic summary, and sufficient for beginning CSS stylers; but, be aware that there is also a special rule for a precidence "specificity calculation" based on the number and type of style selectors in each style definition rule that precisely determines the cascade order; but, the calculation is somewhat complex, and is beyond the scope of this tutorial. Maybe later, when we all are really into CSS style sheets in our wepages; myself, or some of the other CSS advocates in our community, will thoroughly explain this subject!

The biggest problem beginners have when copying and using online style sheet code is understanding what effects any particular style code will have on their webpage. Many of us, who are considered expert PageBuilders, see effects we don't expect from our CSS. The more effort and curiosity about the "how and why" of all the CSS effects we see on our webpage when we use inline CSS, local, and/or linked CSS style sheets, the faster and easier we will learn!

To understand how a style sheet affects your webpage, you need to look in the code for the style definition that causes the effect you are curious about. In the case of any demo webpage code, you would look in the code for the group of contextual selectors that both contain the HTML tags in the document and style definitions that affect these tags throughout your webpage document.

Most of the definition groups, in the style W3C style sheets, contain only vertical and horizontal element dimension properties; and only one or two groups, usually called "affordances" in the comments, contains the noticable HTML element tags and colors that make the style distinctive.

Note: In the style sheet code, we see hex color values, and color values that only contain 3-digits? The 3-digit colors are shorthand for hex color values that have RR-GG-BB group pairs with repeating numbers; ie: the color code "#006" is actually hex color code "#000066", which is a dark blue color.

I suggest you practice by writing simple style sheets, and C&Ping some more complex CSS text files into your file editor folders and link to them in your webpages. Remember, style sheetsf for MSN-TV PageBuilder webpages will have to be carefully edited to remove all extra spaces and "returns" (called whitespace); and, when typing in PageBuilder "Add text" boxes, you must use single spacing and allow auto-wrap of the style code.

PageBuilders can easily link to external "plain text" style sheets; or simply type or C&P the CSS text file into an "Add text" box at the top of a document; editing as noted above; and then just add <style> <!-- ... --> </style> tags around the CSS text file. Try it! You can always edit and use any part of more complex online CSS files you like. Try it, you'll like it! It's fairly simple and orderly when you learn the basic syntax.

In this document, I use CSS style code to add backgrounds to the links. Note that the webpage links as well as the MSN-TV link at the bottom are italic with a background color; but, change to normal white text when visited - go to the links and return to this page to see the effect. View the source code of this webpage to see the very simple style sheet for the links, and the styled division code that produced the background behind the MSN-TV link at the bottom of this webpage.

However, the addition of a background image to the built-in <hr>'s and MSN-TV link at the bottom of our webpage can be done with the old <noscript> trick and a very simple style sheet, as I show below. You can get the same effects by embedding some og the W3C style sheets in your webpage. Remember: whatever you do to your webpage, do not remove the MSN-TV link, or future advertisng banners from the bottom of your PageBuilder webpages! You can jazz it up like I did below, but don't violate the TOS by removing the link!

OK; folks, that's enough for now – I just wanted to add a few supplementary remarks to CW's work to try to advance the use of style sheets! If we can get Chuck, Curly, Ken. Charley, M L, and the other leading PageBuilder gurus to begin using more style code, it will become increasing popular with PageBuilders, and we will continue to be on the leading-edge of webpage design – even with our funky, option-impaired PageBuilder program.

We should begin to introduce CSS style sheets into the PageBuilder NG's, and get many more PageBuilders exploring its use. Having as many PageBuilders as possible investigate a new procedure and report their findings in the NG's is the way we increase our knowledge base about any subject. Look how all you guys have mastered PageBuilder advanced editing – we can do the same with CSS style sheets and stay up with the world of webpage design!

Check out my new tutorial on the PageBuilder Advanced Editor Style Method, at:

http://community-2.webtv.net/jaxred/style1/

Also, check out my new tutorial about linking to external javascript files, at:

http://community-2.webtv.net/jaxred/jsfiles/

Please let me know of any suggestions for additional comments, errors, or corrections you have for this tutorial! I will sincerely appreciate your feedback, and will give you full credit herein for your contributions to this document! Please send me links to other CSS tutorials for and by Webbers so I can add them here!

Thanks for visiting my webpage, folks! My best wishes to all PageBuilders!

Jax Red

© 2000 The Weather Underground, Inc.