http://www.w3.org/Style/Group/1998/07/tvweb-style.html
TV-Web style sheet: http://www.w3.org/Style/Group/1998/07/tvweb.css
This has been sent to the www-tv@w3.org mailing list for comments on the contents and on further actions.
The "tvweb.css" style sheet takes the default style sheet from the CSS2 Recommendation and overrides a few of the properties, as explained below. The result is a style sheet that can be used as a convenient baseline style for Web pages displayed on a TV.
The sample style sheet (default style sheet) from the appendix to the CSS2 Recommendation describes the typical rendering of HTML, as described by the HTML 4.0 Recommendation, and which is the default in many browsers.
The style sheet described below is intended to provide a baseline rendering for HTML on TV devices. It can be used in two ways: Web pages can include it, either by reference or directly; or it can be hard-coded in TV browsers, in which case Web page writers don't even have to include it explicitly. It is a "baseline" in the sense that it isn't specialized for any type of page in particular. Most page authors will want to add their own rules to it.
Some of the rules below are culled from Web-TV's design guide, in particular the body's font, colors, and margins.
The base font is set to 18px. All fonts are sans-serif. The body has a margin of 6px on top, 8px on the sides, and 36px on the bottom:
BODY {
font: 18px helvetica, sans-serif;
margin: 6px 8px 36px 8px}
Source anchors are light blue (unvisited), light purple (visited), or have an off-white background (active):
.link, A:link {
color: #AAF; background: #191919;
text-decoration: none}
.visited, A:visited {
color: #FAF; background: #191919;
text-decoration: none}
.active, A:active {
background: #EFEFEF; color: #FAF;
text-decoration: none}
The .link/.visited/.active classes are added to allow text to be given the same color as an anchor, without being an anchor, as in the previous paragraph.
Headings are all bold, and set to either small-caps or a larger size. They have one white line above and below them. There are 4 sizes (100%, 120%, 140%, and 160% of 20px):
H1, H2, H3, H4, H5, H6 {margin: 18px 0em}
H1, H2, H3, H4, H5, H6 {font-weight: bold}
H6, H4, H2 {text-transform: uppercase}
H6 {font-size: 100%}
H5, H4 {font-size: 120%}
H3, H2 {font-size: 140%}
H1 {font-size: 160%}
Background is set to a dark gray (9.8%). Text color is off-white (94%):
BODY {background: #191919; color: #EFEFEF}
There is no whitespace around paragraphs. Use the "small-break" predefined class to start a paragraph with a white line above it.
Paragraphs are not indented, and not justified. UL lists have a narrow margin (1em), just enough for the bullet; OL lists have a somewhat wider margin (2em), enough for 2 digits and a period.
There is also no whitespace above and below lists and list items, but there is around BLOCKQUOTEs (same amount as "small-break"):
P, LI, DT {margin: 0em}
UL {margin: 0em 1em}
OL {margin: 0em 2em}
DL {margin: 0.8em 0em}
DT {font-style: italic}
DD {margin: 0em 0em 0em 1em}
BLOCKQUOTE {
margin: 0.8em 1em; font-style: italic}
.small-break {margin-top: 0.8em}
Some useful classes to put on elements, e.g. <P
class=warning>, or <DIV class=colophon>.
.warning {
font-weight: bolder;
background: yellow; color: black;
padding: 0.1em}
.colophon {display: none}
Emphasized text is italic, except when inside other emphasized text, or inside a blockquote, in which case it is roman:
BLOCKQUOTE EM, EM EM {font-style: normal}
The same text is displayed with three different styles:
(Note: limitations and bugs in browsers may cause some features not to be displayed, or to be displayed incorrectly.)