StyleT 2.0 Guide
CSS Level 1 Validation


Contents

Introduction

Support
Usage
Usage Examples

CSS Style Sheets

Terminology
Style Sheet Examples

StyleT Messages

General Validation Warnings
General Validation Errors
Warnings for CSS Level 1 Extensions

Fast Message Index

E3000 W3002 E3003 E3004 E3005 E3006 E3008 E3009 W3010 W3011 E3012 W3013 W3014 W3016 W3017 E3018 W3019 E3020 W3021 E3023 E3024 W3026 E3027 W3029


StyleT Introduction

The name StyleT stands for Style Tester. However, it is also a surgical probe used for exploratory surgery (Source: American Heritage Dictionary) which is a good description of the work done by this tool!

StyleT provides two major features:

Full CSS Syntax Validation

StyleT performs a series of tests to ensure that the syntax of the files matches the CSS Specification.
The Official CSS Specification can be found on
http://www.w3.org/pub/WWW/TR/PR-CSS1.

CSS Extensions Reporting

StyleT identifies extenions to CSS that are supported by Microsoft Internet Explorer 3.0 and 4.0. This reporting is very useful because it can mean the style sheet may not work in a browser other than Internet Explorer, which tends to be more forgiving that the CSS Level 1 Specification.
For more information on these extensions see http://www.shadow.net/~braden/nostyle/ie3.html (an independent external site).

Support

StyleT is an unsupported tool. We have added it to the Internet SDK because many teams within Microsoft found it useful and we felt Independent Software Vendors and Content Developers would find it equally useful.

You may still mail StySupp@Microsoft.com with comments on this tool, but we can give no guarantee that we can respond to any mails.

Usage

StyleT is a command line application. To run, switch to the MS-DOS Box prompt. To start, just type StyleT. This shows the following help text:

StyleT (Cascading Style Sheet Level 1 Validator) Version 2.0
Copyright (c) 1995-97 Microsoft Corp. All rights reserved.

This tool is unsupported. You can send feedback, suggestions and bug
reports to "StySupp@microsoft.com", but you may not receive a reply.

A full description of all the messages can be found in the accompanying
StyleT Users Guide (StyleT.htm).

StyleT [-p] [-s] [-v] [-w] [-x] filespec
-p Pause after execution
-s Recurse all sub-folders in specified path
-v Verbose
-w Suppress warning messages
-x Suppress warnings about CSS extensions

Usage Examples

StyleT *.*
 Validates all files in a folder

StyleT *.* -v -s > myStyle.log
 Validates all files in the current folder and all folders below it placing the results in a log file.

StyleT c:\myproj\*.css -w > Styles.err
 Validate all the files with the .css extension in the "c:\myproj" folder. Only Fatal and Error messages are produced (-w) and this are placed into the "Styles.err" log file.


CSS Style Sheets

Terminology

Here is a quick introduction to some of the terminology used in this document.

Term

Definition

HTML Tag

HTML Tags are used to format and structure HTML documents. Examples of Tags are "<B>" (bold), "<I>" (Italic), "<A>" (Anchor).

Attribute Name and Attribue Value

Attributes are information inside HTML Tags with the format Attribute Name = Attribute Value. Example:

<img src=x.img alt=Hello>.

The Attributes Names are "src" and "alt". The Attribute Values are "x.img" and "Hello"

Inline Styles

Any HTML Tag can have a Style Attribute. The Attribue Value must be a valid Cascading Style Sheet. Example:

<p style="font-family: courier; font-size: 10pt;" >

Cascading Style Sheet (CSS)

StyleT supports the Cascading Style Sheet Level 1 (CSS) standard.

CSS Selector

The Selector is the name of the style being defined. Example:

H1 {font-family: Arial; font-size: 10pt}

"H1" is the Selector.

CSS Property and Property Value

CSS Property Names and Property Values are where the Style information is defined. Example:

H1 {font-family: Arial; font-size: 10pt}

"font-family" and "font-size" are CSS Properties (or Property Names) and "Arial" and "10pt" are Property Values.

Style Sheet Examples

