Previewing HTML when editing CSS stylesheet

[PaulArmitage]

I'm a beginner with HTML & CSS and have just downloaded a copy of WeBuilder to evaluate. It looks quite brilliant - although I have to say my needs are quite limited - but I can't seem to find one feature which I would have thought would be essential in a good editor:

If I'm creating / editing a web page, I open the HTML and its CSS stylesheet side by side and work on both together. How do I preview the result without having to save the files first? I just can't seem to find how to do this (perhaps I'm just looking in the wrong place!)

Surely the editor knows that I have updated the stylesheet and can show the changes in the related HTML preview pane?

I know that you can set WeBuilder to use any HTML page to preview a CSS sheet, but you'd then have to save any changes to the HTML page each time. (And actually when I did try editing the HTML page in another window at the same time I got a fatal error - so I haven't tried that again.)

Any thoughts how I do this?

[chrisjlocke]

You'd have to save the .css page, as the HTML pulls this in when its rendered. You don't need to save the HTML page though - just 'refresh' the preview.

However, unless you explicitly set a css page (absolute link) the html page will have to be saved for any relative links to work.

To explain this better, if you create "1.css" on your desktop, and create an HTML document, you link the html with the css using
<link rel="stylesheet" href="1.css" type="text/css" />

Unless you save the html document to your desktop too, this won't work, as WeBuilder won't be able to know where the css file lives.
To get around that, you'd need the full path to the css file:
<link rel="stylesheet" href="c:/documents and settings/chris/desktop/1.css" type="text/css" />

etc...

Hope that makes sense.

[PaulArmitage]

Thanks. I understand about needing to put in the full path - or at least the path relative to where you have saved the HTML file (I had a similar problem getting images to show correctly in preview).

So the answer is that I have to save the CSS file each tiime I make a change, in order to see the preview with the HTML file I'm editing. You can't do it side by side and see the results without saving one or other of the files.

Well - I'm a little surprised, but I'm new to all this. Perhaps you experienced web developers just prefer to do things one step at a time ;-) (either the html or the css), and maybe that's the better way to do it. I'm still just a little bit surprised - it would seem an intuitive way to work to be editing both at the same time and seeing the results in front of you. Do you know if any of the big expensive editors allow for it (just curious - all I want to do for now is to get my photoblog to look pretty, and for that WeBuilder will be a great help)?

But thanks for your help.

[chrisjlocke]

So the answer is that I have to save the CSS file each tiime I make a change, in order to see the preview with the HTML file I'm editing. You can't do it side by side and see the results without saving one or other of the files.

Unfortunately not, no. Its just the way the browser works - nothing to do with WeBuilder. I guess it could start saving temporary files, but it'll then have to doctor the HTML file to work with this temporary CSS file, then when you save one and then the other, it can get a bit messy.

Don't forget WeBuilder has a 'Save all' button (which can be configured to a keypress) so if you do make a change, you simply click one button (or one key combination) and your css and html files (and some php files if you've been coding in that too) are all saved, ready for the live preview.

Perhaps you experienced web developers just prefer to do things one step at a time (either the html or the css)

Depends on the size of the project. Normally, I only write simple web pages, so do tweak the CSS (increase the height, change a font size) which does involve swopping from CSS tab to HTML page frequently. However, as a guide, there is also a CSS preview, which does help me enormously - especially when sorting out colours and the like.

[PaulArmitage]

OK - thanks for that.

[daisymorgan]

If you're working with a single html file you could keep (embed) the css code in that .html file until you're happy with it and then move the code to a new css file (and link it as Chris explains above).

Have a look at the Westciv tutorial, Linking and embedding a style sheet.

I use this method occasionally when learning a new technique but 99% of the time I find it easier to work with separate, nicely organized css files, using the Save All button frequently!

[devenh]

I am new to WeBuilder too and was surprised the css file needed to be saved in these circumstances. I understand why WeBuilder does this as do most other html editors I looked at.

SUGGESTION: Why not have an autosave option so that when the preview refresh button is pressed all open css files are saved?

Deven