Dave Woods - Freelance Web Design Warwickshire

Category Archives: CSS

CSS Margin Collapse

Margin and padding are extremely important when it comes to CSS designs but margins collapsing between elements positioned vertically to each other can often cause some confusion.

However, within this tutorial, I’ll quickly explain how it works and how to use collapsing margins effectively.

Continue reading

CSS Reset

There’s plenty of different reset methods already available and I’ve been using Eric Meyer’s method for some time now but have started to realize that in most projects, I only use a fraction of the styles specified and much more often find myself rewriting a whole different set of styles that I use in all my projects.

Therefore, I’ve decided that it’s going to be more worthwhile using Meyer’s CSS as a starting point but putting together my own starter template which I can use for all my projects which I’d like to give you an insight into.

Continue reading

CSS Font Shorthand

CSS Stylesheets can sometime became large and unmanageable especially on large projects so it’s important to use shorthand wherever possible to keep your CSS simple, easy to understand and to keep the file size down to a minimal.

This quick tip will demonstrate how CSS shorthand for fonts can be applied to limit the amount of rules required when styling fonts.

Continue reading

CSS Navigation Menu – Basics

CSS menu’s can be very simple but can also cause confusion when combining block and inline elements. This tutorial will hopefully clear up any confusion and demonstrate the best way to structure your navigation in its simplest form.

This demonstration isn’t complicated but I’ve decided to write an article about it as it is very easy to nest elements incorrectly which may lead to invalid code so I thought it might be a good time to put this one to bed and create a simple CSS menu which anyone can use to build and expand upon.

Continue reading

CSS Fixed Footer

Sometimes it’s the simple things that can be the most infuriating when it comes to dealing with CSS. Positioning a footer to stay at the bottom of the browser window unless the content is larger, sounds like it should be fairly simple, but is in fact quite an advanced technique when it comes to CSS.

However, the following tutorial will explain in a few simple steps, how this can be achieved very easily.

Continue reading

CSS Faux Columns

CSS layouts are extremely flexible but trying to replicate a layout that was easy with tables sometimes causes a few problems. The method of different columns being filled with solid colour and appearing the same height isn’t so easy with CSS but this is where CSS Faux Columns can become extremely useful.

Continue reading