Default Styles for CSS

Coding CSS can quickly run into difficulties with different browsers interpreting code in different ways. Designs will never look the same in every browser but you can help yourself by using a default style set when you start coding.

Estimated reading time: 4 minutes

Table of contents

Comment your code

To start with it is important that you document your code. I like Andy Budd’s approach of writing the version number and adding your email and website address before applying any rules. You can ease maintenance by noting changes, or at least saying where the log of amends is kept.

Remove default styles

Tantek Celik wrote a stylesheet to remove default styles from elements. This might suit you so have a look. Personally I find that one universal rule is enough to rebase elements. I haven’t experience any performance issues using this on many different projects.

Why do this? Browsers apply different styles to different elements. So it makes sense for me to know where I am starting from. This simple rule allows me to know that all elements will start by having no margin, padding or border.

Have classes for floating and clearing

Next I have a class for clearing, again something I learnt from Andy Budd and his excellent book. Clearing floated elements is a common task so it is well worth it. Also you will probably want to float elements left and right so I like to have these too. I use these for images quite a lot.

Set the document up

I have found that a good framework for setting up a document is to set font size and colour on the body tag. I apply any background image here to act as wallpaper. I use Richard Rutter’s approach to sizing text using ems which I really recommend for maximum control over typography.

Then I have a wrapper div to hold the content and set the width of the page. This also centres the content and applies a white background.

Create sections

Large CSS documents are diffiuclt to manage. I like to divide mine up using sections of the page or even templates. Each project will vary but I like put some sections in by default and then change it if necessary:

A matter of personal choice

Of course I am not saying this is the best way to have a default template to begin coding templates. But it works for me. I’d be interested to hear what others do so please do leave a comment if there is anything you strongly agree or disagree with.

If you’d like to download a copy of my default files you can get them here.

Tags

Recent Posts

Using HashiCorp Vault with LDAPHow to use HashiCorp Vault to setup an LDAP backed secret store with read-only access for users in groups and read-write access for specific users

Linux and Unix xargs command tutorial with examplesTutorial on using xargs, a UNIX and Linux command for building and executing command lines from standard input. Examples of cutting by character, byte position, cutting based on delimiter and how to modify the output delimiter.

Copy a file in GoHow to copy a file in Go. The ioutil package does not offer a shorthand way of copying a file. Instead the os package should be used.

About the author

George Ornbo is a hacker, futurist, blogger and Dad based in Buckinghamshire, England.