Hi everyone. I've been designing websites for about 6 months now and I've always used tables with and external CSS style sheet. I'm teaching myself CSS-P but the one question I need to ask is can you take a website like mine (built using tables)http://www.mharrisondesign.co.uk and build it using CSS-P?

 

Is it simpler to build using CSS-P as well? I've read a few articles on how simple it is to change something in the style sheet for CSS-P rather than tables.

 

Any advice would be great!

 

Thanks in advance!

Your site would be simple enough..... once you get to grips with css, you will wonder what you ever did without it.

CSS it's really simple.

All you need is to know divs and then style them.Divs are again simple, in 1 day you can pretty much master them.

Tables are extremely complex and use so much code.With css you get much much better code and also easier to modifiy.

Your site could be easily modified to use CSS.

 

It's just that instead of using 30 cells of tables(where if 1 is modified everything goes crazy) you just define as many divs as you need and style them with css.A simple example of the main container of a website.

 

<div id="main"></div>

 

in css

#div{

width:600px;

min-height:500px;

margin:auto;

background: #FFFFFF;

border:1px solid #000000;

}

Once you understand it it's really really simple and useful.

 

Also keep in mind that it's no programming language or anything.It's just using the attributes(width,height,color..etc) in the CSS.The bid advantage is that it has many unique&useful properties

OK that's cool. Thanks. But how do I go about splitting a row in to separate parts, say for example for a menu bar? How would you write the code for that?

say you have a basic website layout like this one:

 

 

the html between the body tags would be like this.

<div id="header"> header things here (logo...ect)</div>

<div id="menu">
<ul>
<li>link</li>
<li>link </li>
<li>link</li>
</ul>
</div>

<div id="left"> left content in here</div>

<div id="right">right content in here</div>

<div id="footer">footer stuff</div>

 

 

Then you would have your css file which would then have the style information something like:

 

 

#header {styling attributes here}

#menu {styling attributes here}

#left { styling attributes here}

#right {styling attributes here}

#footer {styling attributes here}

 

 

 

I know it isn't the best example but it sort of shows how it is used. I think the best thing you could do would be to go to HTML Dog and have a look through their tutorials as it would really help you see th true power css has over table based designing

HTML:

 

<ul id="nav">
<li><a href="/">link 1</a></li>
<li><a href="#l">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul><!-- End Nav -->

 

CSS

#nav{styles go in here}

#nav li{display:inline;}

 

Display inline will make a list display horizontally, whereas without, lists go vertically

 

Something along those lines.

 

 

EDIT: haha, Dizi beat me to it, Her example is far better (i'm assuming it's a her?)

 

Also check out csszengarden, it shows that you can re-design an entire site from one css file. The html on that site can't be altered, only the .css file

That was exactly what I was looking for. That's made things more understandable for me! Thanks a lot!

 

say you have a basic website layout like this one:

 

 

the html between the body tags would be like this.

<div id="header"> header things here (logo...ect)</div>

<div id="menu">
<ul>
<li>link</li>
<li>link </li>
<li>link</li>
</ul>
</div>

<div id="left"> left content in here</div>

<div id="right">right content in here</div>

<div id="footer">footer stuff</div>

 

 

Then you would have your css file which would then have the style information something like:

 

 

#header {styling attributes here}

#menu {styling attributes here}

#left { styling attributes here}

#right {styling attributes here}

#footer {styling attributes here}

 

 

 

I know it isn't the best example but it sort of shows how it is used. I think the best thing you could do would be to go to HTML Dog and have a look through their tutorials as it would really help you see th true power css has over table based designing