For Web Designers and Developers writing CSS code for elements is so time consuming. That too make changes in SharePoint Stylesheets(CSS) needs more patience. First have to make change in CSS, reset IIS(or Application Pool Recycle), clear browser cache/temp files and check. Even for one small change or entire CSS change the mentioned steps has to be done. Sometimes the changes won't reflect and makes little irritating. Many of us faced and facing this issue. Alternatively you can make changes with SharePoint Designer and preview changes. Again than requires make changes in CSS with SharePoint Designer and open with browser or Designer's Design view. Still it's not sufficient for me to complete CSS coding faster.
How to change SharePoint site controls design?
Assume we requested to change width of Quicklaunch bar in SharePoint 2010 Site. First we need to find the CSS class of Quicklaunch bar. Well for experts it's very easy because it's "ms-quickLaunch". But for newbie it's not so easy, He has to open the site in browser, click View -> Source, Search for text in Quicklaunch and determince the Div which has the exact text. Alternatively we can do the same with SharePoint Designer. After that we have to find which CSS has this class style definition. That's no so easy unless you have SharePoint Designer.
Quicklaunch is always visible and easy to edit/preview with SharePoint Designer. Take example of changing Title bar of Dialog window. Can you make changes with SharePoint Designer? As far as I know it's not possible.
How to change and preview CSS on the Fly?
When I got the requirement to change Dialog window style, I haven't suprised because I know the power of
IE 8 Developer Tools. :-)
Lets see how to change CSS Styles without touching CSS files. Wondering how to make CSS change without editing CSS file? Let's see.. First open the site with IE8 and open the dialog(Click "Add New Announcement" link in Home Page or Site Actions -> More Options). Once the dialog came up Press F12 to get Developer Tools window. It'll take few seconds to load the HTML and CSS. In the Developer tools window click Arrow button (or Ctrl + B) and select the Title bar of dialog. It'll show Blue outline to show the element on focus.
Once the element selected the window will show exact HTML Code and CSS styles applied to it + CSS file which has the definition. In the CSS pane, double click on style (eg. Font-family:) and it'll become editable. Change it to "Arial" and enter. Now you can see the Title bar in "Arial" font. like this you can change any element style and see how it looks. Once you got the style what you want, click the CSS file name above top right in the CSS pane. It'll open the next tab which is "CSS" and shows the CSS file contents. In the drop down you can see the path of the CSS. Login to server and open the CSS with Notepad then make same changes. Once done save and reset IIS. That's It!
Like this you can change the look and feel of entire site easily.