Experiment with CSS without Uploading Any Files

There are occasions where I upload the same CSS file dozens of times just to adjust padding around an image or to get a font size just right. Well, much of this work could be avoided by leveraging tools built into browsers like Google Chrome. We spent a little time in the last post talking about using the Developer Tools panel to remove content that gets in the way. This week we'll delve deeper and see how the Styles tab can help.

Background

Most websites I develop are built using PHP. Since the pages require a PHP-enabled server, I spend a fair amount of time uploading files just to see the result. Of course, I could install PHP locally. I just haven't invested the time to figure out how. Until then, the Developer Tools panel in Google Chrome will reduce some of the workload.

Example Scenario

Let's say I want to tweak the article titles on CyberScorpion.com. To do that, I can right-click a title and click "Inspect Element" (see Figure 1). In case you want to follow along, the screenshots below were pulled from "Remove Items from Websites that Get in Your Way".

Figure 1. Choose Inspect Element

Clicking "Inspect Element" opens the Developer Tools panel. The panel's "Styles" tab lists all the CSS styles applied to the selected element (see Figure 2).

Figure 2. Styles Tab

Existing styles can be removed by unchecking the box next to a CSS declaration. I can remove the space between letters, for example, by deselecting the "letter-spacing" box (see Figure 3).

Figure 3. Remove Letter Spacing

CSS declarations can also be modified by clicking the property name or value. Let's increase the font size (see Figure 4).

Figure 4. Increase Font Size

You can add new CSS declarations by clicking on the white space to the right of the existing declarations (see Figure 5).

Figure 5. Add Text Transform

Final Thoughts

If the changes don't work out as expected, it's easy to start over. You just need to click the browser's refresh button and the page is back to normal. Getting the list of changes made, however, is another story. So you'll want to make note of what was changed. That way you can recreate the stylesheet updates when ready.

Related Posts

• Easy Way to Un-hide Passwords in the Log-in Forms You Use Everyday
• Remove Items from Websites that Get in Your Way