| Starting out in your web design? Wishing to use | | | | perspective... a structure... something for you to work |
| CSS? You can. | | | | on later. |
| But first - before you begin anything - there is one | | | | Master Style Sheet |
| thing you must do: don't start with CSS. Confused? | | | | What is the Master Style Sheet? This should be the |
| We'll explain. | | | | first style sheet you call all your documents onto. |
| Although it may be tempting to jump straight into | | | | Through this style sheet you should be able to clear |
| your website by creating the design, unless you | | | | out the default browser settings that can cause later |
| know what is going to go on your website, this is a | | | | problems in cross-browser design and begin afresh.. |
| mistake. In fact it will be nearly impossible for you to | | | | Once you have cleared out the styles with your |
| do, so put CSS to the side for the moment and | | | | master style sheet, your design can start from the |
| consider another route: Content. | | | | same place in all your browsers, giving you a clear |
| Yes content. Layout and everything else can come | | | | canvas to play and paint on. |
| later. What's important is working through the | | | | Now... once your content and basic HTML have been |
| content of your webpage as it is here where your | | | | set up, work your way down from the start of the |
| initial impressions for your web design will begin to | | | | page and place in your CSS styles. We know it may |
| appear. | | | | feel tempting to work more globally before focusing |
| So forget layout and how many divisions you plan to | | | | on the little details, but that can complicate the CSS |
| place onto your website; ignore graphic design, and | | | | process. |
| consider for a moment what the purpose of your | | | | By working down the HTML document gradually, the |
| website is? What is your ultimate goal by creating | | | | movement - acting as a cascade -will actually work |
| this site? Once you know and are confident on how | | | | to limit the complications of CSS at a later stage. |
| you want to tackle it, go to your computer and | | | | Another important aspect to bear in mind is the CSS |
| write the content straight onto the page. | | | | itself and how you write it. The more complicated it |
| As you do this, view the page as though you are | | | | is, the harder it will be to maintain later and can result |
| writing a HTML for IE 1.0. This includes putting your | | | | in styles not working to the level you expected. |
| navigation into a list, your headlines with H1, H2 and | | | | Instead:o Avoid complex selectors (defines the exact |
| H3 tags, and your content inside paragraphs. | | | | elements to apply the style to) - alternatively use |
| Sounds simple? It is. And if you plan to have | | | | simple tags and ID selectors when possible to simplify |
| subsections on your website, this is easily resolved | | | | the designo Ask yourself this question - does the |
| by separating them with DIV tags. All that matters at | | | | page need it? For example don't add a class for |
| this stage is that you place the basic content onto | | | | 'bolder' or 'italic' unless this will play an integral part to |
| your webpage. The rest will come. | | | | the representation of your pageo HTML - unless it is |
| Yes we know what you are thinking - your page | | | | absolutely necessary avoid changing. The biggest |
| looks boring... plain... dull. Your doubting what you have | | | | mistake is adding extra div tags to your website. The |
| done. | | | | only exception to this rule is your 'container' element |
| Let me reassure you that this is just the first stage | | | | used for column layouts and graphic designs. |
| of the process. There is much more to do before it | | | | Lastly create a library of styles to keep consistency |
| is finished, and we promise once you have created a | | | | of your page constant. This includes the basic |
| new CSS web page, you will actually have achieved it | | | | elements of centre, float left, underline and no |
| in half the usual time frame. | | | | underline. |
| You see the reason we do this way, is that some | | | | It is even possible to create a standard style sheet |
| designers make the mistake of trying to build up the | | | | that you can load directly onto all your pages, so that |
| layout of their web design without content. This is | | | | when you use the class of float right, you can be |
| possible, but without content, elements such as width | | | | confident that the element will appear aligned to the |
| and height may look misleading and are guaranteed | | | | right when the style is applied. |
| to alter once the content is introduced. Until it is | | | | And that is it. With these simple tools at your side |
| there, you can never be sure of the accuracy of | | | | you can easily create a new webpage or web design, |
| your layout. | | | | and expand upon your website at a later stage. |
| Even if it is rough, content will give your page | | | | All you need to do is plan and the rest...easy. |