20 replies
  • WEB DESIGN
  • |
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
#css #editor #visual
  • Profile picture of the author Lunatic
    You can do that with the firebug extension for Wordpress. Every designer should have this one installed inho!
    {{ DiscussionBoard.errors[947179].message }}
    • Profile picture of the author hipnol
      Originally Posted by Lunatic View Post

      You can do that with the firebug extension for Wordpress. Every designer should have this one installed inho!
      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.
      Signature

      Check out Katreena Kaif - guess you will be interested in Wallpapers of Katrina Kaif

      {{ DiscussionBoard.errors[948854].message }}
  • Profile picture of the author hotscode
    i only use macromedia dreamwever and macromedia homesite ++
    {{ DiscussionBoard.errors[948434].message }}
  • Profile picture of the author B.W
    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.
    {{ DiscussionBoard.errors[948677].message }}
  • Profile picture of the author CaffeinatedWorld
    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
    {{ DiscussionBoard.errors[948795].message }}
  • Profile picture of the author B.W
    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.
    {{ DiscussionBoard.errors[948816].message }}
  • Profile picture of the author lharding
    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.
    Signature
    Lee Harding
    The Architect
    {{ DiscussionBoard.errors[949205].message }}
  • Profile picture of the author cdwise
    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
    {{ DiscussionBoard.errors[950332].message }}
  • Profile picture of the author cdwise
    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.
    {{ DiscussionBoard.errors[950338].message }}
  • Profile picture of the author Amanda_Moon
    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!
    {{ DiscussionBoard.errors[950537].message }}
  • Profile picture of the author David0022
    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?
    {{ DiscussionBoard.errors[952255].message }}
    • Profile picture of the author HomeBizNizz
      Originally Posted by David0022 View Post

      The best thing to do is to learn how to hand-code your
      websites first before moving onto WYSIWYG visual editors.
      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.
      {{ DiscussionBoard.errors[958801].message }}
  • Profile picture of the author Lloyd Buchinski
    Originally Posted by Intrepreneur View Post

    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.
    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.
    Signature

    Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

    The KimW WSO

    {{ DiscussionBoard.errors[957179].message }}
  • Profile picture of the author cheapdeals
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[957207].message }}
    • Profile picture of the author cdwise
      Free html and css tutorials/classes at w3schools.com
      {{ DiscussionBoard.errors[957646].message }}
  • Profile picture of the author thastrainings
    i suggest you please go with dreamweaver
    {{ DiscussionBoard.errors[6532988].message }}
  • Profile picture of the author HorseStall
    I use TopStyle for a CSS editor.
    {{ DiscussionBoard.errors[6534131].message }}
    • Profile picture of the author ronc0011
      Frankly I have to agree that you really need to learn to hand code the CSS even using an editor, or especially using an editor. I really like Microsoft Visual Web Developer for an IDE I code everything by hand and almost never use the "Design" mode but rather the "Code" view From here as I make changes to my CSS and hit "Save" and refresh my browser my changes are instantly reflected in my displayed page. So I'm looking at my page running in the built in server in Visual Web Developer and I have the stylesheet open in VWD at the same time and I make changes to my stylesheet and save it , hit refresh on the browser and there are my changes.

      I'm pretty sure Dreaamweaver does the same thing but I've been looking at other IDE to work with PHP, VWD doesn't support PHP. So far all the other IDEs I've looked at don't do this so well. Kind a sucks.
      {{ DiscussionBoard.errors[6534583].message }}
  • Profile picture of the author yukon
    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.
    {{ DiscussionBoard.errors[6536726].message }}

Trending Topics