|
||||
What
is CSS Design 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.
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:
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;
|
There is no doubtthat HTML design willgradually fade outin the future and bereplaced 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:
And here is the external style sheet:
|
Actual points andpixels can be used for fontsizes (rather than theannoying relative sizing of1 to 7, with all the strange-1, +2 indicators in HTML).
Also, we can for the firsttime control the leading(vertical spacing) betweenlines of text, and designpages that are morereadable and look moreprofessional. |
|||
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.
|
To understand it -a rewarding experience -takes a little effort.Very little. Just compareeach part of the HTMLcode (above) with thecorresponding style sheetdefinition (below). |