CSS 4 LBB

Local CSS has as its principal concern the making of style attributes that can be inserted into an HTML tag. This makes possible a foreshortened means of entering HTML tag attributes as well as enabling some additonal properties. Global CSS, on the other hand, defines a style that can carry through a page for all HTML tags of a given type as well as having the possibility of individual tag attributes. This section describes how global properties are assigned.

Global CSS: <style>  Global CSS has as its principal concern HTML tags and how often they are used. The specific HTML tag pointed to in a document is known as a selector and is designated by the name of the tag, i.e., the tag without braces. For example, setting a font color would be done as follows:

<style type="text/css"> font{color:magenta} </style>

Placed in the document just before the font style is to be set, normally in the <head> section, all <font> tags would have any text within them magenta in color. CSS style takes precedence over any HTML color attributes that other <font> tags may contain. It is best to decide beforehand whether to use global CSS to set fonts, as using CSS and normal HTML in the same document for this purpose may cause problems. If only one font color is to be used throughout a document, one simply writes:

<font>This text is magenta.</font>
<font>This is magenta, too.</font>

Certainly the <body> tag qualifies for this category. It can be used only once, a point built into the newer builds of the LBB. This creates a complication, as to use a body style the <style> section must precede it and appear in the <head> section. Using Page Builder on the LBB, this means a form of Advanced Editor must be used, specifically the one enabling the use of the <head> section. This being done, all background-color and background-image properties previously discussed can be used to set the background for a page. However, there are two properties specific to a <body> tag in CSS. These are illustrated in the style statement:

<style> body{background-image:url(http://.../apple.jpg);background-repeat:no-repeat;background-position:center;background-attachment:fixed}</style&g

for which the call to it is simply:

<body>

The background-position is limited on the LBB to top, center, bottom, left, and right. For background-attachment the values may be either fixed or scroll. It is the value "fixed" that is the more useful on the LBB as is illustrated by the following examples:

Note:  An initial test when this was being written showed "background-position:center" to work on the WebTV Viewer and when using a LBB. These examples were then incorporated on this page. Since then proper image placement has not yet been noted. The reason is unknown, as the MSNTV Developer CSS Elements list says this attribute is supported for the <body> tag.

An extremely useful application of this category is for those who like to indent the first line of a paragraph. Now by writing:

<style type="text/css"> p{text-indent:25} </style>

every instance where a <p> tag is used to create a new paragraph will have the first line of that paragraph indented.

Normally, however, an HTML tag is used more than once, but in different ways. There are two ways that may be used to distinguish between the same HTML tag being used differently. Both involve giving each tag a different name. Hence, tags may be distinguished by a class attribute. A natural application for this is in changing the dimensions of an image. An <img> tag applies and each image will differ only in its height and width. The table below designates how a class style can be used for this:

<style>img.small{width:36;height:38}
img.normal{width:72;height:77}
img.large{width:144;height:154}</style>
<img class="small" width=72 height=77 src="URL.gif"><img class="normal" width=72 height=77 src="URL.gif"><img class="large" width=72 height=77 src="URL.gif">

Note:  Since CSS selectors take precedence over normal HTML tags, the property values for the selector will over-ride any attributes in a normal HTML tag. In this case, though the dimensions are given by the attributes in the HTML tag, the dimensions seen for the images are those found in the selector.

The selector can be omitted and the style written (note the preceding period):

<style> .mag{color:magenta} </style>

This would enable the property to be used in any other HTML tag and not just the <font> tag, e.g.,

<font class="mag">Magenta text using "font" <font>

<div class="mag">Magenta text using "div" <div>

Say a number of tags could be positioned top, bottom, left, or, right. Rather than designating which tag is to take a particular position, it is easier to assign a class and call for that style as needed, e.g.,

<style>.left{float:left}
.right{float:right}</style>

Then, when the style is needed it can be called in the body of the document:

<img class="large" class="right" src="URL.jpg" width=? height=?>

This statement calls for the large dimensions for an image which is to be aligned right on the page. The CSS float property is specific for images and can have only the values left and right. It is used in lieu of tables for positioning text relative to images. Click the button for an example:

Tags may also be distinguished by id. Less typing is involved for "id" than for "class" and, since these attributes function alike, id attributes are more frequently utilized. An id can be made to apply only to a selector, or element, of a given type. For example, writing style attributes in the following way has them apply only to <img> tags and none other.

<style type="text/css"> img#top{vertical-align:top}
img#mid{vertical-align:middle}
img#bot{vertical-align:bottom}<style>

Any one of these vertical-align attributes can be used in an image tag as follows:

<img id="mid" src="URL.gif">

Using these can considerably reduce the effort in writing code where, say, images are to be aligned in various ways on a line of text. The first image code entered can be c/c'd and its style attribute entered. All subsequent images can then be p'd and their appropriate style attributes entered. The effects of these styles can be viewed by clicking below:

Global CSS can be used to good effect when dealing with tables constructed using HTML (Note: CSS can be used independantly in a quite different manner for tables). This is illustrated by the style shown below which makes use of the CSS properties supported by the LBB for tables:

In Head Section
<style>
table{width:400;background:navy;border-style:solid}
td#bgyel{background:yellow;color:red;text-align:center;padding:20}
td#bggrn{background:green;color:white;text-align:center}
</style>
In Body Section
<table>
<tr><td id="bgyel">Text in red</td><td id="bggrn">Text in white</td></tr>
</table>

Note:  The CSS property padding:## and the only CSS border property said in the MSNTV Developer guide to be supported by the LBB border-style:solid do not appear to function, as shown by this example:

To use an id style in a more general way the selector is omitted:

<style type="text/css"> #top{vertical-align:top}
#mid{vertical-align:middle}
#bot{vertical-align:bottom}<style>

In this way any of these style attributes can be applied in, say, an image or a table cell (<td>) tag.

A special category, pseudo-class, is applied to hypertext, i.e., links. The pseudo-class link is written as shown:

<style>a:link{color:green}  a:visited{color:red}</style>

A link written as an anchor tag will here have its text shown in red. When clicked, to visit the link site, the text color will change to green:

A PSEUDO-CLASS LINK

With the LBB, however, while an anchor link pseudo-class will serve to set the link color, the color will not change upon visiting a site.

Linking  There are three basic types of style sheet:

Inline - This is where a style attribute is used in an HTML tag:

<img style="width:?;height:?" src="URL.gif">

Internal - This is where style attributes are defined in the <head> section of a document:

<head>
<style>
#block{width:?;height;?:background:#black;color:white}
</style>
</head>

and a style used by an HTML tag having one of the declared styles in the <body> section of a document:

<div id="block"> TEXT/IMAGES </div>

External - This is where a page calls into its <head> section style declarations which are contained on a totally separate page by the <link> tag.

<head>
<link rel="stylesheet" type="text/css"href="thestyle.css">
</head>

The style definitions on the page named "thestyle" will then be applied to the code on that page.

The first two kinds of style sheets have already been discussed. It is only necessary here to specify how the separate pages are constructed. The page with the style sheet should not contain any <html> tags. These are already on the page into which the style sheet is being called. The external style sheet should be saved as a .css file. An external style sheet does not have to originate from the server on which it is used.

There is a priority for differing style sheets being used on the same page. In general, all the styles will "cascade" into a new "virtual" style sheet in the following order of priority:

Inline Style (inside an HTML tag)
Internal Style Sheet (inside the <head> tag)
External Style Sheet
Browser default

So, an inline style (inside an HTML tag) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser.

Epilogue  It is hoped that this tutorial will create a working basis for CSS. Certainly not all of the properties that can work on the LBB have been covered, nor have they yet been found much less documented. Only the most basic ones have been discussed so a familiarity with CSS can be achieved. There are only five kinds of properties dealt with no matter what the level of CSS:

  • Text
  • Font
  • Position
  • Color & Background
  • Placement
  • Classification

Of these properties, it should be noted, the LBB has only a limited number of any one kind that can be used and does not support the Classification property in any way. The latter would be used, for example, in varying the symbol for items in a list.


<<=  LOCAL CSS