CSS 4 LBB

CSS 4 LBB

As is ordinarily known, HTML is a mark-up or editorial language. What this means basically is that a document is initially viewed as nothing more than a rough draft containing text and image locations but without designation as to what kind of text, e.g., font size, face type, or color, is used nor where. Manually editing such a draft would involve placing editorial marks to designate things like placement, bold or italic type, indentations, and paragraph breaks. Using a computer to do the editing uses a set of tags as editorial marks and these ordinarily are used in pairs, the first for the beginning and the second for the end of a particular editorial notation. The number of tags that may be used and attributes available to them constitute a base mark-up set. In most instances, a larger number of tags and attributes are available when using higher levels of a mark-up language, e.g., the tags and attributes in HTML 3.2 may extend to HTML 4.0, but HTML 4.0 may apply other attributes to these same tags and have other tags not found in HTML 3.2. A browser interprets the tags and displays a document in accord with their usage. Someone using an HTML 4.0 browser should be able to view a document written by someone using an HTML 3.2 browser. However, because of the larger number of tags and attributes available with a higher level browser, a person using an HTML 3.2 browser may view only a part of a document as intended that is written by someone using an HTML 4.0 browser.

CSS, standing for Cascading Style Sheets, was developed to obviate some limitations of HTML 4.0. Before getting into CSS, though, it is appropriate to note that there is a CSS1 and a CSS2. That is, a lower and a higher level of CSS. This tutorial is specifically intended for WebTV/MSNTV (the LBB, or Little Black Box), which is said to support most of CSS1 and some positioning properties of CSS2. However, with the LBB there are many unsupported aspects of CSS1, as designated by the original WebTV Developer page which still appears to apply, and which is acknowledged in the more recent MSNTV Developer CSS elements list. Further, the CSS used by the LBB is a variant which can make use of WebTV/MSNTV-only attributes and which, though mostly Internet Explorer CSS compatible, sometimes behaves like Netscape's CSS. Additionally, not all WebTV/MSNTV builds currently in use can employ or view all CSS of any type, including that CSS specific to the LBB.

How, then, is a CSS tutorial developed for the LBB? Here the approach taken is purely empirical. If a particular aspect of CSS can be viewed using a LBB (2.7 build) it is included as part of the discussion. Any other aspects that cannot be viewed are omitted.

Why CSS? The basis for CSS is somewhat removed from what a person using a LBB may have an interest in as CSS is directed more to the development and presentation of long pages or of a number of them. Editing such pages is a chore as large numbers of tags and their attributes are often repeated and each would have to be found and modified or inserted in amending the page. Better, it would seem, to have something like a subroutine that is written only once and is called upon as needed and where needed. Any change in the subroutine would automatically carry over to where it was used, and it is only necessary to make a call to the subroutine if additions are made to any page.

In CSS, the subroutine-analogies are contained between <style> tags:

As the descriptors are intended for elements on a page this is a global style designation, and it is ordinarily placed in the <head> section of a document.

Making up a page are lines and paragraphs that may include alternative HTML tags and which are independent of any global style designation. If desired, CSS descriptors can be used to define style attributes for many HTML tags to set a local style designation:

style= L-Descriptor

A global descriptor is made up of three parts - a selector, a property, and a value:

G-Descriptor= selector {property: value}

while a local descriptor, describing characteristics for an attribute of a tag, only requires two - a property and a value:

L-Descriptor= "property: value"

It is instructive to first consider local style designations as the descriptors used carry over to global style designations.

Local CSS: <p>, <div>, <span>, and <B> There are two HTML tags ordinarily used to effect positioning, usually of paragraphs, on a page. Both require a closing tag to designate where the positioning is to end. One (<div>) does not cause line breaks at the beginning and end where used, while the other (<p>) does. These two tags will still function in this way, but each can also have a style attribute. Two tags (<span> and <B>) specifically require a style attribute and also require a closing tag. Of these, <div> is the more generally supported on the LBB.

Take a representative line of text, say:

