copyright © CSSPG, lud June 19 1999


 for practical use of CSS

Examples: Translations from HTML to CSS

this document is located at...
<URI:http://css.nu/examples/dep-examples.html>

* Example: <B>*

This shows use of the <B>bold</B> element.

The CSS way:

   <SPAN STYLE="font-weight: bold;">

This demonstrates bold.

* Example: <BIG>*

This shows use of the <BIG>big</BIG> element.

The CSS way:

   <SPAN STYLE="font-size: bigger;">

This demonstrates bigger.

* Example: <BLINK>*

This shows use of <BLINK>.

The CSS way:

   <SPAN STYLE="text-decoration: blink;">

This demonstrates blink.

* Example: <CENTER>*

This shows use of the <CENTER>
CENTER
</CENTER> element.

The CSS Way:

   <SPAN STYLE="text-align: center;">

This is centered. 

   <P STYLE="text-align: center;"> (Opera)

This is centered.

* Explanation: <DIR>*

The DIR element was designed to be used for creating multicolumn directory lists. Since UAs rendered the element identically with their rendering of <UL>, the DIR element has been deprecated. From HTML 2.0:

The DIR element is similar to the UL element. It represents a list of short items, typically up to 20 characters each. Items in a directory list may be arranged in columns, typically 24 characters wide. 

     <DIR>
     <LI>A-H<LI>I-M
     <LI>M-R<LI>S-Z
     </DIR>

* Example: <EM>*

This shows use of the <EM>EM</EM> element.

The CSS way:

   <SPAN STYLE="font-style: italic;">

This demonstrates Emphasis.

* Example: <HR>*

This shows use of the <HR> element.

The CSS way:

   <P STYLE="border-top: solid;">

This demonstrates HR.

* Example: <I>*

This shows use of the <I>I</I> element.

The CSS way:

   <SPAN STYLE="font-style: italic;">

This demonstrates Italics.

* Explanation: <MENU>*

The MENU element was designed to be used for single column menu lists. Since UAs rendered it identically with their rendering of <UL>, the element has been deprecated. From HTML 2.0:

The MENU element is a list of items with typically one line per item. The menu list style is typically more compact than the style of an unordered list. 

     <MENU>
     <LI>First item in the list.
     <LI>Second item in the list.
     <LI>Third item in the list.
     </MENU>

* Example: <SMALL>*

This shows use of the <SMALL>small</SMALL> element.

The CSS way:

   <SPAN STYLE="font-size: smaller;">

This demonstrates font size.

* Example: <STRIKE>*

This shows use of the <STRIKE>strike</STRIKE> element.

The CSS way:

   <SPAN STYLE="text-decoration: line-through;">

This demonstrates line-through.

* Example: <S>*

This shows use of the <S>strike</S> element.

The CSS way:

   <SPAN STYLE="text-decoration: line-through;">

This demonstrates line-through.

* Example: <STRONG>*

This shows use of the <STRONG>STRONG</STRONG> element.

The CSS way:

   <SPAN STYLE="font-weight: bold;">

This demonstrates strong.

* Example: <SUB>*

This shows use of the <SUB>subscript</SUB> element.

The CSS Way:

   <SPAN STYLE="vertical-align: sub;">

This demonstrates subscript.

* Example: <SUP>*

This shows use of the <SUP>superscript</SUP> element.

The CSS Way:

   <SPAN STYLE="vertical-align: sup;">

This demonstrates superscript.

* Example: <TT>*

This shows use of the <TT>TT (teletype)</TT> element.

The CSS Way:

   <SPAN STYLE="font-family: monospace">

This demonstrates monospace font-family.

* Example: compact*

<UL TYPE="compact">

The CSS Way:

   <SPAN STYLE="display: compact">

* Example: <U>*

This shows use of the <U>underline</U> attribute.

The CSS Way:

   <SPAN STYLE="text-decoration: underline">

This demonstrates underline.

* Example: <BODY BACKGROUND>*

This shows use of the <BODY BACKGROUND> attribute.

   <BODY BACKGROUND="clouds.gif">

The CSS Way:

   BODY {background: url(clouds.gif) }

* Example: <BODY BGCOLOR>*

   <BODY BGCOLOR="#FFFFFF">

The CSS Way:

   BODY {background: #FFFFFF; }

* Example: <CLEAR>*

This shows the markup for the <BR CLEAR="right"> attribute.

The CSS Way:

        IMG {clear: right;}

* Example: <TEXT>*

This shows the markup for the <BODY TEXT="#00C0C0"> attribute.

The CSS Way:

        BODY {color: #00C0C0;}

* Example: <LINK>*

This shows the markup for the <BODY LINK="#FFC080"> attribute.

The CSS Way:

        A:link {color: #FFC080;}

* Example: <VLINK>*

This shows the markup for the <BODY VLINK="#00C080"> attribute.

The CSS Way:

        A:visited {color: #00C080;}

* Example: <ALINK>*

This shows the markup for the <BODY VLINK="##FF00FF"> attribute.

The CSS Way:

        A:active {color: #FF00FF;}

* Example: <WIDTH>*

This shows the markup for the <TABLE WIDTH="80%"> attribute.

The CSS Way:

        TABLE {width: 80%;}
CSS Pointers Navigation
Index · Browser Bugs · Books · Tools · DHTML · XSL & DSSSL
Main Site Navigation
Index · Articles · Examples · Experiments · FAQ · Markup · Styles · Who is?
CSSPG ~ Sue ~ Roland
Validate markup Check CSS