Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<h1>Cascading HTML style sheets -- a proposal</h1>
<address>
<a href="http://www.w3.org/hypertext/WWW/People/howcome/">Håkon W Lie</a><br>
howcome@info.cern.ch<br>
10 Oct 1994
</address>
<p>
</p><hr>
<note role="caution">
v0.92 This document describes work in progress and is incomplete as a
basis for implementation. Its primary purpose is to establish guiding
principles and propose a level of functionality for HTML style
sheets. Comments are solicited.</note>
<hr>


<h2>Abstract</h2>

This document proposes a style sheet scheme for HTML documents. The
proposed scheme provides a simple mapping between HTML elements and
presentation hints. Properties like font family and window size can be
suggested by the style sheet, and it can also provide logic to make
presentation decisions based on the user's environment; e.g. the size
of the screen or the current date.

<p>

The style sheet scheme is designed so that style sheets can be
cascaded; the user/browser specifies initial preferences and hands the
remaining influence over to the style sheets referenced in the
incoming document. This will provide publishers with stylistic
influence without resorting to page description languages.

</p><p>

The scheme supports visual as well as non-visual media.



</p><h2>Introduction</h2>

Style sheets are a part of the web today. Browsers, espesially the GUI
variants, support ways for the user to specify presentation parameters
like fonts and colors. There are several reasons why the current
functionality is not sufficient:

<ul>
<li>

current style sheets are static, they seldom change within the
lifetime of a browser process. This makes the visual environment
sparse.

</li><li>

current style sheets are implemented using platform-specific
notations, e.g. X11 resources. While some may consider this to be a
feature, it prohibits general mechanisms for passing styles over
the web.

</li><li>

the author of HTML documents has no influence over the
presentation. Indeed, if conflicts arise the user should have the last
word, but one should also allow the author to attach style hints.

</li></ul>

The last point has especially been a source of much frustration among
professions that are used to be in control of paper-based
publishing. This proposal tries to soften the tension between the
author and the reader by: <dl><dt></dt><dd>

<strong>a)</strong> giving readers a
richer visual (or auditory and tactile) environment while they retain
control if necessary, and <br><strong>b)</strong> providing authors
and publishers with stylistic influence without resorting to page
description languages.</dd></dl>

<p>

The proposed scheme is balanced in the sense that it provides author
and reader with the same notation for specifying style. While the
author (or publisher) often wants to give the documents a distinct
look and feel, the user will set preferences to make all documents
appear more similar. Designing a style sheet notation that fill both
groups' needs is a challenge.


</p><h2>The cascade</h2>

The proposed scheme supplies the brower with an ordered list (cascade)
of style sheets. The user supplies the initial sheet which may request
total control of the presentation, but -- more likely -- hands most
of the influence over to the style sheets referenced in the incoming
document.

<pre>   &lt;LINK REL="style" HREF="http://NYT.com/style"&gt;
</pre>

The LINK element is used to indicate the URL of the style
sheet. Multiple style sheets can be referenced from the same document,
and will be appended to the cascade and merged as they are
encountered.

<p>

Style sheets can reference other style sheets, and the cascase can be
infinitely long. Browsers will have to limit the length of the
cascade. Fetching and processing the cascade is potentilally
expensive, but caching will reduce the cost.

</p><h2>Some simple examples</h2>

Rather than providing a formal definition of the style sheet language,
this proposal includes examples that indicate where work in progress
is heading. The concepts of cascading and weighted influence is more
important than the specific list of style values that can be set. (A
reasonable list of such parameters can be found in <a href="http://gummo.stanford.edu/html/hypermail/.www-talk-1993q2.messages/443.html">Robert Raisch's stylesheet
proposal</a>).

<p>

A one-statement style sheet that sets the font size of the <tt>h1</tt> element:
</p><pre>   h1.font.size = 24pt 100%
</pre>

The percentage at the end of the line indicates what degree of
influence that is requested (here 100%). If this is the initial style
sheet (i.e. the one under user control), this request can be
fulfilled, i.e. all headline elements will be rendered using
<tt>helvetica</tt>. If the statement comes in a later style sheet, any
unclaimed influence is granted.

<pre>  h2.font.size = 20pt 40%
</pre>

