Stylish, for both Firefox and Google Chrome, has long been a must-have extension among those of us who love a beautiful web. When we land on a site that needs a bit of tweaking, Stylish came to the rescue, allowing users to edit the CSS of any site on the web. (If you're not familiar with CSS, think of it this way: two languages go into making a website. The format of a site is coded in HTML; the appearance is coded in CSS. Without CSS, every website would look very much like a Microsoft Word document).
Being a CSS manipulator, Stylish, of course, requires knowledge of CSS to write your own style, meaning that, for the most part, only web developers and designers use it. It also comes with a bit of a learning curve: knowing CSS isn't enough to write a userstyle. You must also know how to code the style to apply to the proper url, for instance.
Stylebot is an extension for Google Chrome that not only strips away the learning curve, but is also a much more robust and useful extension for web developers, designers, and power users.
Using Stylebot is simple: once you install the extension, a small 'CSS' logo is placed in Chrome's awesome bar on every site you visit. Clicking that logo presents a dropdown menu.
Clicking the arrow in the Stylebot menu allows you to simply hover over any website element to highlight it, then click to select it. Once an element is selected, use the menu to alter any rules for that element: change the color of links, change the font, the spacing, or just click 'hide' to make it disappear.
If you're more comfortable with CSS, just click the 'Edit CSS' button at the bottom of the menu to switch to the CSS editor.
If you'd like to get a better idea of Stylebot's capabilities, take a look at the video:
Tweak the site to your heart's content, and Stylebot will save that style, meaning that your changes will be applied every time you visit that site.
Arguably, Stylish's most useful feature is userstyles.org, which serves as a catalogue for userstyles others have created. The site is often the only way non-designers and developers can take advantage of Stylish: find a userstyle you like and click to install. The downside is that you're stuck with using only those styles that others have created, and if a style doesn't exist that satisfies your needs, you're out of luck.
Stylebot has a similar collection of styles, which rivals, if not surpasses, its Stylish rival in terms of selection. Since non-power users can share styles of their own directly from the extension's options page, the sheer number of styles already available is impressive. The search function also seems a bit more accurate than the userstyles.org search.
The advantages for laymen are pretty obvious: this extension is much easier to use than Stylish, but the advantages to developers and designers are significant. Live editing means that you can see changes immediately, resulting in true on-the-fly editing. We also don't need to inspect a site's code to find its CSS selector- just point, click, then edit. These features also make it a superb tool to debug your own site: if something's not looking quite right, Stylebot makes it a breeze to find out what's wrong.
We pixel-obsessed users will never be completely satisfied with the state of the web — there's always going to something that needs improved — but Stylebot certainly goes a very long way in calming our obsession. It's never been easier to create a beautiful, personal version of your web.
If you enjoyed this post, please share it with the button below, and don’t forget to subscribe for more Sssimpli goodness. Need more to read? Check out Sssimpli Links, a handpicked digest of the week’s best tech-related writing, delivered (almost) every Friday.
Article thumbnail courtesy of StockFreeImages