Implementation? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Paula -> Implementation? (11/18/2003 0:41:49)

Hi everybody. I've been avoiding this for quite a while now and I feel like I've got to start working with CSS more. I've been doing a lot of study on the subject and the one thing that I seem to not be able to "get" is how to implement CSS on my existing websites. I've gotten a pretty good understanding of the basics, I've been playing with Topstyle some and learning a lot. But when I sit down to actually work on one of my sites to change it over, I find myself at a loss. I don't know how to begin. Does anyone know of a step by step demonstration of this? or would any of you here that are really good at CSS consider writing a tutorial on the subject? [sm=ask.gif]



c1sissy -> RE: Implementation? (11/18/2003 7:35:20)

Hi Paula:
Eric Meyers has a book that helps you to change your sites over. I briefly read some of it in B&N one night.
Eric Meyrs on CSS:Mastering the Language of Web Design.

I wish that I could be of more help to you, but I can't[&o].
You can get this at bookpool.com

I have it on the way right now, should be here by tomorrow.

Also try doing a search online for this. mabye you will come up with something to help you out.



gorilla -> RE: Implementation? (11/18/2003 9:31:17)

0. Make a copy of your site.

1. Set up the stylesheet.

2. Go and get the style sheet linker addin from jimco. - Use it rather than the very weak one in frontpage.

3. Change every page using the styles you've set up. If you're proficient in html this is best done in html view. You can also do it using search and replace but tread cautiously.

4. Republish.

5. Assuming all went well mass copying and pasting and searching and replacing on the reall thing.

6. Depending on the size of the site this can be a lot of work. Do it in stages and NOT when tired or frazzled.



Nancy -> RE: Implementation? (11/18/2003 11:07:40)

Possibly the articles here will get you started.

CSS - Step by Step


I would start with just one part of your site using styles, and I suggest eliminating the "font" tag. To me that is the most obvious thing when looking at a web page, and the one thing that will make a big time-saver for you. So make your stylesheet, using TopStyle if you have it, link it to your pages, and then go through your site, eliminating the font tag wherever you've used it.

Once you've done that, you can add another area to work with.

Hope this helps. If not, post your questions.

Nancy



Nancy -> RE: Implementation? (11/18/2003 11:24:28)

I can't believe it took me an hour and a half to write my previous post. *S*

Actually I had to go and make some coffee and have breakfast etc. etc.

At any rate, Jesper beat me to it.

As another note to his suggestions, you might try removing the formatting this way:

1. open your backup site - the one you're going to test with, and not the original.

2. open one of the pages - might as well start with the index page.

3. Edit>Select All

4. Format>Remove Formatting

That should remove all the font tags for example, as well as some other things you may have set., such as a style set within a paragraph. I noticed when I just did some testing in FrontPage that I had some indent set within the paragraph tags which disappeared also, but those also belong in the stylesheet eventually so with your learning to use css, it is probably a good thing that they disappear. *S*

5. attach/link your stylesheet. I've never used the linker addin from Jimco, but if it is from Jimco, I'm sure it is a good one.

6. Take a look at the page in a browser - the normal view and the preview mode in FP most likely will not accurately show the styles you've set.

Do some changes to your stylesheet, just so you can see how the whole page will change at once, instead of having to do each paragraph one at a time.

Nancy



gorilla -> RE: Implementation? (11/18/2003 13:38:42)

Paula

I always forget that "remove formatting" trick detailed by Nancy above. comes of not having FP as my primary editor I suppose :-)

I don't konw how big your site is but if it's such that you're already spending too much time adminstering it you'll need to avoid having one massive css file that's difficult to edit. Here are our rules of thumb:

Case 1.

A specific style is used just once (just) on one page

- declare the new style inline.

endcase

Case 2. A specific style is used twice on (just) one page

- move it to the head.

endcase


Case 3. You have tree or more unique styles for a page

- create an additional external sheet which cascades in at the head. (use @import or link rel to suit)

endcase

Case 4. Four or more pages are using an additional stylesheet.

- put those declarations to the principal site wide stylesheet.

endcase

Once you get used to how the cascade works , it is incredibly easy to edit element properties and know that the changes are going to ripple through your site in the way that you want them to.



PS: Nice tutorials Nancy. - One suggestion, avoid some opera and ie bugs and future proof too like this:


<snippet>

body
{
margin: 0px;
padding: 0px;
}

html {
margin: 0px;
padding: 0px;
}

</snippet>



Nancy -> RE: Implementation? (11/18/2003 13:50:29)

Thanks Jesper for the tutorial suggestions. *S* Why oh why can't we have browsers that follow specs?

Speaking of "future proof" -- aren't inline styles being deprecated? I'm suffering from "internesia" today - I know I saw this somewhere in the Internet, but can't remember where.

Thanks,
Nancy



Paula -> RE: Implementation? (11/18/2003 14:26:20)

Thanks Deb, Jesper and Nancy! I haven't had time yet to read the tutorial you listed Nancy, but it looks like it might be very helpful. The "step by steps" were very helpful indeed and thank you both for taking the time to do that. It seems more reasonable now. I think I was overwhelmed trying to figure out where to start. Thanks again.



gorilla -> RE: Implementation? (11/18/2003 14:33:54)

quote:

ORIGINAL: Nancy

0. Why oh why can't we have browsers that follow specs?

1. Speaking of "future proof" -- aren't inline styles being deprecated?

2 Thanks,
Nancy


Begin:

Raving paranoia mode = 1
0 - Have you no pity? You knoew that one would get me foaming at the mouth and running round the place shrieking "To hell with bad browsers!" - Didn't you?

Raving paranoia mode = 0

end. [:D]

1. For xhtml yes.

2. As always, you're very welcome :-)



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125