One important aspect of good design is to give your site a theme and coherence. A great deal of this can be done using a stylesheet. Using stylesheets is not difficult. In fact it makes
task of designing a website that much easier. However many new designers don't use them.
But before dispelling some of
confusion, let us look at
advantages of using CSS - cascading style sheets.
ADVANTAGES
1) You can use an external stylesheet to control
look and appearance of your whole website, such as
font size, style, and color,
background image,
background color, etc... by changing a single file. You don't need to edit every page.
2) Linking to a stylesheet reduces
size of your web pages and gives you much cleaner HTML code because you don't need to specify
font, color, or "style" of every element on your page.
3) Web pages are displayed differently on different browsers and platforms. For example a 10pt font looks fine on a PC but becomes too small on a Mac. You can use a browser-detection script in
header of your pages which will link to a different stylesheet depending on which browser is being used.
The rest of this article assumes you have a basic understanding of HTML tags,
code behind your web pages. If not you can get our simple HTML tutorial at - http://www.thewebseye.com/HTML.htm.
Now using stylesheets is actually easier than HTML. The main cause of confusion is that you can either link your web pages to an external stylesheet, or you can include
style sheet in
header of individual web pages inside STYLE tags. Web design software does not always make this clear unless you read
HELP pages in detail. Forget your web design software for a moment, because it is easier to understand stylesheets if you take a look under
surface.
An external style sheet can be as simple and powerful as this:
BODY { background-image: url(images/mybackground.gif); background-color: #FFFFFF; }
P { FONT-FAMILY: Verdana, Helvetica, sans-serif; FONT-SIZE: 12pt; COLOR: navy }
You copy and paste
above in Notepad, Wordpad or other text or HTML editor, and save it as "mystyle.css". Put this stylesheet in
same directory as your HTML files. Note
".css" extension is important. Then you link your web pages to this stylesheet by putting
following code in
HEAD area of your pages.