If you don't have your own website, you can stop reading right now. This post is for geeks, or wannabe geeks.
Ever want to muck around with your site and just see how different changes affect the display? This usually entails modifying a file, such as the style sheet, saving the file, republishing the website, and reloading the site in your browser.
Well, now there is an easier way, if you have the Firefox browser installed. Introducing, the Firefox Web Developer extension! (Actually, it's been around for a while, but I like to be dramatic.) It slices, it dices, it allows you to edit the CSS on your website and immediately see the changes.
Heck! You can edit the styles for any public website. Simply install the extension, close and restart your Firefox browser so the extension gets loaded. Next, load a website into your browser. How about Google News?
Would you like to view the style sheet for the website? Voila!
By default, this will open up the style sheet(s) in a new tab like so:
Now, you can see the styles Google uses for its news page! Cool!
Can you actually change Google's styles and see how your changes affect the website? You can! Simply select "Edit Styles" from the same menu where you selected to view them. Voila! A side pane comes up which allows you to edit the CSS properties.
Try changing the font-family on the second line to "georgia". Try changing the link color on the third line to #900. Look at the results:
The font is a serif Georgia font, instead of sans-serif Arial, and the article links are red. Cool!
By experimenting in this way with the CSS of your own website, you can quickly understand the effects of various CSS changes, without having to republish your blog, yada yada yada. Quick, easy, and fun! So, when you update your style sheet(s) on your public website, you can be relatively assured that the changes you make will be safe and do what you want.
Play around with the Web Developer extension menus. It's amazing the amount of information you can find there.
Comments