This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

Examples: Translations from HTML to CSS

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%;}

The CSS way:

Sue Sims