CSS (Cascading Style Sheets) can be a source of some nasty headaches. Especially with projects which have gone through a series of updates and/or modifications. A common thread in the majority of these sites was a CSS mess. I have waded through this CSS mud many times when revamping, modifying and updating sites over the years and it can be messy... a mixture of the old with the new, a lack of standardization, etc. Then to add to this CSS mess a follow-thru to the page layout and the supporting programming... but that's another story.
Sometimes it is just easier review some basics and start all over with a clean slate and rebuild the CSS page by page...
the Cascade (Part 1: Precedence based on where it is)
First, where is it and what takes precedence:
- inline: this is within the style attribute of the control itself and will override everything currently in place
<div id="MyDiv" style="css:style;... ></div>
- page header: within style tags in the page header, this is middle ground for placement and will override linked stylesheets
<head>
<style type="text/css">
css:style;
.
.
.
</style>
</head>
- file: a separate file that is linked into a page.
<head>
<link rel="stylesheet" href="SomeStyleSheet.css" type="text/css">
</head>
- file which is part of a theme: a separate file that is linked into a page for a specific theme implemented (in the web.config, dynamic and/or page by page).
Using inline styling, should only be used as a last resort, when this is a unique control for an entire site, such as a user control that is not to be altered. But, on the other hand, it is a good exercise for newbies learning the art.
I use the style tags in the header when developing a new page for a new project, so it is always right there in front of me. Only then, after everyone is in agreement of how the page should look, it is moved to a separate file and linked in, thus providing a standard to follow when developing other pages.
By having a stylesheet linked into all the pages of the site, it acts as a global resource where a single change can affect the entire site (if the above methods are not used). This is one of the most efficient methods of implementing style in that it reduces the amount of code written in each and every page.
When developing a stylesheet as part of a theme of which there can be multiple themes, in general, the project is slated for reuse with a twist. This twist can be for different users, departments, clients or a sales tool for their prospects, or planned promotions. In this case, it is good practice to have at least two stylesheets, a default (addressing every aspect the site can provide) and one that is for the theme applied.
the Tip: Sorting Out CSS Hell
I use Google's Chrome browser as a tool to find where the style is coming from and to find what is over-writing what. To do this right-click a control and click [inspect element]. It is very helpful when sorting out the CSS hell, many times older sites will have multiple methods implemented (inline, header and/or linked), linking several stylesheets and even using different ways to get the same effect on a control on different pages.
It's also handy to see how others got a control to have certain effect that you may be after. When inspecting the element there is a link to the stylesheet(s) which can be opened within another tab in the browser, many times it is not compressed and easy to read (it is a lot easier that sifting through your browser's temporary cache).
- the Bonus Tip: if the style sheet is compressed, save it, let't say to the desktop, open it up in M$ Visual Studio, [right-click] on the tag, id or class of interest and select [build style] then click [save], this will format that tag, id, or class that is easy to read based on your preferences or the default which is easy to read.
the WebPepper team