CSS 4.1 Transitional

1 2 3 4 5 6 7

This is a beginner's guide to CSS 4.1 Transitional, which essentially means conversion of basic HTML as shown here to CSS. Some html such as font is now Deprecated or obsolete meaning it no longer works on some browsers. CSS means Cascading Style Sheets. CSS is very tricky and can be exceedingly difficult to learn and execute, depending on the degree of complication of the web page. But it gets easier as one learns it and it has a great deal of power in its flexibility like four different table borders for the same table, or layering things one on top of the other. CSS is quite complex and this guide but covers a small portion. For help the easiest way, might be to type (css+what need) into Google, like: css+tables. To check on one's work, the Opera Browser has a validation service on the right click of any web page, which uses the 'W3C Markup Validation Service' or one can use this address, which will validate the correctness of both html and css. One can set one's html/css editor to preview in Opera, right click and click Validate.

All html code is shown with proxy characters, because to show the exact code on an html/css page such as this, the code would not show. Thus:

html bracket < is represented by [
html bracket > is represented by ]
For instance < html > will be shown as [html]


Every page must have a doctype that corresponds to the type of HTML or CSS used. The following doctype is used for CSS 4.1 Transitional and which is converted to CSS. It goes on the top of the page, and must be shown exactly as below, except < is shown as [ and > is shown as ]

[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"]

After the Doctype comes the usual:


Meta tags are used to help search engines to identity the type of document for search. Meta tags are optional. One can use as few or as many as one likes, the theory by some being that the more meta tags the slower the page will be found by the search engines.

[meta name="audience" content="general"]
[meta http-equiv="content-type" content="text/html; charset=iso-8859-1"]
[meta name="Instructions on CSS" content="A beginner's guide to CSS 4.1 Transitional"]
[meta name="distribution" content="global"]
[meta name="expires" content="never"]
[meta name="generator" content="1st Page 2000"]
[meta name="language" content="english"]
[meta name="page-topic" content="HTML, CSS"]
[meta name="page-type" content="educational"]
[meta name="revisit-after" content="31 days"]
[meta name="robots" content="index, follow"]
[link rel="icon"href="favicon.ico"]


After the last meta tag or favicon tag begins the CSS code. Again all code must be exactly as shown accept for the < > brackets. The CSS code is placed between the [head] tags and between:

[style type="text/css"]

The end style tag must be used for the code to work.

The first code demonstrated will be to set the link color for the entire page.

[style type="text/css"]
a:link { color: brown; }
a:visited { color: brown; }

These two codes set the links color for the entire page. The codes must be written exact. Colors can be such as whole word terms like 'red', 'blue', 'green', 'brown', or one can use hex, such as and written exactly:

a:link { color: #94ab95; }
a:visited { color: #94ab95; }

Both must be the same.

[style type="text/css"]
a:link { color: brown; }
a:visited { color: brown; }

The CSS is written in the head section and the html is written in the body section such as:

[style type="text/css"]
a:link { color: brown; }
a:visited { color: brown; }
This would be the first paragraph which would include a link such as shown which is brown Next Page

Any number of link colors can be used but entail some complication, and thus will be illustrated later. Other link properties are a:active and a:hover.

After the link color, the body properties can be established. The body means the creating of the default properties like page color, text, font, type, size and color, top, bottom, left and right margins.

body { margin-top: 12%;
margin-right: 10%;
margin-left: 8%;
margin-bottom: 10%;
background-color: #94ab95;

or either or both

background-image: url(clouds.jpg); /*full page image*/
font-family: times new roman;
font-size: 20px;
font-weight: 700;
color: black; } /*font color*/

CSS code in the head can be identified and matched to the html in the body section by using the /**/ symbols.

/*font color*/

Must be in the head only.
/*Anything between does not show*/

CSS (1 of 6)       Next Page