Web Design Tip No1: Find Styles and Elements with CSSViewer

Web-designIf you are, like me, not a coding pro, but you want to perform small changes on your website yourself, then I can recommend using the browser add-on/extension CSSViewer.  It is available for Firefox and Chrome.

Just Click on the links above to install it for your browser. After it is installed there should be a small button where the other extensions are.

CSSViewer is simple to use: Click the button and it shows you the CSS properties of any element on a webpage when you hover with your mouse over it.

For example, you want to change the font of your menu items, but cannot make sense of your CSS style sheet? Simply hover over the menu items and you’ll see the name and it’s properties. I also keep forgetting the hex color codes for different elements here on Darn Office.

It is also great to find out how other websites are structured and what fonts, colors, font sizes, margins, paddings, etc, they use. This extension has been an enormous time saver for me. It’s fee and easy to use.

website design tip: use CSSviewer

Example how the CSSViewer looks in Chrome (click to enlarge)