Help using CSS to control the layout of a HTML page.?

I am just beginning to learn HTML and thought it would be neat to use a CSS page to control the layout, font, backgroung and text color. The HTML page will be three columns, right/left columns will be a solid color background, the center will use a jpg image for its background. The center column will contain a generic ';comment'; form using tables unless there is a way to allow CSS to do that too (that may be too hard though). I need to know what to put on the HTML page to make it connect to the CSS page called ';styles.css';, and exactly where to place it. I think this will be a nice touch to the basic page and help me understand the power of CSS. Can anyone show me what the code will look like? If you have any better ideas let me know. I am pretty sure this can be done and can't wait to see how it works first hand. Thanks in advance for your help.Help using CSS to control the layout of a HTML page.?
Whoever said that tables is the best and most browser-friendly way to lay out a three-column page is still living in the last century.





Use this code:





%26lt;!DOCTYPE html PUBLIC ';-//W3C//DTD XHTML 1.0 Transitional//EN'; ';http://www.w3.org/TR/xhtml1/DTD/xhtml1-鈥?br>

%26lt;html xmlns=';http://www.w3.org/1999/xhtml';%26gt;


%26lt;head%26gt;


%26lt;style type=';text/css';%26gt;


#container {


width: 760px;


\width: 780px;


w\idth: 760px;


border: 1px solid gray;


margin: 10px;


margin-left: auto;


margin-right: auto;


padding: 10px;


}





#banner {


padding: 5px;


margin-bottom: ;


background-color: rgb(213, 219, 225);


}





#content {


padding: 5px;


margin-left: ;


margin-right: ;


background-color: gray;


}





#sidebar-a {


float: left;


width: ;


margin: 0;


margin-right: ;


padding: 5px;


background-color: rgb(235, 235, 235);


}





#sidebar-b {


float: right;


width: ;


margin: 0;


margin-left: ;


padding: 5px;


background-color: rgb(235, 235, 235);


}





#footer {


clear: both;


padding: 5px;


margin-top: ;





background-color: rgb(213, 219, 225);


}


%26lt;/style%26gt;


%26lt;/head%26gt;


%26lt;body%26gt;


%26lt;div id=';container';%26gt;


%26lt;div id=';banner';%26gt;聽%26lt;/div%26gt;





%26lt;div id=';sidebar-a';%26gt;聽%26lt;/div%26gt;





%26lt;div id=';sidebar-b';%26gt;聽%26lt;/div%26gt;





%26lt;div id=';content';%26gt;聽%26lt;/div%26gt;





%26lt;div id=';footer';%26gt;聽%26lt;/div%26gt;


%26lt;/div%26gt;


%26lt;/body%26gt;


%26lt;/html%26gt;





You can copy and paste that into your editor and it will work. Decide how wide you want your left and right columns to be (sidebar-a and sidebar-b) and put that in the ';width'; (i.e. width: 125px;). Then in the ';content'; style, make the ';Margin-left'; and ';Margin-right'; the exact widths you made the columns. Viola!Help using CSS to control the layout of a HTML page.?
CSS is definetly the best way to format text. It's so much easier, as everything is in one file. You can put ';style.css'; anywhere, you just have to refer to it in your code... usualy easiest to put it in the same place as the pages and refer to it locally. Just add this code to everypage you want to use style.css with between %26lt;head%26gt; and %26lt;/head%26gt;:


%26lt;link rel=';stylesheet'; type=';text/css'; href=';style.css';%26gt;





To explain how it works, here's part of a style.css I'm using:





body {


color: #000000;


background-color: #FFFFFF;


}





a:link { text-decoration: none; color: #1F3565; }


a:active { text-decoration: none; color: #1F3565; }


a:visited { text-decoration: none; color: #1F3565; }


a:hover { text-decoration: underline; color: #1F3565; }





a.menu:link { font-weight:bold; color: #1F3565; }


a.menu:active { font-weight:bold; color: #1F3565; }


a.menu:visited { font-weight:bold; color: #1F3565; }


a.menu:hover { font-weight:bold; color: #000000; }





So, on pages linked to this the %26lt;body%26gt; will have a background of white, and text color of black. All the links (%26lt;a href=';....) will blue and have a underline mouse-over effect. But links given the ';menu'; class will be formatted differently. Giving something a class is easy:





%26lt;a href=';home.php'; class=';menu';%26gt;Home%26lt;/a%26gt;





As far as formating a page with left and right columns, it is possible to use %26lt;div%26gt; and %26lt;span%26gt; to achieve this... I would not recommend it. It's still much easier and more reliable to do that type of formatting with tables. You're also sure of it looking correct on every browser... firefox and ie still treat DIV's differently, but tables have been a stable of page design for ever.





Here's a good site to get CSS code from:


http://www.w3schools.com/css/default.asp
If you want your HTML page to link to an external CSS file, you have to use the link tag inside the head tag:





%26lt;html%26gt;


%26lt;head%26gt;


%26lt;link rel=';stylesheet'; type=';text/css'; href=';styles.css'; /%26gt;


...


%26lt;/head%26gt;


...


%26lt;/html%26gt;





Check this site:





http://w3schools.com/





it's a good reference for all the basic technologies of the web.
To link your CSS file to your page, use the following code:





%26lt;link rel=';stylesheet'; type=';text/css'; href=';styles.css'; /%26gt;

colon cleansing