Cascading Style Sheets
by Amrit HallanByteswoth.com
Tuesday, 2nd August 2005
A few sections back, I had mentioned somewhere that some of the older HTML tags have been deprecated. This means the newer browsers refuse to recognize them. If you use these tags, the new browsers can mutilate your design in retaliation.
These tags have been deprecated to accommodate more devises that are vying to give net access to their users, for instance, WAP devices, televisions, etc.
One of the deprecated tags is, <FONT> </FONT>. We no longer use it. Another one I can remember is, <CENTER> </CENTER>. Both of them generate protests by advanced HTML editors.
So to render effects that were provided by such tags in the past, we have to use Cascading Style Sheets (CSS). A popular usage of Cascading Style Sheets is to give a consistent design look to a web site. Once you've designed certain styles, you can apply them on any part of your web site with just one tag. For example, supposing you have developed hundreds of pages using a particular CSS definition for a particular section, and all of a sudden you want to change the look of that section, you just have to redefine your CSS, and lo!, your entire web site gets upgraded.
A typical CSS definition is:
<STYLE type="text/css">
A {TEXT-DECORATION: none}
A:hover {TEXT-DECORATION: underline}
P {font: 10 pt Arial;
color: black;
line-height: 12 pt;
align: left}
</STYLE>
This definition appears in the <HEAD> </HEAD> section of the page where it is being applied.
For instance, in our First HTML page, this style would appear like this:
<HTML>
<HEAD>
<TITLE>This is my first, hand-coded HTML page</TITLE>
<STYLE type="text/css">
A {TEXT-DECORATION: none}
A:hover {TEXT-DECORATION: underline}
P {font: 10 pt Arial;
color: black;
line-height: 12 pt;
align: left}
</STYLE>
</HEAD>
<BODY>
You must be familiar with <A> </A> and <P> </P> tags. When we were investigating <A> </A>, we saw that the text that appears as a link in your browser is blue, and underlined.
But, if now we type
<P>For more cool content, go to <A HREF="http://www.bytesworth.com">Bytesworth.com</A>.</P>
The attribute A {TEXT-DECORATION: none} makes sure that you don't see that underline under "Bytesworth.com", and A:hover {TEXT-DECORATION: underline} makes the underline appear when you hover the cursor over this text.
If you want to define a paragraph-heading, do it like this:
<STYLE type="text/css">
H1 {14 pt Verdana;
color: maroon;
text-decoration: underline;
font-weight: bold}
</STYLE>
So now if you type:
<H1>Our monthly output</H1>
A CSS can be defined on the page itself, or as an external file. It is preferred that you define a Cascading Style Sheet as an external file if the definitions are lengthy and you are going to apply them on more than 10 pages so that you just have to mention the name of the CSS file in the <HEAD> </HEAD> section of every page.
To define an external CSS file, open a new file in your text editor, and type
P {
font-size : 10 pt;
font-family : Arial;
line-height : 12 pt;
}
A {
font-size : 10 pt;
font-family : Arial;
font-weight : bold;
color : Maroon;
text-decoration : none;
}
A:hover {
font-size : 10 pt;
font-family : Arial;
font-weight : bold;
color : Red;
text-decoration : underline;
}
Save the file as "mystyle.css". Remember to give a css extension.
Then within <HEAD> </HEAD> of the HTML page where you want the CSS to be applied, type this:
<LINK REL = STYLESHEET Type = "text/css" HREF = "mystyle.css">
Supply the complete path if the css file resides in some other folder. Save the HTML page and Refresh it.
This covers the basic concept behind Cascading Style Sheets.
There is a dilemma though. What if you want to have different CSS styles for the same tag for different sections? We'll ponder over it in the next section. And we'll cover some more formatting issues.
Options:
Printer Friendly
Email Friend
Amrit Hallan is a freelance web designer. For all web site development and web promotion needs, you can get in touch with him at amrit@bytesworth.com . For further details, visit http://www.bytesworth.com You can subscribe to his newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks by sending a blank email at bytesworth-subscribe@topica.com.
