CSSEdit an Easier Way to Edit CSS Based Web Designs on the Mac
Written by Tara: Freelance Designer on Thursday, 24 of May , 2007 at 9:58 am
I had been reading a lot about CSSEdit lately and decided to give it a try. CSSEdit enables you to edit both live and local websites which have external CSS style sheets. I have been using it to try to edit a template for this blog. On of the first things that struck me about CSSEdit was in a lot of ways it was similar to Firebug, it gives you the ability to see exactly what bits of CSS do what, ideal for newbies like me.
To edit the CSS on a live web page, you go to preview, then add site URL, as shown left. Your web page will then appear in the window. You can then go to the override button to download the CSS file associated with the web page.
By clicking on the inspector you can click on any item on your web page and see which style is applied. You can then edit your CSS and see in real time the effect it would have on your website. This is a feature very similar to Firebug, but in my opinion much easier to use, and much simpler to edit the CSS, even for CSS dummys like me. You can edit the CSS by typing in the code or use drop down menus to choose fonts and colours etc. A great thing about editing the code manually is that CSSedit gives you prompts, for example, you start of typing background and it shows you a list of background-color, background-image, which is pretty handy for speed as well as if like me you are a little unsure how the code should be written.
You can save your style sheet at anytime to your local drive, I was saving in stages so I could go back to older versions if I made mistakes, but there is a feature called Milestones, which is supposed to be very similar to “photoshop history” whereby you can go back a few steps, though I didn’t try out this feature.
Within CSSEdit there is something called a validator which again is a cool feature, you just hit the button and it tells you of any problems with your code. I tried it and it flagged a couple of semi colons I had missed and where to find them.
Once you are happy with your CSS you can easily cut and paste the revised style sheet into your live CSS file. You can also connect CSSEdit with your FTP program such as Cyberduck and edit the live files, but again this is something I am yet to try out.
I can imagine CSSEdit would work really well alongside the wordpress theme generator which Randa Clay wrote a post about. Between the two programs it should make designing fresh wordpress themes easier.
CSSEdit costs $29.95 from Macrabbit, there is a free trial version you can try first too.
Category: General Graphic Design, Web Design
- Add this post to
- Del.icio.us -
- Stumble it! -
- Digg
Comment by Randa Clay
Made Thursday, 24 of May , 2007 at 12:36 pm
Will have to give this one a try. I will say that while the theme that came out of the WordPress Theme Generator was pretty good, there were some things that needed to be fixed, so do some thorough testing (which you would anyway of course). The search thing didn’t work at all- was missing a piece of PHP. If you’re using sidebar widgets that doesn’t matter anyway though.
Comment by Tara1
Made Thursday, 24 of May , 2007 at 12:54 pm
Thanks for the warning Randa. I think I will stick with adapting an existing theme at first but might have a dabble with the theme generator and CSS Edit when I’m feeling braver 
Comment by LaurenMarie
Made Thursday, 24 of May , 2007 at 4:27 pm
Sounds like a neat, easy to use program… too bad it’s Mac only 
Comment by medienstern
Made Friday, 25 of May , 2007 at 12:14 am
Thanks for this Information ti CSS Edit.
Comment by Tess
Made Friday, 25 of May , 2007 at 12:40 pm
Thanks for the tip; sounds like a cool app. I’ve been working with CSS for a while but could use a nice GUI to make things easier… 
Comment by Tara1
Made Friday, 25 of May , 2007 at 12:44 pm
Glad you found it useful medienstem and Tess, let me know how you get on.
Lauren, time to get a Msc?
Comment by Justin
Made Monday, 28 of May , 2007 at 7:41 am
I’ve been using it since just before they upgraded to version 2. It’s incredibly fast and you’re right, with Cyberduck the process is streamlined.
I have been messing around with Coda from Panic Software. It’s an amazing app with features similar to CSSEdit and much more. Definitely worth a look.
Comment by Tara1
Made Monday, 28 of May , 2007 at 12:39 pm
Hi Justin
Thanks for the info about Coda I will take a look at that.
Comment by Tess
Made Monday, 28 of May , 2007 at 4:15 pm
Hey Tara, I bought the app, it’s cool and easy to use. I changed my template in a few hours. There’s one thing that I miss; a good search option. I tend to check it in BBEdit still, but I might be just lazy and in need of reading a manual before using the app…
Comment by Tara1
Made Monday, 28 of May , 2007 at 4:37 pm
Hi Tess
I’m glad it worked for you, I’m still messing around changing mine, though thats taking a long time due to the operator (me) rather than CSSEdit
There is a find function, did you use that? In the edit menu you choose find and then you can search by style or text.
One thing I liked is you could use it without reading a manual, I hate online manuals.
Comment by Andrew
Made Tuesday, 29 of May , 2007 at 8:11 pm
hi,
CSS Edit looks great and I will give it a try.
But I am a big fan of Dreamweaver when it comes to Css and Html based websites
Cheers,
Comment by Tara1
Made Tuesday, 29 of May , 2007 at 8:22 pm
Hi Andrew,
I have only tried Dreamweaver with tables, that I just could not get the hang of. If you use HTML and CSS do you have to design in code view?
Comment by Bryan
Made Friday, 13 of July , 2007 at 12:30 pm
Hi gang!
I have been using Dreamweaver since its inception, and have followed it through every version (with the exception of CS3). As much as I love the tool, there is something to be said about hand coding.
Like most of you, I am a visual person. Staring at lines of code is like putting a vegetarian in a meat factory. The biggest benefit to hand coding that I have found is how much you learn along the way, and more importantly knowing your site inside and out.
I find myself flipping back and forth between hand coding and Dreamweaver. There are just some things that Dreamweaver makes easier like embedding objects, and creating nested tables/layers to name a few.
Recently I signed up for a monthly membership with Lynda.com. I must admit, it is the best $25.00 a month (USD) I have ever invested. With 3800 titles to choose from, it is a designers paradise. You can watch an entire course, which I have done or you can use it as a reference tool as well. I find myself going to the site when I get stuck on something. In fact, just yesterday I was working with Flash, and was having difficulties with a certain action-script function. I logged on the Lynda.com, went to the Flash 8 courses, and found just the section on Action Scripting. I found the answer to what I was looking for within a matter of minutes.
There are a plethora of tools available to help in the design process of a web presence. It is just a matter of finding a few that work and stick with them. Right now I use Dreamweaver 8, BBEdit 8.6.2 (for hand coding), CSSEdit, Fetch (mac-only ftp client to upload/download files), and of course Lynda.com.
Also, do not be afraid or feel guilty using web templates. They are the best way to learn how sites are put together.
Bryan
Comment by werbeagentur
Made Monday, 10 of December , 2007 at 1:58 pm
CSSEdit is a ideal tool for developpers like firebug. If the designer must go over huge and differenz css styles, it is a great help to find the maching entry in the css files. I like it very much.
Comment by Bubbila
Made Wednesday, 30 of January , 2008 at 10:32 pm
Sweat CCS, just what I have been looking for! Well Pleased…
Comment by Tagesgeld
Made Thursday, 24 of April , 2008 at 11:20 am
CSSEdit is really awesome. A handy tool for every webworker
Comment by Andreas
Made Tuesday, 3 of June , 2008 at 2:12 am
Thanks for this advice!
Comment by Briefbogen
Made Wednesday, 11 of June , 2008 at 12:31 pm
I don´t use CSSEdit, but now it´s intriguing to me - thanks!