Company ProfileServicesClientsContact UsHome
website designing company in India, web page designing in India, Indian website designing, NT and Linux hosting in India USA, website promotion india, search engine submission india etc

What is Cascading Style Sheets (CSS)



What is Cascading Style Sheets (CSS)

Do you ever wonder why professional Web sites often have a look that you just can't duplicate, or how they include items that you can't create in HTML? Perhaps you already have a Web site and want to update its tired look, but the thought of updating dozens (or hundreds) of individual pages makes you want to cry. Or maybe you've wished you could simplify your code by combining several typesetting attributes into a single HTML tag or even create new tags.

Allow us to introduce you to Cascading Style Sheets (CSS). CSS lets you perform all of the above tasks and more. Style sheets are simple enough to build by hand, so you don't need expensive software to create them. People were initially hesitant to use style sheets because of uneven browser compliance, but now they're compatible with every Web server and Web browser released within the past two or three years on all the major platforms. And they give you the utmost control over your entire site.

More Than Markup

HTML was designed to create a structure for information presentation, not specifically to control its appearance. Yes, it does a good enough job placing pictures, making certain words bigger or smaller, and grouping text and graphics into columns and tables, but consider what HTML tags don't do. For example, <H1> doesn't designate a specific font family, a specific point size, or a specific amount of white space above or below the text; it just tells the browser to make Header 1 text bigger and bolder than normal body text. Most HTML tags work the same way: page structure, not typesetting.

Though HTML has since evolved to accommodate some typographical control, it remains cumbersome for certain tasks such as applying a particular type style to multiple parts of a page. For example, if you use a WYSIWYG authoring tool such as Dreamweaver or Microsoft FrontPage and you want the text in a "normal" paragraph to have a blue, smaller-than-normal Verdana font, select the paragraph with your mouse, and click each command from the HTML editor's toolbar. If you use Notepad, you'd add the following long tag after the tag:

<font face="Verdana, sans-serif" color="#003399" size="2">

This is simple enough for a single block of text, but it can be incredibly cumbersome to repeat the process for every paragraph in the document for a consistent look, and then do it for every file in your Web site.

Not only does this approach take forever and involve a lot of mouse clicking or copying and pasting, there are still some typographical elements you can't change this way, such as the spacing between lines.

Cascading Style Sheets solve these problems by letting you specify typographical information just once for each tag and letting you alter attributes that HTML alone cannot.

The Basics

The first step to using a style sheet is to add a few lines to the section of your HTML file. There are only a few basic rules to follow. First, the style sheet needs to lie between the two tags, <style type="text/css"> and </style>. Next, each individual style gets its own line between these two tags. Each basic style starts with the HTML tag (called the selector) but without brackets, then a curly brace, then a space, and then each new layout attribute separated by a semicolon, all wrapped up with a closing curly brace. When you put it together, the bit of CSS that makes the text in a normal paragraph use a small, blue Verdana font would look like this:

