Gizmos Freeware Reviews  

Go Back   Gizmo's Freeware Forum > Freeware Forum > Website Design, Support and Maintenance

Closed Thread
 
Thread Tools Display Modes
Old 03. Sep 2009, 12:41 PM   #1 (permalink)
Junior Member
 
Join Date: Sep 2009
Posts: 3
Default Is there a good freeware visual CSS editor?

OK, I confess - I really haven't yet managed to develop a comprehensive understanding of CSS.

I get the basics of controlling the different textual elements but need to improve my understanding of the cascading bit! Is there a freeware editor that will allow me to build a .css file and see the immediate effect of the changes on different elements of an HTML page?

Also, if anyone has found a comprehensive, well-written CSS tutorial I'd appreciate a pointer - there are many out there but most only seem to cover the absolute basics or to disappear off into the advanced distance leaving me spluttering in the dust

Charlie
booleanboy is offline  
Old 03. Sep 2009, 04:13 PM   #2 (permalink)
Maestro di Search
 
Jojo Yee's Avatar
 
Join Date: Jul 2008
Posts: 7,810
Default CSS Editor and Tutorial

Quote:
Originally Posted by booleanboy View Post
Is there a freeware editor that will allow me to build a .css file and see the immediate effect of the changes on different elements of an HTML page?
Try Best Free HTML Editor, some feature CSS.

Quote:
Originally Posted by booleanboy View Post
Also, if anyone has found a comprehensive, well-written CSS tutorial I'd appreciate a pointer - there are many out there but most only seem to cover the absolute basics or to disappear off into the advanced distance leaving me spluttering in the dust
Try html.net, "the CSS Tutorial will get you started with CSS in just a few minutes, easy to understand and will teach you all the sophisticated techniques."
Jojo Yee is offline  
Old 03. Sep 2009, 07:08 PM   #3 (permalink)
Foundation Editor
 
chris.p's Avatar
 
Join Date: Apr 2008
Location: Surrey, UK
Posts: 1,631
Default

I mainly do CSS stuff now as most of my work is on CMS and ecommerce, and that means more CSS to alter pages than HTML / PHP, since the templates have the basic code and you alter the CSS to change almost everything.

There are two methods I mainly use:

1: a good text editor like NoteTab Pro* plus a good FTP app
2: the Firebug dev plugin for Firefox browser

Using 1/, you can get a good view of your code - change an element - FTP it up - refresh the site - see your change in under 5 seconds. I can't see how you would need to do it faster than that. If I'm changing font sizes and running through a series of changes to get what I want (like 175%, then 190%, 200%, got it) then each change can take about 4 seconds.

An alternative - especially when you're not sure what element does what - is to go with 2/. It's what a huge number of web devs use, including the guys who build the best CMS templates, and they are the masters.

This is how: go to Mozilla add-ons, using Firefox, and get the latest Firebug plugin. I've often found that the latest Firefox version won't work with Firebug, so I keep the latest version of the last stable series of Firefox, not the latest-latest release. So I run Firefox 3.0.13 and Firebug 1.4.2 and they work just fine. I repeat that late Ffx versions can be a problem with Firebug.

Have the toolbar button visible for Firebug and view the page you want to change. Hit the Firebug icon and open it - a big dev pane opens at the bottom of your screen. Hover over the page element in question. Down at the bottom right, in the Firebug pane, in the right-hand column, you will see the CSS sheet name, the correct line, and the CSS code that applies.

It's about the best system there is for finding the CSS for something on a page. It's especially good when you are working on a complex CMS with 20 CSS files or more.

You can also edit the CSS live and see what happens. That's the next stage.

Always keep a backup of the original CSS file.

I prefer to increment them on the server rather than live edit the file or edit it in Firebug: when you have changed your local copy of the file, then in FTP, on the server, change the CSS filename like this: main.css.bak1 -- and do this regularly. Then you will have an incremented series on the server, like this:

main.css [your current working file]
main.css.bak1 [the first change you made]
main.css.bak2 [the second change you made]
main.css.bak3
main.css.orig [the original CSS file]

That way you can easily revert back to any stage.

To refresh your site view you can do 2 things: hit the browser Refresh icon or Cntrl+R, which reloads the page. Sometimes this will not reload the new CSS file (depending on lots of things). It's safer to hit Cntrl+F5 as this reloads all files including CSS and images.

The best advice I can give is to keep incremented backups of everything. It might be a pain but mistakes are a matter of course, you need a way of getting back to where you started.

* NoteTab Lite is just as good for this. Anyway in CSS you don't get syntax highlighting etc, you just get a plain text view. But if you are seriously going to do any website work then a good (real) text editor will become your best friend. It holds code snippets like your preferred DocTypes and CSS, and tons of stuff like that. Search & replace, highlighting.... - can't live without it.
__________________
[URL="http://www.ecigarette-politics.com"]The politics of vaping[/URL][/SIZE]

Last edited by chris.p; 03. Sep 2009 at 07:15 PM.
chris.p is offline  
Old 04. Sep 2009, 07:29 AM   #4 (permalink)
Maestro di Search
 