<STYLE TYPE="text/css">
BODY {font: 12pt Arial; font-weight: bold; color: #006699};
H2 {font: 13pt/15pt "Arial, Courier"; font-weight: bold; color: BLACK; margin-left: 0.5in;}
</STYLE>

<a href="default.htm" style="A:link {font: 14pt Arial, Time New Roman; color: lemonChiffon; font-weight:bold}">Home Page</a>

<!-- Absolute Placement Examples -->
<INPUT id=chkMatchCase style="LEFT: 8px; TOP: 80px; WIDTH: 13px; HEIGHT: 13px" type=checkbox>

Style Sheets can occur in HTML files and also in separate files where the <style> tags are not needed.


StyleT Messages

StyleT performs extensive CSS validation. In addition to this it will also report on other problems in finds in the files if these could prevent it from finding CSS information.

There are 4 kinds of messages:

Information . These all have the prefix ‘i’. They are not warnings or errors, merely notes of interest.

Warnings. These signify minor problems in the files that StyleT is able to deal with since they do not effect validation. They all have the prefix ‘W’.

Errors. These are more serious problems. It means the CSS information is invalid. All these messages have an ‘E’ prefix.

Fatal Errors. These are serious problems where StyleT is unable to continue working on the file and the validation must be aborted. The files must be fixed in order to continue. These messages have the prefix ‘F’.

Context

Most messages will show the file name and the row and column number. If other context information is available it will also be shown.

Cascading Style General Validation

Warnings

W3011 Non-terminated Comment in Style Sheet. Skipping rest of Style Sheet.

Example:

<style>
H1 {font: Courier}; /* start of comment – but no end
</style>

W3014 Style Sheet Syntax Error. HexColor "value" must consist of 3 or 6 digits for "Property Name" Property

The color value when given as a HexColor must have 3 or 6 digits.

Wrong: BIG {font: 10pt Arial; background: #cccc6}
Right: BIG {font: 10pt Arial; background: #0ccc66}

  

Errors

E3000 Style Sheet: Badly formed RGB (Red, Green, Blue) Color Value.

Color value (RGB) is invalid. Example:

Wrong: h1 {color: rgb(-2,0,0);}
Right: h1 {color: rgb(2,0,0);}

E3003 Style Sheet: Expected Value for "Property Name" Property.

No value was given. Example:

Wrong: h1 {font-size: ;}
Right: h1 {font-size: 10pt;}

E3004 Style Sheet Syntax Error. Expected: ':'

A colon (':') was expected. Example:

Wrong: h1 {color}
Right: h1 {color: blue}

E3005 Style Sheet Syntax Error. Expected one of the following selectors: ident, #name, .name, ":link", ":visited", ":active" ":first-line" or ":first-letter"

The expected selector was not found. Example:

Wrong: A:visitd {font: 9pt Arial; color: #000000; font-weight: bold}
Right: A:visited {font: 9pt Arial; color: #000000; font-weight: bold}

E3006 Style Sheet Syntax Error. Expected: '}'

A closing bracket ('}') was expected. Example:

Wrong: h1 {font-size: 10pt 
Right: h4 {font-size: 20pt}

E3008 Style Sheet: Illegal Value "value" for "Property Name" Property.

The given value is not allowed for this property. Example:

h1 {color: DodgyBlue}

E3009 Non-terminated String in Style Sheet. Skipping rest of Style Sheet.

A quoted string in the Style Sheet has not been properly terminated. Example:

Wrong: H1 {font: "Courier };
Right: H1 {font: "Courier"};

E3012 Style Sheet Syntax Error. Expected: ';'

The syntax of the Style Sheets is invalid. The expected character was not found.

Wrong: <p style="color: red  font-size: 10pt">
Right: <p style="color: red; font-size: 10pt">

E3018 Style Sheet Syntax Error. Expected one of the following elements: ident, string, number {unit}, #ffffff, url(...), rgb(...).

Expected item was not found. Example:

Wrong: H1 {font:  }
Right: H1 {font: 10pt Arial;}

E3020 Style Sheet Syntax Error. Expected: '{'

An opening bracket ('{') was expected. Example:

Wrong: H1  font-size: 10pt}
Right: H1 {font-size: 10pt}

E3023 Style Sheet Syntax Error. Invalid Property Name: "Property Name"

The Property Name is not valid. Example:

Wrong: P {font-name: Arial}
Right: P {font-family: Arial}

E3024 Style Sheet: Badly formed URL.

The URL value is invalid. Example:

Wrong: Body {background: url(texture.gif white;}
Right: Body {background: url(texture.gif) white;}

E3027 Unexpected end of style sheet.

The Style Sheet ended unexpectedly. Example:

Wrong: <style>Body </style>
Right: <style>Body {background: white} </style>

Cascading Style Sheet Level 1 Extensions

These are known extensions specific to Internet Explorer 3.0 and 4.0. Since they are not in the CSS Level 1 specification, there is no guarantee other browsers support them.

Extension Warnings

W3002 Style Sheet Syntax Error. Illegal semicolon ';' found.

These are very commonly placed between Selectors. Example:

H1 {font-family: Arial;};

W3010 Style Sheet Syntax. Quotes used around non-string Value (value) of 'Property Name' Property

According to CSS1, this item should not be quoted. Example:

H1 {color: "white"}

W3013 Style Sheet Property Name is an extension to CSS1: ‘Property Name’

This property is non-standard according to CSS1. Example:

<img src=xxx.gif style="Width: 40px; Height: 40px; Top: 40px; Left: 40px">

W3016 Style Sheet Syntax. '#' missing from HexColor Value "value" for "Property Name" Property.

According to CSS1, all HexColor values should be preceded by ‘#’. Example:

Wrong: BODY {margin-left=0; font: 9pt Arial; color: 000000;}
Right: BODY {margin-left=0; font: 9pt Arial; color: #000000;}

  

W3017 Unexpected ‘@import’ in the middle of Style Sheet

This element should occur first in a Style Sheet.

<STYLE TYPE="text/css">
H1 {color: blue }
@import url(http://style.com/basic);
</STYLE>

W3019 CSS1 Style Sheet Syntax. '=' used instead of ':'

This is very common after Property Names. Example:

Wrong: H1 {font-family = courier}
Right: H1 {font-family: courier}

W3021 Style Sheet Property Value (value) for ‘Property Name’ is an extension to CSS1.

This value is non-standard according to CSS1. Example:

P {color: HotPink}

W3026 Style Sheet: Non-standard HTML comment used: "comment". Expected "<!--" or "-->" for CSS1.

CSS1 only specifies that comments of the format ‘<!-- … -->’ be used to wrap Style Sheets. Example:

Wrong: <STYLE> <!- h1 {color: white} -> </STYLE>
OK: h1 {color: white} <!-- Here is my comment -->
Right: h1 {color: white} /* Here is my comment */

W3029 Negative Margin Value used for Property. This may result in illegible output in CSS compliant browsers.

There are significant differences in the interpretation of negative margin value between Internet Explorer 3.0 and 4.0. This warning is there to help you pinpoint these styles so that you can check they work correctly in different browsers. Example:

<h1 {margin-left: -40pt; }