Here, the requested influence is reduced to 40%. If a style sheet
later in the cascade also requests influence over
<tt>h2.font.size</tt>, up to 60% can be granted. When the document is
rendered, a weighted average of the two requests is calculated, and
the final font size is determined.

<pre>   30%
   h1.font.family = times
</pre>

This stylesheet first requests a default influence of 30% which is
applied to all following statements unless otherwise specified. This
leaves 70% of the influence to upcoming style sheets which may set
other values. For continuous values, e.g. the font size, mixing
influences is not problematic -- one simply calculates the weighted
average if they differ. For discrete values, e.g. the font family, it
may not be obvious how to mix 40% <tt>helvetica</tt> and 60%
<tt>times</tt>. Some will argue that font families certainly can be
parameterized and mixed, others that one should select the request
with the highest influence. The issue deserves more research for which
this proposal leaves room.

<pre>   40%
   font.family = times
   h1.font.family = helvetica 100%
</pre>

The first statement sets the font family of <strong>all</strong>
elements to times. An alternative syntax using well-known wildcard
symbols is <tt>*.font.family = times</tt>.<p>

The second statement overrides the font family value for the
<tt>h1</tt> element and requests absolute control (100%) for this.
</p><p>

The order of the two statements above is irrelevant -- the more
specific statements will override the more general ones.

</p><pre>   60%
   AGE &gt; 3d ? background.color = pale_yellow : background.color = white
   DISPLAY_HEIGHT &gt; 30cm ? http://NYT.com/style : http://LeMonde.fr/style
</pre>

In this example, parameters from the user's environment is taken into
account when determining the style sheet values. The C-style syntax of
the first statement reads: If the document is older than three days,
the background color should be pale yellow, else the backgound color
should be white. The second statement references other style
sheets. If the height of the display is less than 30 cm, the NYT style
will inherit the remaining influence, otherwise the LeMonde style will
be given these rights.

<pre>   RELEVANCE &gt; 80 ? h1.font.size *= 1.5
</pre>

In newspapers, the size of the headlines tell us how important the
editor believes the article is. As digital agents and personalized
information filters become available, the typography of HTML documents
should also be influenced by the relevance of each document for each
individual user. Given a relevance factor, the above statement
multiplies the font size of <tt>h1</tt> by 1.5.

<pre>   http://NYT.com/style 30%
   http://LeMonde.com/style 70%
</pre>

This style sheet sets no parameters of its own. Instead, it references
two other sheets and assigns them different weights. If no previous
style sheets has claimed influence, the resulting presentation will be
a mix of NYT (30%) and LeMonde (70%).

<pre>   speech.*.weight = 35db
   speech.em.weight = 40db
</pre>

Current browsers consider the computer screen to be the primary
presentation target, but HTML -- different from the page description
languages -- has the potential of supporting many output media,
e.g. paper, speech and braille. Each medium has its own
characteristics which may require different presentation parameters to
be set. The example above sets values for the <tt>speech</tt> medium.
while all previous statements by default set values for
<strong>all</strong> media.

<pre>   align.style = left
   head.align.style = center
   print.head.align.style = right
</pre>

Both HTML elements and media types have been grouped to allow for more
general statements. In the above example, the first statement
establishes a default left alignment for all elements in all
media. The second statement changes the setting for headline elements
(<tt>h1 .. h6</tt>) in all media. The last statement is more specific;
it requests headlines to be right-aligned when printed. <tt>print</tt>
is itself a group consisting of e.g. <tt>print_color</tt> and
<tt>print_mono</tt>.

<pre>   font.size *= 2 100%
</pre>

This single statement style sheet will, if given the influence, double
the font size of all paragraphs. A style sheet like this could
conveniently be merged in when the user selects "double font size"
from a pulldown menu. One could easily duplicate the functionality of
e.g. Mosaic's font options this way. Also, one can imagine far more
powerful user interfaces that takes into account the advantages of
cascading style sheets:
<pre>          User            Author
   Font   o-----x--------------o 64%
   Color  o-x------------------o 90%
   Margin o-------------x------o 37%
   Volume o---------x----------o 50%
</pre>

Here, <tt>x</tt> represents the handles of slide bars. The output of this
interaction is the percentage values that are attached to the
statements in the user's style sheet.


