Style Tester

When you’re trying out a new site design there are a lot of elements to consider. How big is the H1 tag? What color is the H2 tag? Is there a mouseover treatment for the links?

Wouldn’t it be nice if there was a way to quickly test and evaluate all of these style elements? I thought so and so I figured out a way to do it. You can use this free tool to check out various elements of your website design.

Here’s how one website looks:

And here’s the styling for another:

There’s quite a difference isn’t there? How does your website look?

To use the Style Tester on your site or blog click on Highlight All. Then copy and paste into the text or code area of your page or post. Save it and then preview.

</p> <h1>Line Tagged as H1</h1> <h2>Line Tagged as H2</h2> <h3>Line Tagged as H3</h3> <h4>Line Tagged as H4</h4> <h5>Line Tagged as H5</h5> <h6>Line Tagged as H6</h6> <pre>Here is a sentence that's using the <em>preformatted</em> style</pre> <p>Here’s a normal paragraph with a link to my site, <a href="https://www.perryweb.com" target="_blank">Perryweb.com</a>. Be sure to hover over the link. Some themes have different treatments for mouseovers. You may also want to click on the link as some themes have different colors for visited links. </p> <blockquote><p>This paragraph is in the blockquote style. Here’s another link to my site, <a href="https://www.perryweb.com" target="_blank">Perryweb.com</a>. Again, be sure to experiment with the link. The styles for mouseovers and visited links for the blockquote may be different than the styles for the regular paragraph.</p></blockquote> <p><strong>Bulleted List is Below And This is Bolded Text</strong></p> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> <p><strong>Numbered List is Below And This is Bolded Text</strong></p> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <p>