I am wondering what the actual advantages are of CSS over tables ect in html.
From what I keep reading it is supposed to be a better way to go, it could be for all I know.
I am redoing one site and am considering going this route. I have tried Dreamweaver and we got into an argument and I think I lost so it's probably gonna be me writing code.
I think the thing I am no quite understanding is that there is so much more code in CSS than HTML that I fail to see the advantage.
To get an idea what I am after take a look at this site vikingtrailer
To get what I have on the front page is pretty straight forward in HTML but things get pretty bulky with the CSS code. It will probably stay pretty much as it is but the rest of the site is where I'm thinking I need to go a different route.
This was all a simple, quick (well not really with a zillion pages) HTML site. My question here is I keep reading about how it is simpler to use a style sheet to do what I've got and I just ain't sure where that applies.
I would really like to change it to a simpler less flashy look and still have it look nice.
Another question is just what do you do with these style sheets once they are made and how do they know what to do?
I've been trying to read up on this stuff but most of the info is so bulked up I'll never get to the stuff I need.
I'm old, I don't have 3 years to spend reading useless info to get to the helpful stuff.
Think maybe I should just stick with what I've been doing or try something new?
Any thoughts? Help????

Search Amazon for Simon Collison's book "Beginning CSS Web Development," it's a great, easy read in a conversational tone that takes someone with a familiarity of (x)html from the very basics of CSS to full blown layout/designing.

I started reading it last week and I'm just about through it, I wish i had bought it when i first started stumbling around with CSS

Thanks, I'll look into that one.

Rich there are a lot of advantages to using css. Actually you'll find you use a lot less code than you will using tables. At first it might seem like you're using more in part because you may need a little experience to see how you can do things with less code. A lot of people first approach css by trying to do things the way they did them with tables, which can leave more code than necessary.

But more it's because you can place all that css in an external file and have it still be controlling every page of your site. That might not seem so great if your site is only a page or two, but it makes a huge difference once your site starts to grow.

As an example thinking of how you might set the background color for the page. With tables you might add bgcolor to the body tag of every page. So later if you decide to change the color from green to blue you need to edit every page on the site anf change the property. With css that color is set in one place so the change takes about 5 seconds to update the entire site.

Writing your own code is a good idea since it helps you really understand what's going on. When you use a program like Dreamweaver all the time and something isn't looking quite right you may not know what to do unless you've spent time with the code. And once you get enough practice writing the code you can usually build a site faster hand coding it than using a WYSIWYG editor.

I learned css from Eric Meyer. An easy book to get through and learn from was the Eric Meyer on CSS. It's on his site. There's also a More Eric Meyer... though I never read that one.

The book starts with the code for a page that uses a table based layout and Eric walks you through the steps of converting it to a css layout. I found that by downloading the original files and typing along with the changes I was able to learn the basics rather easily.

It won't take years. I think it took all of about 2 weeks before I was developing using css instead of tables. Several years of doing it later I'm certainly able to build css sites better and quicker, but it only took a couple of weeks before I was able to build an all css site.

By the way the link in your first post wasn't working so I fixed it. I think it's pointing to the site you intended, but if it's not let me know.

vangogh- Link's right, don't know what I did there.
I think where I might be running into trouble with what I am thinking in no two of my pages are that site are really the same as for as the number of pics in them. This is what they wanted and I'm just not seeing how a style sheet would work out. Maybe for the background and the top banner. Or can you use CSS for an entire page format and then set something else inside of it in HTML?
I really don't have any use for the columns and it seems like that is a big part of the CSS. Or is it just that that's all I've seen maybe?

I'm having a tough time deciding if this is worth delving into. I know once I do it I'll just do it cause that's how I learned HTML. Somebody gave me HTML for Dummies (it was) after about 2 hours in it I got rid of it and started on a website.
I think one of the things that made it easier to learn how html worked was when you saw something you liked you just looked at the page source and figured it out. Kinda tough to do that with style sheets as they don't show up on the page.

