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