CSS Terminal

CSS Terminal is a bookmarklet that allows you to inject CSS rules directly into a live web page. It's handy for rapid CSS development, prototyping and debugging.

Wanna see it in action?
Click here 👇

CSS Terminal

Write CSS in the terminal (the dark gray box) and those styles will be applied to the page.

Install

You can install the CSS Terminal bookmarklet in your browser by dragging the CSS Terminal link above 👆 to your browser's bookmarks toolbar. You may need to first make the toolbar visible by clicking View -> Always Show Bookmarks Bar or pressing Command+Shift+B.

Usage Notes

Once you've added the bookmarklet to your bookmarks toolbar, you can click the CSS Terminal bookmark to activate it on any website you visit. Write CSS in the terminal and those styles will be applied to the page when you enter a semicolon or hit the Enter key. You can also hit Command+Enter (on Mac) or Ctrl+Enter to apply the styles.

Pressing Esc or Tab will collapse the terminal. You can reactivate the terminal by clicking the bookmark again, clicking the CSS Terminal icon in the top right corner of the page, or pressing the keyboard shortcut Ctrl+/.

If you reload/refresh your page, your custom CSS rules will no longer apply. However, when you reactivate the terminal, your last set of rules are reapplied and you can continue editing.

The CSS Terminal uses local storage to save your custom CSS on a per site basis. This means that it will store your custom styles for ajaxian.com seperate from alistapart.com.

To quickly prototype content changes, press Ctrl+. and click on the part of the page you'd like to change. CSS Terminal will make that element's content editable. Note: these content edits are *not* persisted; they will be lost when the page is reloaded.

About CSS Terminal

The CSS Terminal bookmarklet was written by Ben Barber and is released under the MIT License. The source code and project page are hosted on GitHub.