CSS Implementation

December 22, 2005 9:37 AM

I've read plenty of good tutorials on CSS, but I don't understand how I could implement it on an existing website.
posted by madmath to Computers & Internet (16 answers total)

How extensive is the website in question? Is it heavy with data / tables? Is it mostly text? Graphics? That will all play heavily into the best way to convert it.
posted by Alt F4 at 9:40 AM on December 22, 2005

You write a file of css selectors.

You put a link in your HTML to to that file.

Or, you put the css selectors inline in your HTML, using a style tag.

If you look at the HTML source for this askMefi page, you'll see both ways used.
posted by orthogonality at 9:40 AM on December 22, 2005

What do you mean? Do you mean you want to move from tables to CSS? Are you asking about CSS-based layout strategies? This question needs more elaboration.
posted by camworld at 9:40 AM on December 22, 2005

I don't have many tables, but I have about 50 pages.
posted by madmath at 9:42 AM on December 22, 2005

And are the 50 pages all of the same structure? Is the text formatting consistent throughout? Or are they all different?

While you're at it, you might look into adding some server side includes to ease your updating of the site.
posted by Alt F4 at 9:46 AM on December 22, 2005

Converting an existing sites html from a tabled layout to a CSS layout can be very tricky, especially if it's your first time and you're aiming for good browser compatibility.

If you just want to add some text, color, padding, etc styling to an existing html page, without modifying the html too much, it's not as difficult. All you really need to do is link the CSS file in the head, and then add classes to the elements you're looking to target with your CSS.

On preview: It still depends on what you're intending to do here, but 50 static HTML pages would be a lot more manageable, especially if you're going to make semi-frequent design changes.
posted by jcruden at 9:47 AM on December 22, 2005

All the pages have the same frame from the county, but within the pages, there are no frames or tables. Hardly any graphics either. This is going to be harder than I imagined.
posted by madmath at 9:50 AM on December 22, 2005

Jeffery Zeldman wrote an excelent article documenting migrationfrom a tables-based site to a CSS-based layout. I recommend the entire A List Apart website for resources in the general domain.
posted by charmston at 9:55 AM on December 22, 2005

Madmath: based on your experience level (you asked a question here not too long ago about how to paste html code into an html document and seemed to have some trouble with it), I suggest you start with something simple like setting the font & color of a section of a document. Once you're comfortable with that you can get progressively more complicated; it's not an all-or-nothing scenario.
posted by bcwinters at 10:25 AM on December 22, 2005

I'd suggest starting by looking to see if you're using the font tag or any consistent combinations of text size, emphasis, etc. and then pulling these out as styles. The easiest way to make an existing site use styles is to standardize the conventions you're already using into one file. Text formatting and such would be the way to start, and layout would be nice in the long term but possibly not necessary.
posted by mikeh at 11:22 AM on December 22, 2005

Any chance we could get a look at these pages?

If you're not using many tables, it should be super-easy to fix up. For one thing, you can apply a style without editing the HTML at all (except to include a link to the stylesheet itself)
posted by delmoi at 11:41 AM on December 22, 2005

madmath, you should know that there are two ways of setting up your css file.

Way number 1: Make up all kinds of useful "styles" (you can think of them as tags or labels if it helps) for your content. This means you'll write styles with names like ".header_nav" and ".body_img". I don't recommend this for your current project.

Way number 2: Override the normal styles via a stylesheet. This means your same old vanilla tag, like "<h2>" will get the style from the stylesheet. This will be easy. You just write a small stylesheet and link to it. However, if you already added a bunch of font stuff to the tag, like "<h2 font-style: Verdana...>" (I may have this syntax wrong -- I've forgotten how to do it) you will have to remove that junk before you can do it. You might be able to do this quickly with some find/replace action.
posted by zpousman at 1:07 PM on December 22, 2005

I just taught myself CSS via web tutorials. A List Apart was a little intimidating for me - if you feel the same way, try out this "no-crap" primer and once you have the basics, go to Holy CSS Zeldman.

(I don't have any affiliation with those sites, just found them incredibly helpful.)
posted by IndigoRain at 5:35 PM on December 22, 2005

Eric Meyer's Eric Meyer On CSS does a mini-project per chapter, and there is whole chapter (or two?) on converting an existing table-based layout to CSS (actually, I think it kept the table for layout but cleaned it up and stripped out all of the <font> tags and presentational cruft.

It's a great book overall, although if your interest is really narrowly about updating existing sites, you might want to flip through it in a library or bookstore before buying it. Also, I haven't bought his sequel, but I have heard good things about it as well.
posted by misterbrandt at 6:12 PM on December 22, 2005

I wish I could recommend a book or site or something, but I can't. BUT I did do this exact same thing last summer for a club website I run. We had about 10-15 pages, so not nearly as big a deal, but you'll probably save a lot more time in the long run.

Here's the skinny. I had been using a Dreamweaver template to ensure consistent page-to-page design. Every time I changed a heading font or button color or something, I had to save the template and all the ensuing pages, then upload them all. This was all using DW.

Then I saw the light and decided to go to CSS. Honestly, DW helped here -- it used styles in the header of my template, so I could just look at those, apply my HTML knowledge, and figure out what was going on. The rest you can Google. W3.org is always a good reference.

I redid the tables I'd been using for layout as DIVs (and of course modified the layout to work with the new principles). Then I did zpousman's Method 2: I set up my headings as H1, H2, etc. (rather than "style_1" as DW had...ick.), and defined H1, H2, P, and some other stuff (link styles, floating images, other cool stuff) in my external stylesheet, which I then linked in the page. Takes awhile to get the framework together, but once you do... man, is it worth it.

Next time I changed the page, I saved the ONE css file, and uploaded it to update everything. I realized why it made much, much more sense to "separate style from content", as they say. And that was before I realized the tremendous accessibility advantages!

I told you all that to tell you this: It's totally worth it. You're gonna have some headaches -- changing all of those pages to reflect your needs, wondering why Firefox or IE makes your page look great but the other breaks it, and trying to figure out why it makes sense to use "ems" instead of "pixels". (Seriously, look this up.) My point, though, is that even as you doubt the worthiness of doing this, it will probably pay off in the long run. So full speed ahead.

(And PS, if your pages are similar enough, do yourself another favor and look up Server-Side Includes. I implemented that along with my CSS changeover and saved myself tons of time.)
posted by SuperNova at 9:32 PM on December 22, 2005

Trying to teach myself this is tough. I'm going to put it on the back burner for now, but thanks everyone for your suggestions.
posted by madmath at 11:43 AM on December 23, 2005