Jojo Yee's Avatar
 
Join Date: Jul 2008
Posts: 7,810
Default

Quote:
Originally Posted by chris.p View Post
* NoteTab Lite is just as good for this. Anyway in CSS you don't get syntax highlighting etc, you just get a plain text view. But if you are seriously going to do any website work then a good (real) text editor will become your best friend. It holds code snippets like your preferred DocTypes and CSS, and tons of stuff like that. Search & replace, highlighting.... - can't live without it.
Notepad++ can be a good choice. It highlights syntax for selected language html, css, etc, with a plugin for FTP-sync.
Jojo Yee is offline  
Old 05. Sep 2009, 06:45 PM   #5 (permalink)
Foundation Editor
 
chris.p's Avatar
 
Join Date: Apr 2008
Location: Surrey, UK
Posts: 1,631
Default

Oh yeah, and here's a great cheat method. Cheats are the best shortcut, who wants to do it the right way, huh.

Find a site with some neat stuff you like - then check out their CSS file. Easy: look at the code source and get their CSS file - if it is /main.css then browse to:
www[DOT]neatsite.com/main.css

...and check it out. Then you'll get all the neat tricks like:
display:none;
text-align:justify;

...that maybe they don't tell you in the tutes.

__________________
[URL="http://www.ecigarette-politics.com"]The politics of vaping[/URL][/SIZE]
chris.p is offline  
Old 06. Sep 2009, 02:42 AM   #6 (permalink)
Maestro di Search
 
Jojo Yee's Avatar
 
Join Date: Jul 2008
Posts: 7,810
Default

Quote:
Originally Posted by chris.p View Post
Find a site with some neat stuff you like - then check out their CSS file. Easy: look at the code source and get their CSS file - if it is /main.css then browse to:
www[DOT]neatsite.com/main.css

...that maybe they don't tell you in the tutes.

Thanks Chris, that's a good method to view the css file, in addition to viewing the html source file.

Browsers should add "view css source file" by standard.
Jojo Yee is offline  
Old 06. Sep 2009, 04:29 AM   #7 (permalink)
Foundation Editor
 
chris.p's Avatar
 
Join Date: Apr 2008
Location: Surrey, UK
Posts: 1,631
Default

Yeah, 'cos every browser must get the CSS file/s instantly anyway - so you are right.

Firebug is good for this but it's a bit OTT a lot of the time, like you say, you just want a quick view of the CSS.

'Course, it's getting a bit complex now, large sites might have 3 or 4 files plus the IE kludges.

Most of us are going to stop worrying about IE6 from next January and by heck that won't be soon enough. I hate that awful nightmare of a browser, but there are so many people still using it. Jeez. We will put up a big warning sign on our sites, something like YOU ARE USING A STONE AGE BROWSER, GET A LIFE or something. There are still a lot of corporates tied into it though, believe it or not.
__________________
[URL="http://www.ecigarette-politics.com"]The politics of vaping[/URL][/SIZE]
chris.p is offline  
Old 06. Sep 2009, 11:45 AM   #8 (permalink)
Super Moderator
 
Anupam's Avatar
 
Join Date: Jul 2008
Location: India
Posts: 15,277
Default

I have IE6 on my PC . I would be keeping it that way I think. Because, IE is not my default browser, its Firefox. So practically, I don't use IE at all. I do not want to install newer version of IE, as I don't use it much, so its gonna be wastage of space . So, it will be there, maybe until I change to Windows 7.
__________________
Anupam
Anupam is offline  
Old 07. Sep 2009, 09:02 AM   #9 (permalink)
Senior Member
 
Join Date: Jun 2009
Location: Qld, Australia
Posts: 129
Default

There are some good, free css layouts (not templates) at
http://matthewjamestaylor.com/blog/p...liquid-layouts

There are a few good editors out there, all have different good points. Many will give you the code you are after (like who can remember how to type their doctype). I started out with NoteTab Lite which was great but when I discovered syntax highlighting I couldn't go back. I then spent years with AceHTML but it had a couple of things that didn't suit me although I liked the ease of creating your own code snippets. I'm now using RJ TextEd and find it wonderful.

All these editors allow you to "preview" so it's fairly quick to see what you've done. Combine it with Firefox's webtools (or some name like that) and you can find what element you've done something wrong with.

As for a comprehensive tutorial I didn't find any years ago when I first started so I learnt the basics and now if I need to know something I just type it into google.
miskairal is offline  
Old 08. Sep 2009, 01:38 PM   #10 (permalink)
Progradminstrateditor
 
George's Avatar
 
Join Date: Mar 2008
Location: Frankfurt, GER
Posts: 2,293
Default

I am using the Pro version of TopStyle. While the Pro version is commercial, ToStyle also has a free Lite version. Get it here:

http://www.snapfiles.com/get/topstylelite.html

This CSS editor presents code and preview at the same time. Pretty cool to get a rip on CSS fast. Maybe that's what you're looking for.
__________________
Best regards, George
George is offline  
Closed Thread

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT +1. The time now is 12:20 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, vBulletin Solutions, Inc.