Not really sure.
I just found this: http://www.skybound.ca/
Seems intuitive.
You can also just use Notepad++ and save as ".css" if you know what you're doing and don't need a visual assist.
Plenty of videos on Youtube, of course.
One thing I absolutely recommend is to not F up your actual MFL site until you know it's working well. You can do this by going into the setup screen and down at the bottom left you can click the link for "Duplicate This League". It will , of course, duplicate the league on a different web site address (save the link), and you can do experiments on that site instead of your real one. When you're done, just go to the same setup page and click "Schedule This League For Removal".
> Can't you do that in PHPstorm also?
I don't have too much experience with PHPstorm, but my understanding was that you get live editing/previewing of CSS but it's all browser based so outside of a DOM inspector and such there's no additional tools to assist you with styling.
Espresso actually has a couple of cool features that really enhances the process. The main feature is something called "X-Ray" that basically breaks down the layout of a page, sort of like a DOM inspector, and does cool things like helping you define a style or override it locally, and then ultimately ties the styles in the preview to your local source. So click on #masthead in the preview and it gets highlighted in your code. There are also some visual tools to automate common tasks like setting borders, and colors, fonts, padding, and so on.
Offhand, the only other apps I know that do anything similar are Stylizer, which really isn't a text editor, and TopStyle which is Windows-only. But again, I'm not that familiar with PHPStorm. I've demoed it once or twice but it seemed sort of clunky to me.
Create a simple html file and add some divs. Put the styles in the head tag and make the background/border different colors. Then just start playing with the properties until it makes sense.
This seems silly but its the best way to learn short of someone showing it to you.
You can also try this.... http://www.w3schools.com/css/css_boxmodel.asp
or this... http://www.skybound.ca/
Thanks zmodem, I was aware of this but just wondered if it was the best way of going about it. I've done a little research and I'm thinking of trying out Stylizer. I can't vouch for it yet having not used it but it seems to be the correct sort of thing!
I mostly agree with you. Although as a "pro" (;P) I used to do all of my mockups/designs in PS until I found this. This program has saved me soooooooo freakin much time styling the code, and ensuring it all validates. Of course I still use PS heavily for my design elements, I believe the OP is heading in the right direction by coding in HTML5 and exploring the Google font API and analytic services. The code could be a little cleaner and I suggest always saving styles to a dedicated stylesheet. If you are looking for a little inspiration, check this out.
I used to run into this problem occasionally. I understand that this suggestion may not help you immediately, however I found that using a prog by Skybound Software called "Stylizer" [http://www.skybound.ca/] has DRAMATICALLY shortened my CSS work time. It tests in both IE and FF.