Steal This CSS! Part 2

Ed Johnson

02 Mar 2009 21:07

Read Part 1

If you looked at my CSS file in Part 1, you'll see that I don't exactly follow conventional formatting. Essentially, I took each page element's CSS block and converted into individual lines, each with a single CSS style on it. For example, a "conventional" section of CSS might look like this:

#header h1 {
    position: absolute;
    text-align: top;
    width: 360px;
    padding: 0;
    margin: 0;
    border-bottom: none;
    left: 10px;
    top: 25px;
    font-size: 1.5em;

Using MS Excel with a couple of simple macros and formulas, I split each block so that a single CSS sytle is on its own line and the result is like this:
#header h1 {    border-bottom: none; }
#header h1 {    font-size: 1.5em; }
#header h1 {    left: 10px; }
#header h1 {    margin: 0; }
#header h1 {    padding: 0; }
#header h1 {    position: absolute; }
#header h1 {    text-align: top; }
#header h1 {    top: 25px; }
#header h1 {    width: 360px; }

I then sorted the entire CSS file in order by page element to get the complete result you see in Part 1.
There are 2 things I really like about this non-conventional formatting.
  1. If you use the Web Developer or Firebug plugins with Firefox to edit CSS, it's really simple to find the block you want to change.
  2. I can quickly resort my CSS by style. Doing this, I can quickly change, for example, the color scheme of my entire site and not worry about missing any page elements.

For example, here are all of the CSS styles that have the background color that I assigned to the top navigation bar on this site:

#edit-cancel-button:hover {    background: #254b5c; }
#edit-diff-button:hover {    background: #254b5c; }
#edit-preview-button:hover {    background: #254b5c; }
#edit-save-button:hover {    background: #254b5c; }
#edit-save-continue-button:hover {    background: #254b5c; }
#ntf-cancel:hover {    background: #254b5c; }
#ntf-post:hover {    background: #254b5c; }
#ntf-preview:hover {    background: #254b5c; }
#side-bar h1 a:hover {    background: #254b5c; }
#side-bar h1:hover {    background: #254b5c; }
#side-bar h1:hover a {    background: #254b5c; }
#top-bar {    background: #254b5c; }
.page-options-bottom a:hover {    background: #254b5c; }
body {    background: #254b5c; }
input.button:hover {    background: #254b5c; }

As you can see, if you wanted to steal my CSS and edit the colors, you can do it easily by having all of the elements that share the same color grouped together. The other thing this method helps me with is in identifying colors that I may have missed editing.
Note: The reason for the gap between the "{" and the style name is that there is a tab character in between. This is also useful since you can copy this code and paste it directly into Excel and it will end up in 2 columns, rather than one. Conversely, copying the 2 columns and pasting it back into your custom CSS box in Wikidot creates the tab space. Bottom line? It's easy to go back and forth between Excel and Wikidot!

You can download the Excel file I used and try it out yourself. Let known what you think!

If you like the layout of my CSS, but want to change the color scheme, I suggest you visit one of the many sites devoted to web site color schemes and create your own scheme. Then grab my Excel file and start sorting and editing. A couple of sites I like for color schemes are ColorBlender and ColorScheme Designer.


Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License