Beginner's Guide to CSS

CSS is an essential component in website design. Understanding how to harness the power of CSS will add a professional touch to your web pages.

Part one of my Beginner's Guide to CSS, in issue 1197, introduces the language itself and its syntax. In part two I construct a classic two column web page layout to demonstrate some of CSS's most useful features and capabilities.

All the code examples from part 1 and 2 are available in this github code repository.

Here are a couple of extracts:

Using CSS for page presentation provides many advantages. A single style declaration can be used by multiple web pages. A change to this declaration will be instantly applied to all those pages - a boon for experimentation, and a great time saver. Styles can be defined in hierarchies, which improves clarity and reduces the lines of code required. Replacing elements such as HTML tables with CSS can improve page loading performance. And the resulting simplified, uncluttered HTML code will help improve your Google and other search engine page ranking.

These are class selectors rather than IDs, so they can be applied to multiple elements if required. Both define a width in terms of a percentage instead of with a fixed number. It's the percentage of the parent element's width, in this case 'page-container'. As the width of the parent element changes, so the width of these columns will change proportionally. Note they don't quite add up to 100% by design, as it provides a little wiggle room for some extra touches.

Download the free Micro Mart iPad/iPhone app and purchase this issue for only £1.49.