Still mussing.......

Rich it can certainly depend on the site and what you want to do. If every page is going to be unique then you are right in that it probably doesn't save a lot of code. I still think you can build a single page in css with less code than you'll use for tables, but it really is when you start having multiple pages with elements that appear consistently on the pages.

Now for your the logo and the menu would be the same on all pages as would the basic layout. Your layout is an entire page centered with the logo at the top a navigation bar below and then your content (which would change) and finally a footer that stays the same.

Only the are that's the content would be unique to every page.

A good example of what css can do is the CSS Zen Garden site. If you look at the menu on the right there's a link to view all designs. Every one of the designs uses the exact same html file. They only differ in the single external css file. And they obviously use different images.

If you're up for it try the Eric Meyer book I recommended. I think it's $30 (probably less on Amazon). It's easy to understand (I think) and really won't take long to get through. It's not a big investment in time or money.

Sometimes you just have to work with it a little to see the advantages. I might be that for your particular needs it's not going to make a huge difference and if you're comfortable how you're doing things now there's nothing wrong with it. But css really is the better approach.

It does save code, especially with larger sites. And you also get a lot more control over your presentation using css.

Personally, I don't think much of CSS Zen Garden as it doesn't teach/show true CSS coding -- but, that's just my personal opinion.

I do appreciate the opinions and info folks. It's got me to thinking. I do have some other sites to build and rebuild so this might be worthwhile to get into.

Thanks, R.

Glad to help Rich. It really isn't all that hard to get into. The syntax is just as easy as it is for html and a good deal of css is easily learned. Making the final push from tables to css is the hardest part, but even that just requires some practice.

travelagent I know what you mean. That's how I originally felt about the CSS Zen Garden site. I think the idea behind it though it more to show what can be done by changing a single file. I don't think the site's intention is to teach, more an example of what can be done.

I learned quite a bit from CSS Garden ! It's not a direct teaching tool, but for me I was able to copy down the css for each layout, along with the default HTML file and then I could see exactly what they did to achieve that layout by picking it apart. I could then learn the whys behind it.

Well I jumped in. Oh my what a pain in the a$$. My biggest problem is I have to see the code in actual use before I start understanding how it works. Don't ask me why but I did the same with html at first.
Ok I'll try to keep this short. I found some code to more or less do what I wanted (with some serious editing) Seems no one does any nice simple clean 2 column WITHOUT looking like a page of newsprint. I didn't want all the text blocks, ads, ect. Finally got it whittled down to work like I wanted. I think I'm beginning to understand how this works, but I'm only 2 days into it soooo.... I have a question here, the code I found (can't recall the site, it's on my laptop) wrote everything out of a index.php file. This caused a bit of a problem in as much as now the site doesn't show up at all, oh joy. Resolved that with a redirect. My question is how do I make my url see the php file as the index without the redirect or do I have to make it permanent.
Question number 2... was it a bad idea using this type of index file, the site where I found it seemed to think it was a better way to go.
My thoughts on the subject at the time were any way to go was better than the way I was going which was basically nowhere.

Ok now a gripe I got from trying to do this css stuff. Why is it that anybody and everybody will be happy to supply the code for just about anything you want to do but NOBODY and I mean NOBODY will tell you where to actually PUT that code. I can't see it any where in the books or on sites. Loads of code just no use info on WHAT TO DO WITH IT!!!
Yep, I'm only a few days into this but it is frustrating. Thing is now that I got it started there's no turning back.

Ok, I'll calm down now.

use of CSS is also helpful for SEO

Originally Posted by email16

use of CSS is also helpful for SEO

????? What's SEO????


Another problem I found this morning is that my sub domains don't show up right since I have the main site redirected to the index.php folder....any ideas???

seo = search engine optimization and sadly while many think css will help with optimizing a page there is little evidence that it does.

I'm not entirely sure what the issue is with the index.php file not showing up. Do you mean when you go to www.domain.com it defaults to the index.html file?

