Loading
Red Website Day
Today I discovered the real benefit of cascading style sheets. Although I hadn�t forgotten it was comic relief, I hadn�t really considered if they would be doing anything about it at work. I got into work to find an email from the IT Director which just contained:See http://www.rednoseday.com/dosomething/makewebred.shtml
Now its not my place to talk about my employer on a blog but lets just say that I wouldn�t have dared changed the website in my own steam, but on this occasion that was all that I needed to pass as permission. I�ve been updating the intranet all day regarding various fundraising that the guys here are doing. That�s been fun. But what about the main website? Well in the link above, the page contains some banners and adverts that you can paste on your site, but also is a call to all webmasters to �Paint the web red� for comic relief. I�ve spent months honing the css on our site so that its used correctly, so what would I have to do to make the borders red? Well all I needed to do was change the background colour on the body of each page. That was originally a purpley colour #3F017C ( ). Because I didn�t want to loose that colour I first of all commented that out and put the red background underneath. Then I realised � hey these are cascading! I don�t have to comment out, because the next entry will overwrite the previous one. So here is the code..
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #3f017c;
background: red;
}
Suddenly all the site has a red border, because all of the pages have a white div for the content in front of the background. The top masthead is normally a sickly green, to copy the colours of our Annual Report, but this really didn�t go with the red, so I had to alter the masthead background to be pink. And there you had it, all the changes cascaded over the site.
All I have to do to clean up on Monday is remove all the lines with red or pink in them, and republish the style sheet.
I love CSS..
3-Nov-2005 Add comment
blog comments powered by Disqus Permanent Link