View Full Version : help on css based websites ??

09-19-2006, 08:10 PM
Hello frens n seniors of codingforums
I haven't made a fully css based websites. Now i am planning to implement the css very effectively n efficiently. i tried once but wasn't successful. I want to make the whole site customizable just by editing a single css file, no need
to go thro each page and edit the pages style. Please help me on this topic and explain clearly of using basics of css contains to be used in such sites, which one to use id or classes etc..
Hope to have a good response from the gr8 helpers over there..
would like to thanks in advance

09-19-2006, 10:06 PM
Perhaps if you upload the following files to your server and then play a bit with them, re-upload, etc, you'll get an idea of how to proceed on your own. The idea is to create an HTML file with a link to a CSS file. Then you can create as many additional HTML files and link to the single CSS file, so that in this way, when you make a single change to the CSS, it will be picked up by all HTML pages.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>My First XHTML/CSS Page</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<div id="wrapper">
<div class="headfoot">
<h1>Header text here</h1>
<h5>Subheading text and link to: <a href="mailto:address@mail.com">address@mail.com</a></h5>
<div class="content">
<p><strong>This block is done as a <em>class</em></strong><br />
As a <em>class</em>, we can reuse it as many times as we wish per page. If it were in <em>id</em> we would be limited to a single use per page.
<div class="content">
<p><strong>This block is of the same class as the block above</strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in pede. Phasellus pulvinar dui ac est. Cras vel elit. Fusce tellus erat, iaculis faucibus, vehicula gravida, dapibus non, neque. Suspendisse mi nisl, facilisis nec, porta ut, imperdiet sagittis, nulla. Nunc pellentesque, erat et rutrum pulvinar, lectus nulla tempus lacus, non vulputate mi ligula ultricies urna. Nulla lorem lectus, eleifend in, vehicula nonummy, auctor sed, quam.
<div class="headfoot">
<p>Footer text here</p>


body {
background-color: #111;
color: #D3D9E2;
font: small Verdana, Arial, Helvetica, sans-serif;
h1 {
font-family: Georgia, serif;
hr {
color: #D3D9E2;
height: 1px;
a {
color: #D3D9E2;
text-decoration: none;
#wrapper {
width: 760px;
margin: 0 auto;
background-color: #000;
.headfoot {
border: 1px dashed #FFF;
margin-bottom: 10px;
padding: 0 20px;
text-align: center;
.content {
border: 1px dashed #FFF;
margin-bottom: 10px;
padding: 0 20px;

09-19-2006, 11:09 PM

I must be the only member here who ever recommends this site:

Select tutorial (http://css.maxdesign.com.au/selectutorial/)

But it is a seriously good resource on beginning with CSS.

Also, to use css to full advantage, you need to get to grips with 'semantic' html, that is: using the right html tags to properly describe your content.

Kind regards,


09-20-2006, 08:44 AM
must be the only member here who ever recommends this site
No, your not (http://www.codingforums.com/search.php?searchid=734135)... :D


Your questions are a bit too general to give concrete answers to; however, the tutorial Graft-Creative mentioned covers one of the more important aspects of CSS, so that's a good start.
To get more ideas on how to apply CSS effectively, go over some of the articles on A List Apart (http://www.alistapart.com/).