This line is for a local style example.

Now consider what may be desired concerning it: possibly a colored background, a contrasting color for the text, and maybe less of a width for the line. A style attribute for these is given as follows for just the <div> tag:

<div style="background-color:blue;color:white;width:100">The sentence</div>

Note: Semicolons ( ; ) separate property-value pairs while a colon ( : ) or an equals sign ( = ) separates a property from its value. Widths may be given in pixels or percent. Colors may be given by hex code, by RGB values, e.g.,RGB(0,255,255), or by name. However, usual CSS recognizes only 16 color names: white, black, grey, red, green, blue, yellow, magenta, cyan, lime, maroon, navy, purple, olive, silver, and teal.

That these function similarly is shown below:

<p>	<div>	<span>	<B>
This line is for a local style example.	This line is for a local style example.	This line is for a local style example.	This line is for a local style example.

Note: The <span> tag behaves differently and more like the <B> tag on the LBB. Lines of text rather than blocks of text have their backgrounds shown with them. The <B> tag bold-faces any text within a line.

Having control over the width of a line or paragraph element enables blocks of text to be defined:

width:50	width:75	width:100
This line is for a local style example.	This line is for a local style example.	This line is for a local style example.

A style attribute such as that used above can be used with form tags. If creating a button, the button background-color, color of text on the button, and the width of the button will be set,e.g.,

However, on the LBB button colors cannot be set. It is more advisable to use style attributes to just set button text color and width if the concern is to have compatibility with PC and the LBB. In the table below the basis for this advice is shown. The first column will have buttons of differing width and no color for text when viewed on PC, but not when viewed on a LBB. The second column will have buttons of corresponding width on PC and LBB, but the LBB will not have a text color. The third column will not have buttons of differing width and colored text will result whether viewed on PC or LBB. Both LBB and style type attributes are used in the latter instance, the attribute that is not suitable being ignored in favor of the one that is:

width=150 text=?	style="width:150;color:?"	width=150 text=? style="width:150;color:?"

In creating blocks of text all four dimensions of the block may be designated. These are the usual width and height and two more: top, for the number of pixels down from the top of the page, and left, for the number of pixels left-to-right across the page.

This line is for a local style example.

The code used follows:

<div style="background-color:blue;color:yellow;width:100;height:180;left:30;top:0">CONTENT</div>

A second text block would appear above the first. Text can be positioned alongside the first, as can be seen in this instance, by nesting <div> styles and using relative positioning. The innermost <div> appears above the outermost.

For bettter positioning, a position discriptor is needed. There are two ways to do this, for which the descriptors are shown below:

position:relative	The point of reference is the bottom-left of the previous line.
position:absolute	The point of reference is the uppermost-left of the page

Applying relative positioning is perhaps best given by example. Three <div> styles of the same size but differing only in background color will be used.

<div style="position:relative;left:#;top:##;background-color=?;width:20;height:20>CONTENT</div>

Placed one after the other in the coding results in stacking:

CONTENT1

CONTENT2

CONTENT3

To have each appear on the same line it may be thought that the simplest expedient would be to try nesting them. Doing so, but reducing the number of pixels setting the distance from the top of the 2nd and 3rd blocks, leads to:

CONTENT1

CONTENT2

CONTENT3

Negative values can be used in positioning. These create an opposite shift relative to the point of reference. Here, to move the 2nd and 3rd blocks up, a negative value equal to the height of the 1st block is applied, giving:

CONTENT1

CONTENT2

CONTENT3

It will be noticed that the effect of nesting is to have the background for each nested block increased in turn. Hence, to have blocks of similar size on a line, either tables or absolute referencing must be used to position them. For pages intended only for WebTV/MSNTV users, absolute positioning could be done as well. Viewing these pages on a PC though will not have the text blocks situated where intended. Click to view a separate page showing <div> style absolute positioning:

Note: A center tag placed before the first <div> style will have all left measurement made from the center. Tables may be used, as they have been here, to contain <div> blocks as a table cell for by doing so measurements are made on the LBB relative to the size of the cell and not the page as a whole which is the case for PC. Also, the WebTV Viewer is of no help when viewing these kinds of nested <div> tags. They show as stacked, whereas both LBB and PC show them as overlapping.

Using absolute positioning, text blocks can be made to overlap. This is done by using the descriptor:

z-index:##

where ## is 0, 1, 2, etc.. Higher value z-indexes have their blocks above those of lower value. Negative values may also be used to reverse the nature of the display. An example is had by clicking the button below:

Backgrounds in a <div> tag are not restricted to solid colors. Images can be used as well. A safeguard must be included, though, for them to be seen. Text or an   must be included between the opening and closing tags, otherwise the display collapses and nothing is seen, e.g.,

Tiling of the image is done within the boundaries set for the <div> block, unless a background descriptor specifies otherwise as in the table below.

background-repeat:value	Result
repeat (default)
repeat-x
repeat-y
no-repeat

Note: When two or more values are applied to the same property, as for the examples, above, e.g.,

the property can be "factored" in the code to provide a shortened notation having the values separated by a space or a semicolon ( ; ), the last value ending with a semicolon:

It can be seen that border images can be generated in this way. Text blocks or another image can be superimposed on a border image using two or more <div> styles with positioning, for the LBB absolute positioning. An example is provided by using <div>tags to create a picture frame:

Note: Absolute positioning is used to display the composite in this example and the composite is intended as being in a table cell. For the LBB, measurement for absolute positioning is done with reference to the table cell. Not so with a PC, which maintains the point of reference as the upper-left of the page. Also, the dimensions used in the <div> tag are the same as those for the image.

A WebTV/MSNTV-only use of local style makes use of gradcolors and seems to have been discovered by R_Endymion. It is a hybrid tag making use partly of local CSS as an attribute and partly gradcolor HTML attributes. Transparency can also be included as an HTML attribute (Newsgroup post by Tyhart). The statement is given below:

The gradcolor block follows:

This is a more convenient way to generate vertical gradcolor lines, at least, than using tables. There is a problem in generating horizontal lines, as there is a default height to the <div> tag used in this way of about 25px.

Some text and font variations are allowed with CSS. Those allowed by the LBB can be done otherwise using HTML tags. An exception, as seen from the table below, is with the text-transform property, which has no corresponding HTML tag. It is possible with this to transform any text in a <div> statement from lower-case to upper-case, upper-case to lower-case, or to have just the first character in every word capitalized.

text-align	text-decoration	text-transform
left right center	none underline line-through	none capitalize uppercase lowercase

LBBers could extend a favor to PCers by writing their hyperlinks in this way:

Without the style attribute shown, the text to click on in a hyperlink is underlined on a PC. Using it suppresses the underlining.

One text property sure to gain favor is the one allowing the first line of a paragraph to be indented. Here it is illustrated using a local style representation. It is more practically applied using a global style, which will be discussed later.

This is a sample. It is written just on a line. The initial indentation seen is due to the property-value pair used - text-indent:50.

Entire paragraphs, and not just the first line of one, can be indented using the descriptor margin-left:## where ## gives the size of the indentation in pixels. This could be shown using <div> style properties, but each paragraph would require a separate <div> statement. As the intent of CSS is to reduce keystrokes as much as possible, the use of this descriptor is best reserved until the discussion of global CSS.

There are a variety of CSS font properties not all of which will work on the LBB. Those that do, and those properties of them that do as well, are shown in the table below.

font-size	font-family	font-style	font-weight
xx-small x-small small medium large x-large xx-large	normal sans-serif monospace	normal italic oblique	normal bold lighter

Note: For the LBB, font-size in CSS is shown as one of the six sizes allowed in an HTML <font> tag. The font-size shown will be the one closest to the HTML font-size.

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:

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:

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:

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):

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.,

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

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.

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

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:

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

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

Linking There are three basic types of style sheet:

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

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.

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.