Tutorial: write your own user style - pt. 2

Now that you had some time to brush up on your HTML and CSS skills and to install Stylus into your browser, it's time to go on to the serious - and fun! - stuff.

This is part two of a series on how to start writing your own user style. The first part can be found here.

How to start writing your own user style

To know which elements of a page to change in order to apply your own style, you need to be able to examine the code of a page. These days, all modern browsers have developers tools built in, which can be used to determine which elements to change.

You may ask yourself where you can find these tools and how to activate them. You may never have seen them before, but they are only two mouse clicks away:

1. Point your mouse cursor to any element on this page. This can be the title, an image, the menu or anything else that the page is displaying,
2. Now click your right mouse button.
   Every browser has its own menu here, but down towards the bottom of the menu there should be something like 'Inspect', 'Inspect element' or words to that effect.
3. Click on that menu item and the browser's developers tools will appear.*

To activate the developers tools you may also press the F12 key or Ctrl+Shift+I. The right click > menu > Inspect method will highlight the corresponding line in the HTML code, whereas the keyboard shortcut won't.

The developers tools may appear at the right or the bottom of the page or in a separate window, and they may have a light skin, instead of the dark one displayed in the screenshot below. This is all configurable in the tools' settings that can be opened by clicking the three dots in the upper right-hand corner of the developers tools.

Screenshot of Developers Tools in Chrome - Elements View (left) and Styles View (right)

The first view that opens is the view that we need for this tutorial: the Elements View (left or top, depending on your settings) and the Styles View (right or bottom). You will be using these extensively once you start creating your own user styles.
I won't go into the other tools that are available, but you can have a look if you're curious.

Finding existing elements in the HTML code of a web page

To change an element's properties, we first have to know the element's name, or rather its selector. This is where the browser's Developers Tools come in handy.

Once you right click on a website's page and select the Developers Tools, you are presented with a separate window in your browser that displays the HTML code of the page as well as the CSS code. This is shown in the first screenshot above.

Screen Recording of Developers Tools in Google Chrome showing how to identify elements on a page and how to change values and add properties

In the HTML code of the page you can now identify the different selectors and change their appearance by changing their properties and values in the CSS code.
In the screen recording above you can see that when you move your mouse cursor over the lines of code, the corresponding part in the page is highlighted and even displays the element name or complete selector. This is very helpful in determining where to look for the element to change.

Defining your own properties and values and making them stick

I usually test my code in the Developers Tools first. This has two big advantages:

1. the first advantage is that you can quickly find the element you need to alter and change or add properties and values,
2. the second advantage is that you get to choose from a list of values for those properties that have so many values to choose from that it's sometimes hard to know them by heart*. Choosing from a list makes your choice a lot easier.

Some of those properties are color, vertical-align and display.

However, after I made some changes in the CSS code in the developers tools, I can't just leave it there, because the changes would be gone as soon as the page is reloaded. Therefore, when I am satisfied with my changes, I copy the new code from the developers tools and paste it into a new style sheet in Stylus.

What to copy?

In the screen recording you saw how I changed and added some values and properties of the blockquote element. This is the original code:

blockquote {
   background: #222;
   border-radius: 3px;
   display: block!important;
   font-size: 26px!important;
   line-height: 1.5em!important;
   margin: 60px 10%;
   padding: 30px 5%;
 }

I changed the value for the background property and added the properties color and text-align and their values.

You don't need to copy the entire original element into Stylus. When you copy the changed and new properties to Stylus, they overrule and add to the original style sheet of the website. Therefore, what you would add to Stylus in this case, are the element declaration with its changed and new properties:

blockquote {
   background: #fff;
   color: #000;
   text-align: center;
 }

What can you do with Stylus?

With Stylus you can change the look of a page or an entire website in your browser. You can save the changes in a user style and make the page or site look like you want. But, obviously, the changes are not saved to the site itself, only locally. It changes how a site looks to you, not to the entire world.

Once your style is complete, you can share it with the world though, either via your own website, like I do, or on userstyles.org. When other users of the site install Stylus and download your user style, they will view the site with the changes that you made.

What can you not do with Stylus?

So, with Stylus you can change and add CSS properties and values. You cannot change and add any HTML elements. This means you have to work with the elements, IDs and classes that the original designer of the website has used in the site. You can only edit their properties and add new ones.

Strictly speaking, you can actually add elements without touching the HTML code, but only so-called 'pseudo elements'. I have explained one of the uses of pseudo elements in the article 'Tutorial: how to display icons for external links using CSS only'.

I am planning to explain the use of pseudo elements in part three: what they are, how to insert them into your code and what and what not to use them for.

What would you like me to write about in one of the following episodes of this tutorial about writing your own user style?

For questions or requests, as always, please leave a comment below: