| You've heard that the plumber's house leaks right? | | | | your site look real bad all...at...the...same...time! |
| Well, let's say there was this guy I know, yeah that's | | | | So to pull our friend out of a pinch, we'll use the |
| it; not me, mind you, but this guy I know really well, | | | | document compare feature of MS Word to find out |
| we went to high school together. This guy does | | | | what's changed from when the CSS file was working |
| things that you or I would never do. Things like | | | | to when it got messed up. CSS files are straight text |
| editing live webpages onscreen rather than testing | | | | with no formatting of their own, so you would just |
| them first and then uploading the finished, working | | | | "Select All" (whether that's on-screen in your browser |
| product. | | | | or from your text editor) and paste this text into a |
| One of the most welcome developments in web | | | | new, blank MS Word doc. Name them differently, |
| editing for hypertext markup language (or HTML) has | | | | such as CSS-good and CSS-bad and save them as |
| been the move to separate content from | | | | separate files. Pick the older file, the backup copy of |
| presentation. This is valuable because the specs for | | | | the CSS before you made the changes and open it in |
| projecting to a 30' screen for a large audience are | | | | MS Word. (Backups and versioning or version control |
| different enough from the specs for presenting the | | | | are topics well-deserving of their own articles.) Under |
| same webpage on a 17" monitor, that one size just | | | | Tools - Compare and Merge Documents, when you |
| doesn't fit all. | | | | pick the Compare and Merge, you'll see a dialog box |
| Erik Meyer[1] is one of the web geniuses who has | | | | opens up for you to pick the second file (the one |
| helped the web to "grow up" in the way information | | | | you're comparing with the first, in our case, |
| (content) is rendered or presented in multiple | | | | CSS-bad); notice the little down-pointing arrow to the |
| formats. These different formats are accomplished | | | | right of the Merge button in the lower right hand |
| through collecting all the formatting codes that used | | | | corner of the file selector dialog box. Click on the |
| to be repeated throughout your website into one | | | | arrow and choose New Document to capture the |
| place, a document called a style sheet. A key reason | | | | changes between the two in this new document |
| this is valuable is because your pages will load faster. | | | | without affecting either one. |
| Delays in rendering pages (because the code is not | | | | Save this with a related file name like CSS-changes |
| 'clean' or 'efficient') are directly traceable to lost | | | | and print a hardcopy. Ignore the 'green extreme' that |
| sales.[2] | | | | says you never need to print. When you need to do |
| The Cascading Style Sheets (CSS) specification at | | | | fine-tooth-comb review such as this, you need to be |
| the World Wide Web Consortium (w3.org) has | | | | able to flip back and forth between pages, to write |
| defined lots of different ways to present web | | | | your own notes next to the file text and generally |
| content. This article is about how to recover from | | | | take your time digesting the changes, so you can |
| errors, if someone you know made a big mistake in | | | | discover where "Two roads diverged in a wood, and |
| updating a style sheet, or in other words, a CSS file. | | | | I - I took the one less traveled by, And that has |
| The power of CSS is that it can make you look really | | | | made all the difference." [3] |
| good with less work and gives you many formatting | | | | Notes: |
| capabilities that just weren't available even three or | | | | 1. Eric Meyer's Meyerweb |
| four years ago. The peril of CSS is that if you mess | | | | 2. Stoyan Stefanov, The performance business pitch |
| up your style sheet it can make all the pages on | | | | 3. |