<head>
<style type="text/css">
p { font-family: Verdana, sans-serif; font-size: 12px; color:#003399}
</style>
</head>

Although the CSS code doesn't look that different from the modified HTML tag, there is one huge difference: You have to add it in only one place in the HTML file. This makes the HTML code cleaner and more compact, and if you want to change how normal text appears throughout the document, you have to change only one line!

Cascading a Style

Why are they called Cascading Style Sheets? Styles inherit the properties of other previously defined styles, so properties "cascade down" the file as entered. For example, you could replace the p selector above with body, and then every bit of text—a normal paragraph, a heading, or the contents of a list or table—would be in the small, blue Verdana font. All those tags would inherit the properties of the body style.

If you'd rather specify individual tags, you can combine them in the style sheet instead. For example, you could replace the p selector in the above code with P, H1, H2, H3, H4, H5, H6, OL, UL. Then the font information would apply to normal paragraphs, all headings, and all lists, but nothing else.

Even after you use a selector in a style, you can still use the same selector to alter other properties or even override properties set in prior lines. For example, you could add an H1 { color: #0000FF } line after the line mentioned in the previous paragraph, and the new color property would override the older color property of the first line. But the other properties involving font family and size would remain.

External Style Sheets

Embedding a style sheet within an HTML file is a great way to save time when you want to change a page's look and feel, but you can also write style sheets as standalone text files that are referenced by every page in your site. Then, when you want to make site-wide changes, you'll need to edit only that single file.

The first step to using an external CSS file is to add a single line of code to every HTML file. The code needs to be within the <HEAD> section, and it looks like this:

<link rel="stylesheet" href="style.css" type="text/css">

Here, style.css is the external CSS filename. If the CSS file isn't in the same directory as the HTML file linking to it, the entire URL should be listed as href="http://www.pcmag.com/style.css".

The second step is to create the actual text file; you can create the file in Notepad, but you must save it with a .css extension. Though most people name such files Style.css, this is not a requirement. The file itself is very simple in structure, with just one style per line, as follows:

p { font-family: Verdana, sans-serif;
font-size: 12px; font-style: normal;
line-height: normal}
h2 { font-family: Verdana, sans-serif;
font-size: 24px; font-style: normal;
color: #0080FF}

Common Special Effects

CSS lets you create special effects that you typically can't with HTML alone. Do your numbered or bulleted lists look a little ordinary, for example? If so, there's a set of styles that use the OL and UL (ordered lists and unordered lists) selectors, which can change numbers to, well, other numbers (Roman numerals or letters, capital or lowercase), and standard round bullets to squares, outlined circles, or even GIF graphical images.

The entire collection of replacement list elements is online (check out www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style), but let's look at making graphical bullets. First, create a GIF file that's about 10 by 10 pixels, and give it a transparent background if the image isn't perfectly square. Next, add the following style to your style sheet: ul { list-style-image: url("graphic.gif") } where "graphic.gif" is the filename of your image file. If the image isn't in the same folder as the HTML file on the server, specify the entire URL as url (http://www.pcmag.com/images/bullet.gif). Figure 1 shows this simple example and the results.

Making Your Own Tags: Classes

At some point, you may wonder whether using styles restricts you to using the same effects again and again. This is not the case. You can use a style sheet to assign properties to an ordinary word—one that isn't based on an HTML tag, as a selector is. This assignment is called a class. Once you've defined a class, you can refer to it with nearly any HTML tag, and the class' properties will cascade into the tag.

For example, suppose you have a document that uses that small blue Verdana font throughout (as we set up in the section "The Basics"), but every so often you want to use a red Courier font instead. One way to do this would be to add a class definition to your style sheet, which would look something like .alt_text { font-family: courier; color: red}.

This line defines a new class named alt_text. The leading dot defines the line as a class.

Using the new class is extremely simple; you just add the name of the class to the HTML tag you wish to affect. If you wanted just one normal paragraph (tagged with ) to appear in red Courier, add the following tag to that paragraph: <p class="alt_text">. Like other styles, only those properties altered by the class will replace any previously defined style's property. In this case, the class would overwrite the color and font family previously defined in the style sheet, but not the size.

Cascading Style Sheets introduced—literally—a whole new dimension to Web pages: the third dimension, or Z-index. When a class is combined with a little-used HTML tag, <DIV>, styles can position blocks of text and graphics at pixel-specific locations and layer above or below other items on a Web page. <DIV> (and its mate, </DIV>) is typically used to section off an area of a Web page, originally to center, left-justify, or right-justify entire sections of text, tables, graphics, and other HTML elements. But you can use the tag without its alignment property to bracket the elements you want to layer.

Figure 2 shows two lines of large red text floating over a lot of smaller blue text. In the accompanying code listing, you can see that we've created a class named .floating for the layer. In our example, there are several font-related properties, but the ones relating to layers are Position, Left, Top, and Z-index. Top and Left refer to the layer's position from either the top and left edge of the browser window or from the position of the <DIV> tag in HTML. The distinction is made with the Position property of Static, Absolute, Fixed, or Relative. In our example, the floating block of text is positioned 10 pixels down and to the right of the browser's top-left corner. And finally, the Z-index property stacks the material; the higher the Z-index value, the higher the material is on the stack in the Web browser. We then use the <DIV> tag to section off the content—the two floating lines—we want to place in a layer and attach our floating class to it.

By now, you've seen that Cascading Style Sheets can add a lot to your Web pages, both in terms of effects and in making your life easier. The one problem with using CSS is that its syntax and many of its properties are completely different from what you may know from HTML. As a result, CSS mastery requires some research. Although there are several comprehensive books on using CSS, the defining body of CSS is the World Wide Web Consortium. The W3C lists the official specification for CSS online. Check out http://www.w3.org/Style/CSS/ for the complete CSS reference index, as well as tutorials, special-effects examples, and links to CSS-writing programs.

Figure 1

CSS lets you dress up ordinary content with special effects, such as using GIF image files for bullets.

<html>
<head>
<title>Document's title</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
ul { list-style-image: url("happy_bullet.gif") }
</style></head>
<body>
<ol>
<li> first item.
<li> second item.
<li> third item.
</ol>
<br>
<ul>
<li> first item.
<li> second item.
<li> third item.
</ul>
</html>

Figure 2

You can position text or graphics above or below other items on your page.

<HTML>
<head>
<style type="text/css">
body { font-family: Verdana,
sans-serif; font-size: 12px;
color:#003399}
.floating { font-size:
xx-large; color: red;
font-weight: bold; position:
absolute; left: 10px; top:
10px; z-index: 2}
</style>
</head>
<body>
<div class="floating">
<br>Floating Line 1
<br>Floating Line 2
</div>
<p>
PART ONE: Crashing the System
On January 15, 1990, AT&T's
long-distance telephone switching
system crashed. This was a strange,
dire, huge event......</p>
</body>
</HTML>

 


About the Author

Copyright © 2004 Ziff Davis Media Inc. All Rights Reserved. Originally appearing in PC Magazine.

 


Web Designing
Ecommerce Design
Cascading Style Sheets (CSS)
Web Development
Webmaster Resources

More Guides & Articles..

Website Designing
Web Hosting
Web Marketing
Website Maintenance
Domain Name Registration

Website Designing
Submit Article

 

 

 

Home | Profile | Service | Clients | Contact

Webmaster Resources:
Web Designing | Web Hosting | Web Marketing | Website Maintenance | Domain Registration

Copyright © 1996-2013 Cyberindian.com. All rights reserved.