CSS Visual Editor?

by 20 replies
31
What software is there to edit my CSS so that I can see it while Im doing it.

I tried the web developer plugin for firefox but there is a flaw where it doesn't seem to use the relative file paths., which envitably leaves me with bad file paths upon completion.

Thanks
#website design #css #editor #visual
  • You can do that with the firebug extension for Wordpress. Every designer should have this one installed inho!
    • [1] reply
    • Its not firebug for "wordpress", its a firefox addon - this is a must have tool and this supports real time updating of any webpage as and when you update the values and codes int the styling - later on you can update in the original files.
      • [ 1 ] Thanks
  • Banned
    [DELETED]
  • i only use macromedia dreamwever and macromedia homesite ++
  • The only way is to learn the standards, you should never blindly use WYSIWYG tools, without at least knowing the standards behind.

    I've seen far to many pages designed in dreamweaver, and similar tools, which where a complete mess when you looked at the source. Poorly structured, invalid coded, and poorly optimized for SEs.

    Editors like Dreamweaver are quite useless in practice, and those using them, often don't have a clue about what they are doing. The professionals who use them, do at least know the standards behind.

    Fact is, text-editors like notepad is some of the biggest competitors to Dreamweaver.
    • [ 1 ] Thanks
  • Intrepreneur: When it comes to designing CSS websites this is really different than pure HTML design. I use Microsoft Expression Web but still I write everything by hand - the visual editor is used only for preview and one of the biggest advantages is intellisense.

    But why do you need to learn the code. Here is how CSS websites are created:
    HEADER
    LOGO
    MENU
    LIST ITEM 1
    LIST ITEM 2
    LIST ITEM 3
    /MENU
    /HEADER
    CONTENT
    /CONTENT
    FOOTER
    COPYRIGHT
    FOOTERMENU
    LIST ITEM 1
    LIST ITEM 2
    LIST ITEM 3
    /FOOTERMENU
    /FOOTER

    What is important here?
    - First of all - the elements make semantic sense, you have a header, a menu, a logo etc. you have to name the elements and the easiest way to do it is by writing them by hand
    - Second of all - all of the menu items are lists - so you have the same CSS STYLE for each menu item and finally they are compsed into a great menu - you have to write this by hand
    - And finally - when you write by hand you can optimize your code - use IDs for elements that are shown once (header, footer) but you classes multiply times for elements that appear many times (menu for example).

    Learn it at W3Schools or download tutorials from totaltraining or Lynda
  • Of cause you can also just use Type Selectors, to help keep your markup as clean as possible. No need to throw in a class or id on each and every element.

    The logo can easily be selected, like below.
    Code:
    #Header p img {
     /* Styles go Here */
    }
    This assumes that your logo is an img, placed inside a paragraph, inside a header with an id of Header.
  • Hi,

    One of the best programs I've seen for this is CSSEdit (MacRabbit). It's very good, but not free, you can download a trial to check it out.

    Cheers, Lee.
  • Both Dreamweaver and Expression Web have good CSS editors that will let you see the css applied to any part of the page. You can then modify it to your heart's content and upload the changed stylesheet.

    Another good tool is TopStyle (windows only) which has both a free lite version and a full Pro version. Right now Microsoft has Expression Web 2 on sale for 50% off if you are in the US or 40% if you are in the UK. My guess is they are trying to clear out stock since version 3 is due out on July 10th. See the MS store or google for the link since this forum won't let me post the url.

    --
    Microsoft MVP Expression Web
    Adobe Community Expert - Dreamweaver
  • I should have added the closest I know of to a visual editor for CSS is Stylemaster which is available for both Macs and PCs but is not free.
  • I have been looking for a CSS editor. I didn't realize the was an addon right from firefox. I am going to check that out.

    Thanks for the tip!
  • I agree with B.W.

    The best thing to do is to learn how to hand-code your
    websites first before moving onto WYSIWYG visual editors.

    I wrote a post on my blog about this a month or two ago:WYSIWYG or not to WYSIWYG?
    • [1] reply
    • I didn't.
      I just learned as I progressed forward.
      Two things maybe a challenge: tables and layers.
      Text/links/images, that's the easy part.
  • The web developer toolbar for ff is a fabulous wysiwyg css tool. You can muck around as much as you want and try anything you want and it doesn't change the original file. Helps you learn pretty quickly how css works.

    It has nothing to do with paths, but if you get the css to the point you want to keep it, you can select it all and paste it into the css sheet, or anywhere you want. To me that's CLOSE ENOUGH.

    Usually when I'm using it, it's just to check a couple of small things to get them where I want them, then just copy them to the style sheet.

    Have fun with that.
    • [ 1 ] Thanks
  • Banned
    [DELETED]
    • [1] reply
    • Free html and css tutorials/classes at w3schools.com
  • i suggest you please go with dreamweaver
  • I use TopStyle for a CSS editor.
    • [1] reply
  • Banned
    [DELETED]
  • Banned
    Google Chrome has a built in CSS/HTML editor.
    1. Right click on the webpage, select "Inspect element".
    2. Make your edits.
    3. Hit Enter on the keyboard.
    • [1] reply
    • And you can also get 'Firebug Lite' for google chrome..

      Cheers, Sue
      • [1] reply

Next Topics on Trending Feed

  • 31

    What software is there to edit my CSS so that I can see it while Im doing it. I tried the web developer plugin for firefox but there is a flaw where it doesn't seem to use the relative file paths., which envitably leaves me with bad file paths upon completion.