[WIP/DO NOT POST] ◆ 202's New CSS Guide

Stylus is a browser extension that allows you to overlay additional personal CSS styles onto each page you visit, and to toggle those styles on or off at will. It features an in-browser popup editor with versatile features such as editor themes, color pickers, autocomplete, error detection, and most importantly, instantaneous live updates. After hitting "Save" on your writing, every subsequent change you make will affect the page accordingly.

This kind of instant bit-by-bit feedback is crucial for ease of learning, and much better than writing everything out at once and having it all break for some yet-unknown reason, trying to comb through your essay of a code to diagnose your issue. It may look scary at first, but I implore starters to at least have a taste of Stylus before moving on to writing their first layout!

Once Stylus is installed, you can click on the "{S}" logo in your browser toolbar to summon a small box. From here you can manage any styles of yours that are active on this site. Create a new style for Wolvden simply by clicking on the "wolvden.com" part of the URL written under "Write style for:"

A new window or tab will appear, containing the CSS editor and your controls:

The diagram above should point out the essentials of your interface. (Click on this image to see it bigger!) If you can, split the windows of your computer screen so that you can see both your Wolvden profile and your editor side-by-side.

Proceed to write to your heart's content. The editor conveniently auto-generates brackets for you and highlights critical errors such as misspellings or misplaced punctuation – features which are very helpful for cutting down on revision time. And as you write, be sure to hit Save at least once to see the instant feedback start taking place; this allows for your target page (in this case, your Wolvden profile) to start instantly reflecting your CSS changes as you type, hence why it is best to have both your editor and your profile page visible at once.

Stylus also lets you save these styles to your browser itself, so that you can pick up your coding projects again another day. However, I advise caution about relying on this feature; if you ever clean up your browser data or storage, this includes extension data, and Stylus's styles are part of that extension data to be wiped. To be extra safe I would advise backing up your CSS projects locally on your computer in plain text files in case your browser data is compromised.

Write this code into your Stylus window:

This is a simple block with a single instruction that gives its chosen element a thick red border. Hit Save and watch what part of your page adopts that red border; the example above should affect the page's top navigation bar.

You can go down the provided list and swap out selectors one by one, and as you do, keep note of what parts of the page are being affected. This way, you can visualize for yourself what such names actually represent, if the written descriptions are not as helpful for you.

I use this trick often in my own coding to check if I spelled the selector name right, or to locate a hard-to-find element. This is also useful for if you're selecting multiple elements at once and want to verify the collection of elements you're targeting.

Inspect is a handy built-in tool most modern browsers let you access in just two clicks: right-click anywhere on a web page, and a small context menu should show up right next to where you right-clicked. The context menu should include a link labeled "Inspect" or "Inspect Element". Click on it, and your browser viewport will split between your current page and the Inspect panel.

A lot of information and code appears at once. It looks scary, but let's slow down and examine...

... the Elements tab. This section consists of the HTML "skeleton" of the entire page you are viewing. Notice that a particular line of this code is highlighted, this is the HTML of the element you right-clicked on.

The Inspect panel offers a quick and easy way of grabbing the selector name of whichever element you have selected. Simply right-click your desired element's code, and navigate through the context menus as shown in the above image.

In the above example, I selected the large header of my Welcome Back page, and when I paste the copied name into my Notepad, this is what it looks like. The selector names provided by Inspect are precise and often detailed, using child selectors to target the exact instance of the element you picked. You don't have to adhere strictly to what Inspect gives you; you can pare down the given selector name for something less intricate to reduce some confusion. As an example, here's what applying this trick to the sidebar chatbox header gives me:

This is pretty detailed, even for me. In this case, I would choose to omit child selectors entirely and keep only the first and last element names, like so:

Of course, it is good to test your selector names (see the popup section before this one!) to be sure of their validity. I tested both the above names out and they achieved virtually the same effect. If you find that editing the provided selector name does not work out, you should stick with the provided name.