Using element inspector to study HTML and CSS

Question: Is it possible to build a template that uses parts of the wiki's color scheme, so that it will match color of whatever wiki you use it on?

Answer: To some extent, yes, it may be possible. This page will demonstrate an approach to solving this problem that requires the following:
 * A web browser with the ability to inspect the HTML and CSS source code of the current web page. (Recommended: Google Chrome or Mozilla Firefox)
 * Some knowledge of HTML
 * Some knowledge of CSS

Example
Let's start straight out with an interesting example:

Where did that come from?
Here is a quick breakdown of the thought process behind that code and why it should work:
 * 1) Right-click on the Wiki Navigation bar at the top of the page and choose Inspect element. This will open your developer tools &mdash; specifically, the element inspector, where you can look at the HTML source code for the web page, and track down CSS styles that are affecting different HTML elements.
 * 2) For a walkthrough in the Google Chrome web browser, click through the screenshots in the slideshow below:

Exploring the CSS
One interesting block of code you saw in the screenshots above was this: .WikiHeader .accent { background-color: #006cb0; } If you know CSS, then you know that this background will affect an element that has  which is inside of another element that has.

So what if we created such an element? Well, the result should be what you saw in the example above! Here it is again:

This background matches the color of the Wiki Navigation.

Pitfalls
Great, we've now created something that uses the color from Wikia's stylesheet. But there's more. Surely you didn't think the  property would be the only thing the stylesheet sets on our element?

Right-click on our "Example" element above and Inspect element so we can see what CSS is affecting it:

Further modification
Fortunately, "inline CSS" &mdash; which are CSS rules that are inside a  attribute, overrides CSS rules from stylesheets. That allows us to do stuff like this:

This background matches the color of the Wiki Navigation. And we've overridden the normal margins and padding with some inline CSS rules.

This background matches the color of the Wiki Navigation. And we've overridden the normal margins and padding with some inline CSS rules.