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:

CSS rules in a CSS stylesheet (linked, imported, or internal/embedded/document)
CSS rules in an inline style in the affected tag, explained below
HTML tags or attributes

Description	CSS Stylesheet Syntax	HTML Syntax
General Information
Rule format	selector {property: value;}	<element attribute=value>
Rule format	selector {property: value;}	<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>
Color: text	selector {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)
Space outside border: left	selector {margin-left: value;}	<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)
Space outside border: top	selector {margin-top: value;}	<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

Notes

Notation

italic type = variable (substitute the desired value)
regular type = constant (enter exactly)
(parentheses) = comment (not part of syntax)

Terminology

CSS:

A property is a stylistic (presentational) quality of part(s) of an HTML document.
A declaration associates a value with a property.
A selector indicates the part(s) of an HTML document to which a declaration applies.
A rule associates one or more declarations with one or more selectors.
A stylesheet contains one or more rules.

HTML:

An HTML attribute corresponds to a CSS property.
An HTML element is a kind of CSS selector.

Making stylesheets work

Proper stylesheet functioning requires:

Proper CSS syntax
Proper HTML syntax (notably, the use of closing tags and the absence of tag overlap)
Proper application of inheritance and the cascade
Browser support

For more information

Barbara Leeds, “Connecting a CSS Stylesheet to an HTML Document”
Eric Meyer, Cascading Style Sheets: The Definitive Guide (O’Reilly)
Jennifer Niederst, HTML Pocket Reference (O’Reilly)

This document appeared for many years on the Silicon Valley WebGuild website.
barbaraleeds@yahoo.com, 8-17-2006