<h2>Unresolved issues</h2>
<ul>

<li><tt>LINK</tt> elements are only allowed in the <tt>HEAD</tt> of
the document. There should be a way of adding and subtracting style
sheets from within the document. This would allow for the nesting of
style sheets within a document.

</li><li>In its finest resolution, the current notation attaches style
values to one HTML element. There should also be a way to specify style
settings for attributes.

</li><li>The order of the statements in the style sheets is irrelevant; the
more specific ones override the more general ones. A precise
definition of the rules for this is needed. E.g., wwhich is the more
general among <tt>print.head.font.size = 20pt</tt> and
<tt>h1.font.size = 14pt</tt>.

</li></ul>


<h2>Limitations</h2>

In order to keep the complexity low for both the style sheet writers
and the browser programmers, the proposed scheme has many limitations.

<ul>
<li> While a style sheet may look like a procedural program, it lacks
many of the constructs of traditional programming languaguages, e.g.:
compound statements, variables, and/or. Rather, the style sheets are
declarations of constraints.

</li><li> Much due to the above point, some seemingly normal statements
will not be allowed. Notably, all conditional statements must be
resolved when the style sheet is read. The statement <tt>h1.font.size
&gt; 20pt ? h2.font.size = 15pt</tt> is illegal since the value of
h1.font.size is allowed to change.

</li><li> Statements can not be granted groupwise influence. E.g., one
cannot specify that statement A should always have the same influence
as statement B.

</li><li> The notation is quite verbose. Fetching and parsing a cascade
of complex style sheets is potentially expensive. Caching will reduce
the cost.

</li></ul>

<h2>Implementation</h2>

An implementation of the proposed scheme is planned. Most of the code
can and should be put into the common code library so that browsers
easily will be able to support style sheets.

<h2>Acknowledgement</h2>

The author wishes to thank Dave Raggett, Phill Hallam-Baker and Tim
Berners-Lee for fruitful discussions. Also, Robert Raisch's earlier
stylesheet proposal has been influential. All errors are my own.


<h2>Appendix A</h2>

<h3>A more complex example</h3>

<pre>#
# This is an initial style sheet. It should provide fallback values
# with low influence. Also, at the end, the user has added some
# favorite settings
#

0%			# 0% impact, i.e. fallbacks

# first, set some common defaults

font.family = times	
font.size = 12pt		# alternative units are px, mm, cm
font.slant = normal
font.weight = normal

h1.font.size = font.size * 3
h2.font.size = font.size * 2.5
h3.font.size = font.size * 2

strong.font.weight = bold
em.font.slant = italics
tt.font.spacing = proportional


align.style = left		# paragraph alignment
h1.align.style = center


space.left = 0pt		# set the white space surrounding paragraphs
space.right = 0pt
space.above = 4pt
space.below = 4pt
space.first = space.left + 0.5cm 	# i.e. some extra indentation

head.space.above = 15pt			# straying from the 4pt default above

list.space.left = 1cm			# extra indentation for all lists
list.space.first = 1cm

# window-wide settings

AGE &gt; 3d ? window.background = pale_yellow : window.background = white

window.foreground = black

window.width = 400px
window.height = REAL_HEIGHT - 50px

window.margin.left = 2cm
window.margin.right = 2cm
window.margin.above = 2cm
window.margin.below = 2cm

#
# paper works different
#

print.font.size = 10pt

#
# The user has redefined some of the default values below
#

100%	# first, redefine influence to dictatorship

font.family = helvetica 

#
# after this, the rest of the influence is handed over to the style
# sheets of the incoming documents
# 
</pre>
<a href="cascade-present.html">slides</a>

              
            
!

CSS

              
                /* 
This is the original  CSS proposal from  1994,  
which includes an example  of cascading two styles together:

   http://NYT.com/style 30%
   http://LeMonde.com/style 70%

We don't have a way to do % weighting, but
I added the style sheets from the New York Times and Le Monde websites,
(see the pen settings).
Sadly: without applying class names and other selector-hooks, 
we don't get much more than a reset.

Oh well, it was fun to try…
*/
              
            
!

JS

              
                
              
            
!
999px

Console