Normalizing Your CSS for Total Control of Your Styles
NOTE: This is a bit of a mental health warning for web design beginners and could save you some time and some unnecessary wrinkles when you’re starting to code your own web pages.
When I first began coding websites using HTML and CSS, I remember running into endless problems with the way my CSS styles would render in web browsers.
Countless hours were wasted while I tried to get to the bottom of why my header was 40 pixels wider than I wanted it to be, or why I always got that annoying dashed line around my links when I clicked on them. Grrrr!
Admittedly, I had no idea what I was doing back then and I was going through the extremely painful process of teaching myself web design whilst actually running a web design business.
Back in the Day
It was 2006 and I was still convinced that IE6 was the best browser available because ‘everybody was using it’ and, despite being told I was wasting my time, I persisted with trying to make square shapes fit into circular holes by coding websites using modern (at the time) CSS techniques with a rotting corpse of a browser.
Nowadays, we have the advantage of the excellent Google Chrome browser, along with other good, quick and reliable browsers such as Firefox, Safari and Opera. All of which have excellent CSS support including some support for HTML 5 tags and CSS3.
Even Internet Explorer is starting to catch up with the release of IE10 which supports things such as CSS3 Gradients and Positioned Floats! Woo, welcome to the party!
So anyway, it’s a lot easier these days to make your styles look how you want them to look in any web browser.
However, what you may not already know is that most, if not ALL web browsers come pre-packaged with default styles built in. That’s right, without you even lifting a finger, web browsers will apply default styles to your web pages and the kick in the teeth for us web designers is that they’re not all the same!
With these pre-defined styles already in place, I found that I was creating elements on my web pages that were inheriting default styles and therefore, were not as I’d intended. This is what I found the most difficult and the most annoying thing when I first started building websites.
So, determined not to suffer some sort of breakdown, I figured out that if I could find a way to reset all of these styles so that I could start from scratch each time I built a new web page, it would make thing s a lot easier. This way I could apply my own styles and they would behave consistently across each browser.
I developed a stylesheet which I would always use as a starting point for any new project and it served me very well indeed.
Years later, I realised that it had been done before and it had been done a lot better at that!
Now, there are numerous ‘CSS Normalizer’ stylesheets that will do the exact job I’ve described. They can really help if you’re struggling to figure out why you’re CSS styles aren’t being consistently rendered in certain browsers.
This is the one that I have found the most helpful. necolas.github.com/normalize.css – It is pretty comprehensive and includes support for HTML 5 tags
Don’t forget you can edit/add to the stylesheet to personalise it and help you get rid of those built-in styles that really annoy you. Yay!