Understanding CSS for user styling in a browser

I can only speak with familiarity with Firefox, as that's my main browser. I'll try to keep things general here to fulfill your 'teach me to fish' request. To that end, I'll include 2 examples, yours and another that has more real-world lessons in it. First, we'll get some tools to make user CSS creation easier.

  1. Update to the latest Firefox. Some of the recent versions have had expansions of the web site inspector tools, so you'll want those.
  2. Optional: Install the Firebug extension which gives you much more powerful site inspector tools. (personally, I don't use Firebug for making user CSS, but I include a mention here for completeness sake)
  3. Install the Stylish extension. This is a user CSS-centric extension that greatly simplifies the creation of user CSS.

Now then, to actually write something. You should have a basic familiarity with HTML and CSS before proceeding. W3Schools has decent tutorials available to familiarize yourself with the basic structure and syntax of HTML and CSS. For the sake of this answer, I'll include enough information to hopefully help a newbie along enough to get the example accomplished.

  1. Navigate to the page. (in your case, https://unix.stackexchange.com/)
  2. Right click on the element you're looking to manipulate. (pretty much anywhere on the page for this case, as the background affects the whole page)
  3. Select 'Inspect Element' from the pop-up menu. This uses Firefox's integrated inspection tools, I won't address Firebug here, but it has similar panes and features.
  4. This opens up panels on the bottom and side of the Firefox window. On the bottom, you're seeing HTML. On the right, you're seeing CSS rules for the selected page element (which will be the thing you right-clicked on). On the bottom, click around on different elements to navigate around. The page is organized into a tree of elements, and you can collapse or expand each node in the tree. As you click on elements, the selected element will be highlighted on the page itself.
  5. In general, at this point, you'll want to inspect the element you're looking to manipulate, along with its parent elements (the items that contain that element in the tree). Identify the element that you'll actually have to manipulate. For example, if you're messing with the answers on this page, you'd end up starting with the <p> element that contains the text of an answer, but you want to include all the stuff around the text, like the up/down vote arrows, the poster's information, the share/edit/flag links, etc. So you navigate up a couple of levels to the <div> tag that has an id of "answer-####" and a class of "answer", as that is the element that contains all the window-dressing elements of an answer. Click on it, and you'll see that part of the webpage get highlighted. (In this instance, the background of the page will be near the top, within the <body> tag. Scroll up to the top of the HTML, and click the <body> tag.)
  6. Next, you need to identify the CSS properties of this element that you'll want to manipulate. Look at the CSS on the right, and find the properties you want to alter. Personally, I'm pretty new to CSS, so at this point, I will often google 'css' + a property name to learn more about the property and how it behaves. Continuing my example where we're looking at a SE answer, let's say we want to alter the margins around the answer. The all.css file has a margin property set to 0px, but clearly there's a margin around these elements. Some googling teaches me to look for padding properties, as those can also affect the margins around an item. Sure enough, there are two properties related to padding that are set on an answer, padding-bottom and padding-top. (for your specific issue, you're looking for a background image, so look for 'background' in CSS properties. You'll see a 'background' property near the top. It applies to the body elements of that page. Googling "css background property" to learn how that property works, shows you that it can contain a color or an URL to an image, along with various modifiers. After navigating a bit to dig down to how the background-image property works, we see some useful information, the default value of 'none'. We want to revert the background image to its default value, so we'll need that information.)

  7. Now we use Stylish. The alternative without Stylish would be to edit the files you posted in your answer. Stylish enables us to easily manage many sites' user CSS. Stylish adds a little icon to your Firefox window, click on it then go "Write a new style"->"For "(this site).com". Give the style a Name and optionally some tags. You'll then be able to distinguish this style as being the one that applies to Superuser.com or Stackexchange.com etc. This window gives us a template that lets us alter the CSS just for this domain. If you need to alter the CSS for a specific URL, you can do that or you could also just get a blank style if you wanted to write CSS that applies to all sites, simply select the appropriate entry from the Stylish menu. For my Answer-modifying example, you'd get a text box that contains this:

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}

    Anything put into the @-moz-document block will apply only to the domain there in the parenthesis. See the bolded items above. To alter the padding for the answers, you update the text box to be like this:

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}

    To break this down for people who don't know CSS, we're first selecting the class (ergo a "." goes at the start. If we were selecting by ID, we'd put a "#" there.) answer (so 'answer'). Then we open a block with a curly brace to list out the properties of the selected item we'll be altering. First we are altering padding-bottom and setting it to 0 pixels. Then we do the same for padding-top. Each property and value is ended with a semi-colon. Then we close the block with a curly brace. (in your unix example, you would do this:

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}

    Here you're working on the unix.stackexchange.com domain. We're selecting the "body" element (when selecting HTML element is also a CSS selector, no need for #s or .s here). We're setting the background to none.)

  8. I draw your attention to the buttons at the bottom of the Stylish style-editing window. "Preview" will enact the changes you typed in, so you can see them in action. "Save" will save the changes. "Cancel" is pretty obvious. For pretty much any user CSS changing you're doing, you'll want to click Preview to see if the change worked the way you wanted it to. In both examples, you'll see that it didn't work. There's an important reason for this, which I now address.

  9. CSS has a specific hierarchy of priorities for determining how to deal with user CSS vs. author CSS vs. browser CSS. Normally, we have CSS for a page that's written by the author of the page, and that will contain rules for many of the elements on that page. When a rule isn't defined by the author, but is in your user CSS, then your browser will use that. If neither of them have CSS defined for that element, then the browser uses its own default CSS rules on that element. So there's a hierarchy of weight here, author > user > browser. If something is defined in all three, then the higher-weight CSS will win out and have its CSS take effect. There's a way to get lower-weight CSS to override the higher-weight CSS, and that's by designating them important. You do this by including "!important" in each CSS declaration, like so:

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}

    Now click Preview again, and you'll see that your user CSS works. Click Save and enjoy.

If you're using Chrome, its built-in inspector is already very good. There is also a Stylish extension. You enter the CSS modifications a bit differently: select “Manage installed styles” then click “Write new style”, enter the sites or URL patterns to apply the post to below the code box, and enter only the domain-specific CSS in the “code” box, e.g.

body {
  background:none !important;
}

You do what you would do if you were putting the following on the site:

foo.bar { background-pattern:none; }

And then add 

!important

before the }. Here's a little detail on non-user CSS use that still explains it for your use.


Install firebug to identify the relevant CSS property and then write a greasemonkey script to override it.

Tags:

Html

Css

Firefox

Google Chrome

Recent Posts