How to incorporate CSS into your web design
This article covers how important is CSS to your web design and how easily it is to incorporate.
Normal
0
false
false
false
MicrosoftInternetExplorer4
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
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: don’t 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:
- 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 - Ask yourself this question ?
does the page need it? For example don’t add a class for ?bolder’ or
?italic’ unless this will play an integral part to the representation of
your page - 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.
About the author
Tags: content layout, graphic design, h2, h3, headlines, initial impressions, mistake, mso, orphan, paragraphs, style definitions, style name, times new roman, web design