Easy ways to get a page from HTML to CSS+HTML?

They have: 34 posts

Joined: Feb 2002

OK, I'm sure we've discussed this before, but with a quick search, I couldn't find anything, so please do excuse my ignorance as I try to learn CSS - how to use it, how to apply it, and how to convert my previous html files over...

Here are a bunch of questions I have for y'all CSS experts! =)

1) Is there any quicker way besides good ol' Search/Replace to convert a current site into CSS+HTML? I have a VERY poorly written website (sample page eldaronline.com/news/news.shtml - it was generated via Frontpage - the BEST editor around *sarcasm*) ...

Hence, doing a search + replace is not as easy as it should be, since the code is rather messy and I really don't know where to start...

I heard of a program called CSSize that did something like convert HTML to CSS+HTML, anyone know of this?

2) OK, taking the above page as an example, what elements should I use in CSS? Or here's another example of a more involving article :: http://www.eldaronline.com/tactics/tactics_spacemarines.shtml

I figured I'd do all the font tags in CSS, all the paragraph tags in CSS (justify, indent 10), and what else? Feel free to browse around the site to give me any suggestions as to what and how you would use CSS. Or better yet, how you would help improve the site with CSS or any other medium of separating content from layout.

3) A specific question regarding CSS - on all my article titles, there are 4 sets of font sizes/colors right beside/under each other... such as (from the previous article)

Tactica Eldar: (gray) A Seer's Guide To The Battlefield (blue)
Scribed by: (black) Bonesinger Lanorel (orange)

but when I put Tactica Eldar:A Seer's Guide To The Battlefield the titles are UNDER each other as opposed to beside each other... what am I missing?

4) Frontpage sucks, yes I know. What's a good WYSIWYG editor that doesn't generate all this garbage / inefficient code? And can handle CSS? Also, Frontpage handles a whole site at once, do programs like Dreamweaver, et al do the same?

Thanks for the help y'all! =)

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Is there any quicker way besides good ol' Search/Replace to convert a current site into CSS+HTML?

I haven't heard of CSSize, no. I'm think that the easiest way would be to use an editor capable of more than just S&R, but rather grep... ultraedit.com may be able to do it. Word, ironically, can do it. So can BBedit.

How many pages are we talking here?

OK, taking the above page as an example, what elements should I use in CSS? [...] I figured I'd do all the font tags in CSS, all the paragraph tags in CSS (justify, indent 10), and what else?

You would do well to remove the font tags altogether. Strip it down to bare HTML. If you need the font tags for special text, replace it with .

A specific question regarding CSS - on all my article titles, there are 4 sets of font sizes/colors right beside/under each other... such as (from the previous article)
Tactica Eldar: (gray) A Seer's Guide To The Battlefield (blue)
Scribed by: (black) Bonesinger Lanorel (orange)
but when I put Tactica Eldar:A Seer's Guide To The Battlefield the titles are UNDER each other as opposed to beside each other... what am I missing?

You're missing correct markup. A element is not inline. Each heading has it's own space. You cannot have two headings on the same line. It doesn't even make sense that you'd want to.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

If you want to have things inline like that, do this:

Tactica Eldar: A Seer's Guide to the Battlefield
Scribed by: Bonesinger Lanorel

Where you'd have this in the CSS:

h1 {color: gray;]
.subheading {color: blue;}
h2 {color: black;}
.author {color: orange;}

They have: 34 posts

Joined: Feb 2002

I haven't heard of CSSize, no. I'm think that the easiest way would be to use an editor capable of more than just S&R, but rather grep... ultraedit.com may be able to do it. Word, ironically, can do it. So can BBedit.

GREP? what's that? I'll download Ultraedit IMMEDIATELY =). Word can too? heh

How many pages are we talking here?

Roughly 150-200? it's not TOO MUCH, as I've heard of some webmasters who've done over 3000 on here... me being the Web-idiot around town, 200 looks a lot like 2million =)

You would do well to remove the font tags altogether. Strip it down to bare HTML. If you need the font tags for special text, replace it with .

Just so I get the SPAN command... SPAN is a way of modifying a range of text WITHIN another? So, for instance, if i had a paragraph with a two words in there that are BOLD, I'd SPAN and apply a CSS tag? and if I have another two words that are in ITALIC later on in the same paragraph, I'd do the same?

Tactica Eldar: A Seer's Guide to the Battlefield
Scribed by: Bonesinger Lanorel

There still is a problem... see how on my article these two headings are SINGLE spaced? but when I do this, it ends up to be double spaced (looks)... any ideas on how to make it look exactly like my title?

Thank you very much for your help!

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

span is not a command, lol...

is an element, or a tag. You would only use it when there is no other element that would work. So no, you wouldn't use it for bold. The element for that is . The element for italics is actually called emphasis, or .

If you're going to do this, PLEASE get a book on HTML and learn it first. If you don't know the basics, you will seriously get yourself in a mess and quickly.

If you knew HTML at all, you would know you could do this:

Tactica Eldar: A Seer's Guide to the Battlefield
Scribed by: Bonesinger Lanorel

to get what you want, and you would also know that's a bad way to do it. If you really need things to be exactly as is, where everything has the same emphasis, you need to rethink your design. The title should be larger than the subtitle, and the author information smaller still, unless you're designing a book cover for Steven King.

Headings ... give information about the structure of the page to the user. They also provide alternative readers with a sensible view of the page.

They have: 34 posts

Joined: Feb 2002

That was a very revealing post, thank you... I've been doing some reading on CSS tutorials, and such, but they have not explained the significance of h1..h6 as you have... all they've been doing for me is HOW TO and not WHY - which is the important part... site's such as Webmonkey aren't of any help either... I've found one called index dot css, which I will take a better look at over the next while.

Any ideas on where else I could look? As to getting a book, I'm more of an electronic reader than a paperback, mainly because I'm an English student, and I'll take ANY and ALL opportunities I can to NOT read a book =)

=P

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

understood!

There aren't that many sites that really explain the whys. :-/ I suspect it's because people have done it so long they don't think to explain it, or because they don't know, they just do it.

Hopefully someone else can supply some good urls for WHY things are done in various ways. My own explanation is a little weird, but be patient:

HTML is a series of containers with various meanings.

is the house
is the blueprint, address, yard and outside of the house
is the inside of the house

Within the inside of the house, you have rooms (, ...), and within those rooms, you have objects (also , ..., ,

    ...

et cetera).

Like you can't have a coffee table half inside your couch, your tags must be nested properly.

Once you understand the basic essentials of markup, you can see that the element doesn't mean anything. It's a purely decorative container. So is the element, however it can be used as a decorative accent like a slip cover for your text.

Like a well-ordered room, if you use the table as a table, the chairs as chairs, et cetera, you achieve the highest function and you don't confuse your guests. There can be joy in using a table as a chair, yes, but unless you know what you're doing, it's more likely to be jarring than attractive.

Now... About those elements...

http://www.htmlgoodies.com/
http://www.w3schools.com/html/default.asp (unreadable on some platforms, and a living example of why not to use pts in your CSS, but the information is good)
http://www.gettingstarted.net/ (old, but good basic knowledge)

I recommend learning XHTML instead of HTML. It will stand you in good stead to only learn good coding habits.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.