Barbara Leeds > Samples >

CSS vs. HTML: Style Syntax Comparison

About this Document

The purpose of this document is to clarify differences in web style specification between Cascading Style Sheets (CSS1) and Hypertext Markup Language (HTML 4). The scope is limited to common stylistic effects and non-intuitive syntax differences.

Specifying Style

You may specify stylistic effects using either:

Description CSS Stylesheet Syntax HTML Syntax
General Information
Rule format selector {property: value;} <element attribute=value>
Rule example td {background-color: pink;} <td bgcolor="pink">
Rule application All occurrences of selector This occurrence of element
Comment /*comment*/ <!--comment-->
Some Rules
Alignment: horizontal selector {text-align: value;} <element align=value>
Alignment: vertical selector {vertical-align: value;} <element valign=value>
Color: active link a:active {color: value;} <body alink=value>
Color: background selector {background-color: value;} <element bgcolor=value>
Color: text selector {color: value;} <font color=value>
<body text=value>
Color: unvisited link a:link {color: value;} <body link=value>
Color: visited link a:visited {color: value;} <body vlink=value>
Space inside border selector {padding: value;} <table cellpadding=value>
Space outside border selector {margin: value;} <table cellspacing=value>
Space outside border: bottom selector {margin-bottom: value;} (not available)
Space outside border: left selector {margin-left: value;} <body leftmargin=value> (IE)
<body marginwidth=value> (NN)
Space outside border: right selector {margin-right: value;} (not available)
Space outside border: top selector {margin-top: value;} <body topmargin=value> (IE)
<body marginheight=value> (NN)
Type appearance: bold selector {font-weight: bold;} <b>
Type appearance: italic selector {font-style: italic;} <i>
Type face selector {font-family: value1, ... valuen;} <font face=value1, ... valuen>
Type size selector {font-size: value;} <font size=value>

Inline Styles

You may derive CSS inline style syntax from CSS stylesheet syntax:

Description CSS Stylesheet Syntax CSS Inline Style Syntax
Rule format selector {property: value;} <selector style="property: value;">
Rule example td {background-color: pink;} <td style="background-color: pink;">
Rule application All occurrences of selector This occurrence of selector






Making stylesheets work

Proper stylesheet functioning requires:

For more information

Valid XHTML 1.0 Strict This document appeared for many years on the Silicon Valley WebGuild website., 8-17-2006