Learning about elements

[Neil E.]

OK, so Im trying to figure out some stuff without relying on Jake "for everything". Right now I'd like to know how to make use of the browser functions "view source" and "inspect element". I'm hoping these can be used like a "navigation/colour chart". My image is for the search button. I want to learn how to find where the corresponding style properties are located. If my image is hard to read, can you provide a similar example for something that doesn't have it's own styling properties. Can any of this assist in finding something that does have styling properties?

EXTRA.css sure is handy, but finding stuff in the first place is tedious. What does css.php.4691 mean? How do you know which way things cascade? Why is some stuff "struck-through"?

 

[Arty]

Click "rules" tab, it will show you rules that are applied to that item. First rule is

#QuickSearch input.button.primary {
    float: left;
    width: 110px;
}

Go to admin control panel -> styles, click "Search templates" link on left side. In "template contains" enter "#QuickSearch input.button.primary" and click search button. XF will show you search_bar.css