Tip: Retrain your HTML 3.2 Brain to Think in CSS

How HTML attributes translate into CSS properties
HTML Attributes CSS Properties Notes
font face

font-family: Arial;

Use quotation marks only when there are spaces in the font-family name, e.g., font-family: Verdana, "Trebuchet MS", Tahoma;
font size font-size: 1em; Sizes can be set in ems, percents, pixels or with keywords such as small, medium and large.
bold <b>

font-weight:bold;
strong

When using bold text for decorative reasons, set it with font-weight: bold.

When using bold text to indicate strong emphasis, use the strong element, not the b element.

italic <i> font-style: italic;
em

When using italic text for decorative purposes, set it with font-style: italic. Oblique is also a font-style.

When using italic text to indicate emphasis, use the em element, not the i element.

Italics for citations such as book titles is created using the cite element.
align="left"
align="right" 		float: left;
float: right;

With CSS anything can be floated: images, paragraphs, divs, headings, tables, lists, etc.

Keep in mind that a float may need to be followed by a clear.

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0;

With CSS, margin can be set for any element, not just the body element. More importantly, margins can be set individually for the top, right, bottom and left of any element.

When indenting a block level element, use margin-left, unless the element is actually a
blockquote
.

vlink="#333399" alink="#000000" link="#3333FF"

a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;

In HTML, link colors were set as an attribute of the body tag and applied uniformly to every link on the page. Using descendant selectors in CSS, link colors can be set to different values in different parts of a page.
bgcolor="#FFFFFF" background-color: #fff; In CSS, background-color and/or background-image can apply to any element, including body, tables, headings, divs, forms, paragraphs, lists, or spans.
bordercolor="#FFFFFF" border-color: #fff; Any element can have a border, the colors of which can be set individually for top, right, bottom and left if desired.
border="3"
cellspacing="3" 		border-width: 3px;

With CSS, any element can have a border. Borders can be set uniformly, or the size, style and color of borders can be set individually for the top, right, bottom and left (or any combination thereof) of any element.

When setting the borders for tables, use the table, td or th selectors.

When setting the spacing for tables, use the table, td, and th selectors.

If you want a single border line between adjacent table cells, use border-collapse: collapse;

Border can replace a decorative hr element when used only as border-top or border-bottom on an element. A rule for border-right and border-bottom can simulate a drop shadow.

<br clear="left">
<br clear="right">
<br clear="all">

clear: left;
clear: right;
clear: both;

Many two and three column layouts use float to position elements on a page. If part of your presentation depends on background colors or images behind floated elements, you may want to use clear.
cellpadding="3"
vspace="3"
hspace="3" 		padding: 3px; With CSS, any element can have padding. Padding can be set uniformly or individually for the top, right, bottom and left of any element. Padding is transparent, so background-color or background-image will shine through.
li type="disc"
li type="A" 		list-style-type: disc;
list-style-type: upper alpha; 		The properties for list-style-type include disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman and several others, most notably none.
align="center"

text-align: center;

margin-right: auto;
margin-left: auto;

Text-align only applies to text.

Block elements such as paragraphs and divs can be centered using margin-right: auto; and margin-left: auto;

Technorati Tags: ,

Visit Web Teacher to read any comments.

One thought on “Tip: Retrain your HTML 3.2 Brain to Think in CSS”

Leave a Reply