If so that's just the normal way of things. You can change that on the server, but the easiest thing it to remove or rename the index.html file. Renaming is better in case you need that file back. Changing it to index2.html will work.

When you type a URL that ends in a folder like the domain itself or domain.com/folder/ the server is setup to automatically look for an index.htm or index.htm file. Usually if one isn't there it will look next for something like index.php, but that does assume php has been set up on the server, which I assume it has been.

If that's not the issue give a little more description and I'll see if I can help.

As far as the books it depends sometimes on the code. A lot of times the code can go into one of several places and so they won't tell you exactly where to put it since you have a choice. Are you talking about css code?

CSS code is best in an external file. You can include it with a statement in the head of your document with:

<link type="text/css" href="pathToCSSFile.css" />

You have 2 options for where to put your CSS. The preferable method is in an external CSS file that you call with the <link> tag:

<link rel="stylesheet" type="text/css" href="main.css" />

You have to tell it it's a stylesheet

You put all your style declarations in that file - like this:

body {
font: 100.01% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background: #bbcce7;
}
img{
border: 0;
margin: 0;
padding: 0;
}
#wrapper{
position: relative;
background: #fff;
width: 766px;
margin: 0 auto;
font-size: 85%;
text-align: left;}

A 2nd method is to put all your styles in a style block in the <head> section of your documents. Not the best way because if you have to edit a style rule, you have to edit EVERY page.

<style type="text/css">
<!--
rules go in here
-->
</style>

Once you actually learn CSS, you'll find it's MUCH easier and not at all 'bulky' to handle. There are 'shortcuts' to many rules that help and once you grasp how the cascade and inheritance actually works, you use it to your advantage and your CSS code gets lighter. It's NOT a 24 hour learning curve, you can learn the very basics, but to master it will take you a while.

I highly recommend this book for newbies:
http://www.sitepoint.com/books/html1/

I think one of the things that made it easier to learn how html worked was when you saw something you liked you just looked at the page source and figured it out. Kinda tough to do that with style sheets as they don't show up on the page.

No it's not. You want an EASY way to see the CSS on a page ?? Using Firefox, get the Web Developer extension AND the Firebug Extension. Web Developer will give you a new right-click menu with many options, one of which is 'view CSS', another is 'edit CSS'. I use this ALL the time when I'm trying to help people and I can test changes to the CSS and they are only temporary but immediate.

If you look in the HTML source code, you'll see the <link> tag that will tell you where their CSS file is - then you enter that path into your browser's address bar and Voila !, CSS in view - then save it to your machine.

Originally Posted by vangogh

seo = search engine optimization and sadly while many think css will help with optimizing a page there is little evidence that it does.

OK, that I understand, wasn't trying for it anyway.

Originally Posted by vangogh

I'm not entirely sure what the issue is with the index.php file not showing up. Do you mean when you go to www.domain.com it defaults to the index.html file?

If so that's just the normal way of things. You can change that on the server, but the easiest thing it to remove or rename the index.html file. Renaming is better in case you need that file back. Changing it to index2.html will work.

When you type a URL that ends in a folder like the domain itself or domain.com/folder/ the server is setup to automatically look for an index.htm or index.htm file. Usually if one isn't there it will look next for something like index.php, but that does assume php has been set up on the server, which I assume it has been.

You hit the nail right on the head.
I did rename the index file, twice actually, the 2nd time to completely eliminate the index part of it. It still wouldn't pick up the .php file tho. I'm not sure if I have to do anything to set up php but my cpanel say I have a php version 4.4.4 in my server information.
Maybe some other problem?

Originally Posted by vangogh

If that's not the issue give a little more description and I'll see if I can help.

As far as the books it depends sometimes on the code. A lot of times the code can go into one of several places and so they won't tell you exactly where to put it since you have a choice. Are you talking about css code?

CSS code is best in an external file. You can include it with a statement in the head of your document with:

<link type="text/css" href="pathToCSSFile.css" />

