[Note: this article was published prematurely... it has recently changed.]

With the “recent” redesign of CBC.ca a lot of work has gone into making the site XHTML compliant. The good news is that sections like the homepage and news stories can have their “look and feel” adjusted using cascading style sheets. This is not limited to simple font changes, but hiding content you don’t want to see, or repositioning elements of the site to suit your browsing style.

My CBC.ca
I’m not a graphic designer or HTML wiz, but I spent about an hour today hacking up a CSS file that would change the way I see the homepage and news stories. This is what I came up with:

Click for Larger

Feel free to download and apply this css to your browser.

Getting it to work in your browser
Applying your custom style sheet is easy in either firefox or Internet Explorer:

Firefox:
You can install the Style Sheet Chooser to allow you to specify your own custom style sheet for each site.

Internet Explorer:
You can specify a style sheet to use for all websites. So, the your customized CBC stylesheet might conflict with your other favorite sites. Click on Tools, Internet Options. Click on the “Accessibility” button and specify your style sheet.

How It Works
Think of CSS as a filter that you can apply to text. Your web browser downloads the HTML content then applies the style sheet to make it look the way it is defined in the CSS file. Elements of the site (which are contained in things called div tags) act as containers to hold your text. This is how you can “hide” large chunks of the site by telling your browser to not display that div tag.

Using your own CSS file will not save any bandwidth or reduce site load times. You are still downloading all of the page assets (javascript, images, HTML) regardless if your CSS file tells your browser to display it or not.

How CBC.ca Uses CSS
We use CSS to display a “print friendly” version of the site to your printer. This allows us to only keep one HTML file and not have to generate multiple HTML files of the same content for different outputs (print, mobile, email, etc..).

When you click on the “print” link in a news article, your browser applys the print CSS styles to the HTML and tells your printer to print based on that. You can preview what this looks like by using the “print preview” option in your browser. You will notice that all the navigation and mastheads are gone.

What can you come up with?
I’m curious to see what kind of things you can do with customizing the the site CSS. Feel free to post a link to your customized CSS for others to try in the comments section.

You can design a page with specific accessibility need in mind (for the visually impaired perhaps) or add additional content to the “print friendly” version of the news pages.

	Email This Post
	CBC.ca web site, Under the Hood