Web Programming Samples and References

Cascading Style Sheets
(CSS 2/2.1/3)

CSS Counters — The CSS Box

Counter()/Counters() — Border/Padding/Margin

Counters

Using counter() and counters()

Counters may be specified with two different functions: "counter()" or "counters()". Each has two forms: the former, "counter(name)" or "counter(name, style)", while the latter "counters(name, string)" or "counters(name, string, style)".

counter()

To refer to the value of a single counter, the notation

counter(<identifier>)

or

counter(<identifier>, <"list-style-type">)

is used (white space is generally optional).

The generated text is the value of the innermost counter of the given named counter in scope at this pseudo-element (i.e., the most-nested named counter). The counter is formatted in the indicated style ("decimal" by default).

counters()

To refer to the value of a sequence of nested counters of the same name, the notation

counters(<identifier>, <string>)

or

counters(<identifier>, <string>, <"list-style-type'>)

is used.

The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string (i.e., the value of the full nesting of the named counter). The counters are rendered in the indicated style ('decimal' by default).

Usage

For both,

• The name must not be "none", "inherit" or "initial", as such a name causes the declaration to be ignored (while these may seem to be unlikely names, "initial" actually could be a logical name in some instances).
• White space is generally optional; however, some versions of some browsers have problems with white space around the comma delimiters
• The "content" function is required to generate the visible string.
• A counter is usually associated only with ordered lists; however, any element may be counted (e.g., <h1> elements may be counted to generate an automatic numbering).
• Note that the two functions, counter() (without the "s") and counters() (with the "s") do completely different things: the former holds the count over iterations of an element, while the latter indexes an entire nesting sequence but terminates with the closing of the one iteration of the nesting element.
• Also note that it is possible to accomplish both tasks. It also requires a specific technique to nest ordinary ordered list within a lsit based on counter(). (Examples of each of these are below.)

The counter() function is useful when it is required to break an ordered list with some other content not included in the list (i.e., closing the list for standard text, then restarting the list, e.g., a numbered series of mathematical formulas separated by descriptions or comments). For example, this CSS

  body {
    counter-reset : power_loss }                      /* -- Initializes a document-wide counter ("power_loss")  */

  ol.power_loss { 
    border-left       : 1.3em      ;
    list-style-type   : none       }                  /* -- Surpresses generation of the default counter  */

  ol.power_loss li:before {  
    counter-increment : power_loss ;                  /* -- Increments only this instance of the "power_loss" counter   *
    content           : counter(power_loss) ".  " }    * -- Prints the value of the sections counter, separated         *
                                                       *      from the list by a dot and space                          */

combined with the following html fragment

<ol class="power_loss">
  <li> divide both sides of the equation by power through the line, 
    <div class="formula">P<sub>loss</sub> / <b>P</b> = I<sup>2</sup>R / <b>P</b></div><br /></li>
  <li> on the right side of the equal sign, substitute for the R in the numerator and for P in the denominator, 
    <div class="formula">P<sub>loss</sub> / P =  ( <b>I<sup>2</sup>*[V/I] )</b> / <b>( V<sup>2</sup>/R</b> )</div><br /></li>
  <li> which simplifies to 
    <div class="formula">P<sub>loss</sub>/P =  ( <b>I * V</b> ) / ( V<sup>2</sup>/R )</div><br /></li>
  <li> which rearranges to 
    <div class="formula">P<sub>loss</sub>/P =  ( I * V ) <b>* (R / V<sup>2</sup>)</b> </div><br /></li>
  <li> which simplifies (finally) to 
    <div class="formula">P<sub>loss</sub>/P =  ( <b>P</b> ) * (R / V<sup>2</sup>)</div><br /></li>
  <li> so 
    <div class="formula">P<sub>loss</sub>/P = PR/V<sup>2</sup></div></li>
</ol>
<p class="StdText">
The fraction P<sub>loss</sub>/P is the percentage loss in the line, or the "loss fraction."</p>
<p class="StdText">
Since P is fixed by community demand (as it exists at any given time), 
and R is as small as can be made (using heavy copper cable, for example) and generally fixed;
thus,</p>
<ol class="power_loss">
  <li>holding R constant, the right side of formula six reduces to
    <div class="formula">P<sub>loss</sub>/P = P/V<sup>2</sup></div></li>
</ol>
<ol>
  <li>blah blah</li>
  <li>blah blah</li>
</ol>

yields this result:

• NOTE: the sequence from 6 to 7 is broken by two paragraphs after the ordered list is closed and then reopend.
• NOTE: the end sequence is the standard list-style format.

The counters() function is useful to make outlined lists, as a new instance of a counter — that is, a new counting sequence but with the same identifier, so it is a level within a nesting — is automatically created in child elements. Facilitating this, the counters() function allows for a string can be inserted between different levels of nested counters. For example this CSS

  ol.section, 
  ol.section > li > ol , 
  ol.section > li > ol > li > ol {
    list-style-type: none    ;           /* -- Surpresses generation of the default counter                         *                           
    counter-reset: section   }            * -- Creates a new instance of the "section" counter with each ol element */

  ol.section li:before { 
    counter-increment: section;          /* -- Increments only this instance of the "section" counter                                       * 
    content: counters(section,".") " "}   * -- Concatenates & prints the value of all instances of the section counter, separated by a "."  * 
                                          *    The final space in the content function pads the concatenated counter with a space           */

combined with the following html fragment

<ol class="section">
  <li>Cats</li>               <!-- 1     -->
  <li>Dogs                    <!-- 2     -->
    <ol>
      <li>Chows</li>          <!-- 2.1   -->
      <li>Pugs</li>           <!-- 2.2   -->
      <li>Dauchshunds         <!-- 2.3   -->
        <ol>
          <li>Standard</li>   <!-- 2.3.1 -->
          <li>Miniature</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>Smooth</li>     <!-- 2.3.1 -->
          <li>Long Hair</li>  <!-- 2.3.2 -->
          <li>Wire Hair</li>  <!-- 2.3.3 -->
        </ol></li>
      <li>Terriers</li>       <!-- 2.4   -->
    </ol></li>
  <li>Parrots</li>            <!-- 3     -->
  <li>Snakes</li>             <!-- 4     -->
</ol>
<ol class="section">
  <li>blah blah</li>          <!-- 1     -->
  <li>blah blah</li>          <!-- 2     -->
</ol>         
<ol>
  <li>blah blah</li>          <!-- 1     -->
  <li>blah blah</li>          <!-- 2     -->
</ol>

yields this result:

• NOTE: the sequence 2.3.1, 2.3.2, 2.3.1 where the ol element is closed then reopend.
• NOTE: the end two sequences, where (1) the counter resets once the nesting is closed and (2) the standard list-style format.

Using counter() and counters() in the same list

To combine the counter() and counters() functions, this CSS fragment works in both IE and Mozilla

  body { counter-reset : master }

  ol.master ,
  ol.sub001 { 
    border-left     : 1.3em ; 
    list-style-type : none  }

  ol.master li:before {
    counter-increment : master 1 sub001 0 ;
    content : counter(master) ") " }

  ol.sub001 { counter-reset : sub001 }

  ol.master li ol.sub001 li:before {
    counter-increment : master 0  sub001 1 ;
    content : counter(master) "." counters(sub001,".") ") " }

along with this html code

<ol class="master">
  <li>first</li>
  <li>second</li>
  <li>third
    <ol class="sub001">
      <li>third,one</li>
      <li>third,two
        <ol class="sub001">
         <li>third,two,one</li>
         <li>third,two,two
           <ol class="sub001">
             <li>third,two,two,one</li>
             <li>third,two,two,two</li>
           </ol></li>
         <li>third,two,three</li>
        </ol></li>
      <li>third,three</li>
    </ol></li>
  <li>fourth
    <ol class="sub001">
      <li>fourth,one</li>
    </ol></li>
</ol>
<p>New Instance</p>
<ol class="master">
  <li>fifth</li>
  <li>sixth</li>
</ol>

[See the code output here.]

Notes:

1. Each of the descendant ordered list elements must carry the class associated with the counters() function (it does not cascade as expected, and writing an all-encompassing selector becomes awkward).
2. For IE, a valid DTD must be in postion at the top of the file (use appropriate judgement in selecting a DTD that corresponds to the rest of the document, e.g., html 4.1 strict, xhtml 1.0 transitional, xhtml 1.1, etc. [remember: code to standards]).

Using counter() with ordinary descendant <ol> aelements

When a list controlled through the counter() function contains one or more descendent ordered lists which are not part of a counter() function, the embedded lists will increment the containing counter() function. To to surpress that incrementing, supply an alternative class to the embedded ordered lists. The following CSS fragment works in both IE and Mozilla [very similar to the above using counters()]

  body { counter-reset : master }

  ol.master ,
  ol.sub001 { 
    border-left     : 1.3em ; 
    list-style-type : none  }

  ol.master li:before {
    counter-increment : master 1 sub001 0 ;
    content : counter(master) ") " }

  ol.sub001 { counter-reset : sub001 }

  ol.master li ol.sub001 li:before {
    counter-increment : master 0  sub001 1 ;
    content : counter(sub001) ") " }

along with this html code

<ol class="master">
  <li>first</li>
  <li>second</li>
  <li>third
    <ol class="sub001">
      <li>third,one</li>
      <li>third,two
        <ol class="sub001">
         <li>third,two,one</li>
         <li>third,two,two
           <ol class="sub001">
             <li>third,two,two,one</li>
             <li>third,two,two,two</li>
           </ol></li>
         <li>third,two,three</li>
        </ol></li>
      <li>third,three</li>
    </ol></li>
  <li>fourth
    <ol class="sub001">
      <li>fourth,one</li>
    </ol></li>
</ol>
<p>New Instance</p>
<ol class="master">
  <li>fifth</li>
  <li>sixth</li>
</ol>

[See the code output here.]

Notes:

1. For IE, a valid DTD must be in postion at the top of the file (use appropriate judgement in selecting a DTD that corresponds to the rest of the document, e.g., html 4.1 strict, xhtml 1.0 transitional, xhtml 1.1, etc. [remember: code to standards]).

General Examples: margin/border/padding

General format of margin, padding, and border:

(All examples, unless otherwise noted, are contained within a white box with shaded sides)

• Individual width/style/colors for top, right, bottom, and left (in that order) may be set
  (e.g., margin: 0em 2em 1em 2em ).
• These may be individually set, as in "border-top", "border-right", "border-bottom", "border-left".
• The order is
  • If one spcifications is given, the order is top/bottom/right/left
    (e.g., margin: 0em )
  • If two spcifications are given, the order is top/bottom right/left
    (e.g., margin: 0em 2em )
  • If three spcifications are given, the order is top right/left bottom
    (e.g., margin: 0em 2em 1em )
  • If four spcifications are given, the order is top right bottom left
    (e.g., margin: 0em 2em 1em 2em )

Specific Usage Examples

Margin Alone:

Padding Alone:

Border Alone:

Margin Top/Bottom & Right/Left:

Margin Top/Right/Bottom/Left (Example One):

Margin Top/Right/Bottom/Left (Example Two):

Margin & Padding:

Padding & Border:

Margin & Border:

Margin, Padding, & Border:

Additional Border Examples

From the World Wide Web Consortium:

The <border-style> value type, which may take one of the following values:

none

No border; the computed border width is zero.

hidden

Same as 'none', except in terms of border conflict resolution for table elements.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of 'groove': the border looks as though it were coming out of the canvas.

inset

The border makes the box look as though it were embedded in the canvas.

outset

The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.

Playing with these we get the following (all are padded-out 5pt to make them a bit more readable with a 1-em margin below):

Tables: margin/border/padding

(1) Effect of Margins in Tables

The following style is used:

  .margin {
    color: red ;
    margin-top: 2em ;
    margin-right: 3em ;
    margin-bottom: 2em ;
    margin-left: 3em ; }

Note that assigning the class to the <td> element has no effect, but assigning the class within the <td> element via (in this example) a <div> element produces the anticipated effect.

(2) Effect of Padding in Tables

The following style is used:

    .padding {
      color: red ;
      padding-top: 2em ;
      padding-right: 3em ;
      padding-bottom: 2em ;
      padding-left: 3em ; }

Note that assigning the class to the <td> element or within the <td> element via (in this example) a <div> element both produce the anticipated effect (although note the slight differences in the rows if the browser window's width is slightly adjusted).

(3) Effect of Borders in Tables

The following style is used:

  .border {
    color: red ;
    border-color: #ccffff ;
    border-width: 2em ;
    border-style: double }

Note that assigning the class to the <td> element or within the <td> element via (in this example) a <div> element both produce the anticipated effect.

Horizontal Rule Control

The traditional way of controlling the position, shading, and size of horizontal rules has been to do something like this:

<hr align="left" width="5" size="5px" noshade="noshade" />

Which would produce this:

In the strict modes of html 4.1 and xhtml 1.0 and in xhtml 1.1, none of those attributes exist, so all control of the horizontal rule must be accomplished by use of CSS. This is not altogether intutive, but once the techniques are identified it is farily easy. For the above example, the following code was used:

<div style="
    margin-top: 1em ;
    margin-left: 0 ;
    margin-right:75% ; 
    background: #808080 ; 
    color: #808080 ;
    border-top: solid 5px "></div>

The horizontal rule may be created by either a <div> element or a <hr /> element, so this also works:

<hr style="
    margin-top:1em ;
    margin-left:0 ;
    margin-right:75% ; 
    background: #808080 ;
    color: #808080 ;
    border: 1px solid ;
    height:5px " />

In the above examples, there are some duplication of controls to account for differences in how Netscape/Mozilla and Internet Explorer draw the line.

The prevailing philosophy at W3C is to move away from using specialized markup to draw the page but instead use the containing elements of the content to format the rendering. Thus, instead of of the following code fragment . . .

<hr />
<p>Some irrelevant confabulations here.</p>

which would be rendered thus:

the following would be recommended:

<p  style="
    margin : 0.5em 0 1em ;      /* space the paragraph with respect to page and surrounding content */ 

    border-top-color : #cccccc ; 
    border-top-style : groove ; /* format horizontal rule */ 
    border-top-width : 3px ;  

    padding-top : 1em           /* position paragraph content with repect to horizontal rule */ 
    ">
Some other irrelevant confabulation here.</p>

which would be rendered thus:

That notwithstanding, legacy pages are full of <hr /> elements, and it may be easier for developers to modify them to conform to html/xhtml strict standards than to replace them outright. That stated, here are some more examples using the <hr... format:

Example One

<hr 
  style=" 
    height: 3px;
    border-color: #888; 
    border-style :inset ; 
    border-width: 1px " />

This is pretty much the default <hr />, which simply entered as <hr /> looks like this:

Example Two

With adjustment of the margins it may be moved across the page, with more control than simply left/center/right:

Example Two: A

<hr
  style="
    margin: 0px 2% " /> 

Example Two: B

<hr 
  style=" 
    margin: 0px 25% " />

Example Two: C

<hr 
  style=" 
    margin: 0px 25em 0px 10% " />

Example Two: D

<hr 
  style=" 
    margin: 0px 10% 0px 55% " /> 

Example Three

A thin, unshaded line:

<hr style=" 
    margin: 0 auto 0 ; width: 100% ; height: 1px ;
    color : #333333 ; 
    shade : noshade ; 
    background-color : #ffffcc ;
    border-top    : 1px solid ;
    border-bottom : 1px solid  " />

Example Four

A thicker, unshaded line:

<hr 
  style="
    color: #666;
    background-color: #666;
    height: 3px;
    border: none " />

Example Five

A few additional examples:

<hr 
  style="
    color : #fff ; 
    height: 5px ; 
    border: 2px inset #000 " />

<hr 
  style="
    margin: 0 auto 0 ; 
    width: 30% ; 
    height: 3px " />

<hr 
  style="
    margin: 0 auto 0;
    width: 10% ; 
    height: 3px ;
    background    : gray   ;
    border-top    : gray  1px solid ;
    border-bottom : gray  1px solid " />

Notes

1. Use padding instead of <blockquote> or tables for formatting. For example,
   <span class="padding">
   -- OR --
2. Use margin instead of <blockquote> or tables for formatting. For example,
   <span class="margin">

   ---

   (unless, of course, it really is a blocked-quote)
   For the two above examples, the following style was used:

     <style type="text/css">
       .margin {
         color: red ;
         margin-top: 2em ;
         margin-right: 3em ;
         margin-bottom: 2em ;
         margin-left: 3em ; }
       .padding {
         color: red ;
         padding-top: 2em ;
         padding-right: 3em ;
         padding-bottom: 2em ;
         padding-left: 3em ; }
     </style>
   

3. Simple indent of the first line of a paragraph is accomplished with "text-indent".

4. The background style of the various areas of a box are determined as follows:

   • Content area: The 'background' property of the generating element.
   • Padding area: The 'background' property of the generating element.
   • Border area: The border properties of the generating element.
   • Margin area: Margins are always transparent.

   Thus,

     <style type="text/css">
       body {
         background-color: white }
       td {
         background-color: #ffffff }
     </style>
   

   produces backgrounds of white in general, but yellow in table data cells (     ) .

5. Padding may have a background color, unlike Margin, which is transparent:
   here it is
   (Note: the above is aligned under the "P" in "Padding" as part of the indent for the <li> elements.)
   
   The style for the above is as follows:

   <style type="text/css">
     .padding_background_demo {
       font-weight: bold ; 
       font-size: 20px ; 
       color: blue ; 
       background: #ccffcc ; 
       padding: 1em 5em }
   </style>
   

   Notes:
   • The color of the padding area is set with the background property of the element having the padding.
   • The "em" unit, an "m", is a relative measure, relative to the element's font size: "1em" is equal to the size of the font in use.
   • The "px" unit, pixels, is a relative measure, relative to the viewing device.

References:

Contact DocSteve

Copyright © 2004 - 2014
Steve Sconfienza, Ph.D.
All Rights Reserved