Web Design Tutorial 5

   
       

What is CSS Design
and Why is it important?

A short tour through
Cascading Style Sheets

by MELODY REED

The big picture

CASCADING STYLE SHEETS DESIGN is the new, powerful, easier way to lay out web sites.

Traditionally, to set up how a web page would look (type size, font, color, position, etc.), you had to code your text and graphics with insanely repetitive tags at every point: a clumsy, laborious task. What's worse, if you later wanted to alter the look of the page - even slightly - you had to change the tag at every repetition. For example, if you wanted to increase the text size in 18 paragraphs by half a point, you had to make that change on every page of the website - 100, 200 pages? Now, with CSS, you have to do it once.

And it gets even better. CSS enables you to design pages with a subtlety and professionalism not even possible before. It also speeds their downloading time and works better with search engines. For these reasons and more, there is no doubt that HTML design will gradually fade out in the future and be replaced by CSS design.

The reason CSS works so well is that it separates most of the design instructions (the Style Sheets) from the content of the document (the text and graphics). By placing the design instructions in an external style sheet, we accomplish several things. First, the HTML pages are freed of the clutter that would slow their downloading time. Second, the job of search engines is optimized because it is not confused by extraneous typographic and styling information.

Below is an example of what the old-style HTML code looks like with the embedded font information. Notice that every paragraph has to repeatedly declare the style information - even if it's identical.

< p>
< font size="2" face="Verdana">
This is the first paragraph.
< /font>
< /p>
< p>
< font size="2" face="Verdana">
This is the second paragraph.
< /font>
< /p>

This type of coding in a complicated page �weighs� a lot and takes a long time to download. Now see what happens when the appearance references are taken out of the web page and placed in an external CSS which is just �linked� to the website. The page is cleaner and loads considerably faster:

<p>
This is the first paragraph.
< /p>
< p>
This is the second paragraph.
< /p>

We've reduced ten lines to six - a 40 percent reduction. The savings are even greater in web pages of any complexity. And this is only the beginning. As implied above, a big reason for using style sheets is the convenience of being able to alter an enormous web site with one small change in the style document, rather than laboring over the hundred or thousand references of an embedded style definition in every paragraph and page of the site.

Here is a small example of what the syntax of an external style sheet looks like. Note that the description of the paragraph is made only once. Just as easily it can be changed and applied to the entire web site;

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

 

 

There is no doubt

that HTML design will

gradually fade out

in the future and be

replaced by CSS design.

 

Additional control possibilities

CSS also gives you new typographical control that wasn't possible in old style HTML. Actual points and pixels can be used for font sizes (rather than the annoying relative sizing of 1 to 7, with all the strange -1, +2 indicators in HTML). Also, we can for the first time control the leading (vertical spacing) between lines of text, and design pages that are more readable and look more professional. Other elements of finesse are the spacing between words and letters (tracking), specific alignment of text, complete control of borders, colors, and background images.

But the coolest thing about CSS is that it enables positioning - with absolute accuracy. Positioning text and images on a Web page with HTML is very tedious (think table tags, invisible spacer GIFs, browser and platform variations) and - as you know if you've tried it - not very accurate or reliable. If you're ready to step up to an elegant platform that offers ease, reliability, accuracy and flexibility (after a small learning curve) - CSS is the ticket!

Go to this amazing on-line demo.

If you'd like to see an example of the power of a web page styled completely with CSS, demonstrating startling flexibility and user interaction and choice, visit CSS Zen Garden at http://www.csszengarden.com/. Explore the page by clicking any of the eight links on the navigation bar. The content of the page remains the same, but the design changes completely, on the fly. You have linked to a different style sheet, as easily as you might have linked to another web page.

If you open any page you will see that they all have the same text; only the styles have been changed. (Once you have selected a style, you can proceed to explore the site. At the bottom of each page are links, including one marked CSS that will open to the equivalent code. Explore it. Look at the code - very clean, no typographic statements and no table cells!

I call your attention to this site not just to astound you, but to demonstrate something you could do in the websites you design - namely, provide alternative styles, among which your viewers can choose, depending on their taste and needs. For example, a sight-impaired person could choose a larger font.

So there are two new things you must learn. First, the new way of marking up your document with CSS indicators so that the Style Sheets can recognize where to apply the specified style directions. Second, the external CSS directions, which specify what the style directions are. This body of knowledge is not difficult, but it is large. We'll get into the details next time, but here's a start

There are several ways you could code your document. The easiest way is to divide the different sections of your document up into divisions <DIV>s). Each <DIV> is unambiguously identified by its function (its class or id) on the web page, such as head, navbar, link, footer, etc. I'll explain this further in the next lesson.

Below, see how straightforward the HTML code is. This is the content text with HTML code:

<body>
< div class="head">Content for "head" goes here.</div>
< div class="navbar">
< p>link 1</p>
< p>ink 2</p>
< p>link 3</p>
< p>link 4</p>
< /div>
< div class="main">main content-
< p> Admit impediments; love is not love or bends with the remover to remove. Within his bending sickle's compass come; which alters when it alteration finds, it is the star to every wand'ring bark .</p>
< p>Whose worth's unknown, although [etc. . . . ] his height be taken.</p>
< /div>
< div id=" link ">Content for id "footer" Goes Here</div>
< /body>

And here is the external style sheet:

div.head {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
text-align: center;
border-bottom-width: thick;
border-bottom-style: dotted;
border-bottom-color: #0066CC;
padding-bottom: 5px;
margin-right: 0%;
margin-left: 0%;
padding-top: 15px;
margin-bottom: 15px;
}
div.navbar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #97F6FF;
width: 100px;
height: 250px;
text-align: center;
float: left;
margin-right: 25px;
padding-top: 10px;
}
div.main {
font-family: "Trebuchet MS";
font-size: 14px;
line-height: 18px;
left: 150px;
}
div#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin-top: 600px;

}

Actual points and

pixels can be used for font

sizes (rather than the

annoying relative sizing of

1 to 7, with all the strange

-1, +2 indicators in HTML).

 

 

Also, we can for the first

time control the leading

(vertical spacing) between

lines of text, and design

pages that are more

readable and look more

professional.

 

Hang in there; you’re doing fine.

I know: just glancing at the above can make your eyes glaze over. To understand it - a rewarding experience - takes a little effort. Very little. Just compare each part of the HTML code (above) with the corresponding style sheet definition (below).

Follow me. The first division class (div class) is the head, which is given here as "Content for "head" goes here." Now look down to the Style Sheet to see what is to be done with the head. Here it is under "div.head }" - thirteen lines of code that clearly tell the web page everything it needs to know about the head - font family, size, weight, background color, etc.

Now go back up to the HTML code. The next div class is identified as the navbar. And down below, in the style sheet, we find the navbar description under div.navbar } And so on, to the end

My hope here has been to give you an overview of CSS, and why it is so useful. In the next tutorial I'll give you a step-by-step demonstration of the particulars, this time using Dreamweaver, which will eliminate a lot of the hand coding. Nevertheless, it's important to understand hand coding because it will give you a deeper understanding of what happens behind the scenes. Dreamweaver gives you the option to look at the code and the WYSIWYG design view simultaneously, and change whichever is convenient at that time. In Dreamweaver you'll find that you can go intuitively between the design view and the code view, whichever is convenient. You'll find Dreamweaver is a great timesaver.

See you next time.

 

Please catch my show, Melody's Media Mix, on the second Tuesday of the month at 7pm on Channel 34 or 107 (Manhattan Network Neighborhood). I interview artists who use technology in their art and get them to reveal their secret techniques. If you do not live in Manhattan or don't have cable, you can see a live broadcast at mnn.org at 7pm, or see a trailer at my website http://www.melodysmediamix.com or http://www.ryze.com/go/melodysmediamix. Email me at [email protected] and tell me what you'd like to hear about - or if you'd like to be a guest on the show.

 

TOP

 

To understand it -

a rewarding experience -

takes a little effort.

Very little. Just compare

each part of the HTML

code (above) with the

corresponding style sheet

definition (below).