Got to work on this some more.

Thanks, R

Originally Posted by LadynRed

You have 2 options for where to put your CSS. The preferable method is in an external CSS file that you call with the <link> tag:

<link rel="stylesheet" type="text/css" href="main.css" />

You have to tell it it's a stylesheet

Ok, this I do understand the whyfores and wheretos of but I have a question about it.
Can you or do you need to or is it even possible to put different stylesheets in for different pages on a site and do you need to have that link for each sheet OR do you just dump everything into one stylesheet and hope for the best.
I am very not good at keeping one particular look for everything on all my pages. I get bored easily, obviously or I wouldn't be doing this.

Originally Posted by LadynRed

A 2nd method is to put all your styles in a style block in the <head> section of your documents. Not the best way because if you have to edit a style rule, you have to edit EVERY page.

<style type="text/css">
<!--
rules go in here
-->
</style>

I agree, that's what I'd like to get away from. I already have enough trouble determining which section of the code is for what. And this leads to another point of confusion.

Originally Posted by LadynRed

Once you actually learn CSS, you'll find it's MUCH easier and not at all 'bulky' to handle. There are 'shortcuts' to many rules that help and once you grasp how the cascade and inheritance actually works, you use it to your advantage and your CSS code gets lighter.

That's what i keep hearing, I'm not seeing but I keep hearing. All I need is an easy way to handle resizing my 300+ pictures to fit the way I want them to in the code I've seen.

Originally Posted by LadynRed

It's NOT a 24 hour learning curve, you can learn the very basics, but to master it will take you a while.

Yeah, yeah, yeah I know, but it should be!! I'll keep plugin' but don't be surprised to hear from me quite frequently. I tend to figure things out on my own but this might be tough.

Originally Posted by LadynRed

I highly recommend this book for newbies:
http://www.sitepoint.com/books/html1/

I'll check it out, thanks

Originally Posted by LadynRed

No it's not. You want an EASY way to see the CSS on a page ?? Using Firefox, get the Web Developer extension AND the Firebug Extension. Web Developer will give you a new right-click menu with many options, one of which is 'view CSS', another is 'edit CSS'. I use this ALL the time when I'm trying to help people and I can test changes to the CSS and they are only temporary but immediate.

If you look in the HTML source code, you'll see the <link> tag that will tell you where their CSS file is - then you enter that path into your browser's address bar and Voila !, CSS in view - then save it to your machine.

Now this is something I can use!!!!!!

Oops forgot the rel="stylesheet" Yes you do need it. Thanks LadynRed. And my bad too for not telling you the other ways to include css. That's what happens when I start to answer a post and get called to IM and the phone all at once.

I highly recommend this book for newbies:
http://www.sitepoint.com/books/html1/

i actually have this book and another from that website, it is really good and i know now why lady reccomended it

Can you or do you need to or is it even possible to put different stylesheets in for different pages on a site and do you need to have that link for each sheet OR do you just dump everything into one stylesheet and hope for the best.

You can do it both ways actually. You can link in multiple stylesheets in your document. Depending on how much changing you're doing, it may be more organized to keep separate stylesheets. Keep all your GENERAL rules in a main CSS file, then call in separate sheet(s) that contain just the things you're changing.
You can use classes to change the look of pages w/o completely duplicating a css file. For instance, I have a site with a home page that is different from the interior pages. I have a separate class for the home page to change it's look and it's in my code like this:

<body class="homePg">

In my CSS file, I have the class .homePg set up with a different background and font colors. The ONLY page that will use those rules is the page with the body tag as above.

All I need is an easy way to handle resizing my 300+ pictures to fit the way I want them to in the code I've seen

Neither HTML nor CSS can resize your pictures, that is the realm of scripting. Have you seen LightBox ?? http://ahavriluk.home.comcast.net/lightboxEx/doc/

I'll keep plugin' but don't be surprised to hear from me quite frequently

That's ok, we'll be here to help .