How to Incorporate CSS Into Your Web Design


Starting out in your web design? Wishing to use CSS? You can.

But first – before you begin anything – there is one thing you must do: do not start with CSS. Confused? We'll explain.

Although it may be tempting to jump straight into your website by creating the design, unless you know what is going to go on your website, this is a mistake. In fact it will be nearly impossible for you to do, so put CSS to the side for the moment and consider another route: Content.

Yes content. Layout and everything else can come later. What's important is working through the content of your webpage as it is here where your initial impressions for your web design will begin to appear.

So forget layout and how many divisions you plan to place onto your website; ignore graphic design, and consider for a moment what the purpose of your website is? What is your ultimate goal by creating this site? Once you know and are confident on how you want to tackle it, go to your computer and write the content straight onto the page.

As you do this, view the page as though you are writing a HTML for IE 1.0. This includes putting your navigation into a list, your headlines with H1, H2 and H3 tags, and your content inside paragraphs.

Sounds simple? It is. And if you plan to have subsections on your website, this is easily resolved by separating them with DIV tags. All that matters at this stage is that you place the basic content onto your webpage. The rest will come.

Yes we know what you are thinking – your page looks boring … plain … dull. Your doubting what you have done.

Let me reassure you that this is just the first stage of the process. There is much more to do before it is finished, and we promise once you have created a new CSS web page, you will actually have achieved it in half the usual time frame.

You see the reason we do this way, is that some designers make the mistake of trying to build up the layout of their web design without content. This is possible, but without content, elements such as width and height may look misleading and are guaranteed to alter once the content is introduced. Until it is there, you can never be sure of the accuracy of your layout.

Even if it is rough, content will give your page perspective … a structure … something for you to work on later.

Master Style Sheet

What is the Master Style Sheet? This should be the first style sheet you call all your documents onto. Through this style sheet you should be able to clear out the default browser settings that can cause later problems in cross-browser design and begin afresh ..

Once you have cleared out the styles with your master style sheet, your design can start from the same place in all your browsers, giving you a clear canvas to play and paint on.

Now … once your content and basic HTML have been set up, work your way down from the start of the page and place in your CSS styles. We know it may feel tempting to work more globally before focusing on the little details, but that can complicate the CSS process.

By working down the HTML document gradually, the movement – acting as a cascade -will actually work to limit the complications of CSS at a later stage.

Another important aspect to bear in mind is the CSS itself and how you write it. The more complicated it is, the harder it will be to maintain later and can result in styles not working to the level you expected. Instead:

o Avoid complex selectors (defines the exact elements to apply the style to) – alternatively use simple tags and ID selectors when possible to simplify the design
o Ask yourself this question – does the page need it? For example do not add a class for 'bolder' or 'italic' unless this will play an integral part to the representation of your page
o HTML – unless it is absolutely necessary avoid changing. The biggest mistake is adding extra div tags to your website. The only exception to this rule is your 'container' element used for column layouts and graphic designs.

Lastly create a library of styles to keep consistency of your page constant. This includes the basic elements of centre, float left, underline and no underline.

It is even possible to create a standard style sheet that you can load directly onto all your pages, so that when you use the class of float right, you can be confident that the element will appear aligned to the right when the style is applied.

And that is it. With these simple tools at your side you can easily create a new webpage or web design, and expand upon your website at a later stage.

All you need to do is plan and the rest … easy.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.