Deprecated: Function ereg() is deprecated in /home3/vvaswani/db-mysql.php on line 174

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 60
The Melonfire Community - Trog
Logo         Community
  Trog


Copyright notice:

This article is copyright Melonfire,
Strict Standards: mktime(): You should be using the time() function instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 119
2018. All rights reserved.

All source code, brand names, trademarks and other content contained herein is proprietary to Melonfire,
Strict Standards: mktime(): You should be using the time() function instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 121
2018. All rights reserved.

Source code within this article is provided with NO WARRANTY WHATSOEVER. It is meant for illustrative purposes only, and is NOT recommended for use in production environments.

Copyright infringement is a violation of law.

Printed from http://www.melonfire.com/community/columns/trog/article.php?id=23



Understanding Style Sheets (part 1)
Learn how to create and use style sheets across your Web site


Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 150

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 152

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 167

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 168

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 170
Olive Green Walls

If you're a Web developer, you've probably heard people speaking of CSS, or Cascading Style Sheets, in glowing terms...you may even have spoken of it yourself. By allowing developers to separate graphical elements from program code, CSS makes it possible to simply and rapidly adjust the look of a Web site, or make changes to the overall colour scheme and formatting of a Web page.

With a little thinking, it's possible to design a site in such a manner that the entire colour scheme of the site can be quickly changed from olive green to slate grey and back again with just a few simple alterations to a single file.

Sounds fantastic? It is...and over the next few pages, this primer will attempt to teach you the basics of CSS - a few simple concepts, a look at style rules and definitions, and an explanation of the important properties you need to know to fully utilize the power of this technology.

Read on!


Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 150

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 152

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 167

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 168

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 170
Into The Light

Let's start off with a simple example. Consider this HTML page:


<HTML>
<HEAD>
</HEAD>

<BODY>

Q. How many <B>developers</B> does it take to change a <B>light bulb</B>?
<P>
A. The light bulb works <B>fine</B> on the <B>system in my office...</B>

</BODY>
</HTML>


As you can see, certain words in the text above have been emphasized in bold. Now, let's suppose that you also wanted to change the text colour of these emphasized words...to green, maybe? Normally, you'd do something like this:


<HTML>
<HEAD>
</HEAD>

<BODY>

Q. How many <B><FONT COLOR="Lime">developers</FONT></B> does it take to change a <B><FONT COLOR="Lime">light bulb</FONT></B>?
<P>
A. The light bulb works <B><FONT COLOR="Lime">fine</FONT></B> on the <B><FONT COLOR="Lime">system in my office...</FONT></B>

</BODY>
</HTML>


Imagine, then, how much simpler it would be if you could just use a style sheet.


<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: lime}
</STYLE>

</HEAD>

<BODY>

Q. How many <B>developers</B> does it take to change a <B>light bulb</B>?
<P>
A. The light bulb works <B>fine</B> on the <B>system in my office...</B>

</BODY>
</HTML>


The two examples will look identical when you view them in a browser - however, the second one has the distinct advantage of being much easier to read. Take it one step further - if you suddenly wake up in the middle of the night with visions of the colour #CC6633 dancing in your mind, the second example allows you to change the colour of all emphasized words in one fell swoop. Take a look.


<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: #CC6633}
</STYLE>

</HEAD>

<BODY>

Q. How many <B>developers</B> does it take to change a <B>light bulb</B>?
<P>
A. The light bulb works <B>fine</B> on the <B>system in my office...</B>

</BODY>
</HTML>


Thus, by separating design from code, style sheets can substantially reduce the amount of time you spend making changes to your site...which, when you come to think about it, is exactly the way it should be.


Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 150

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 152

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 167

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 168

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 170
Ground Rules

Now that you've seen the power of style sheets in action, let's get down and dirty with some basic concepts. In the example above, the line


B {color: lime}


is known as a "style rule", which consists of two basic elements - a "selector" and a "declaration".

A "selector" is usually an HTML tag [B, in this case],while the "declaration" is one or more CSS name-value pairs that indicate the type of formatting to be applied to the selector. This declaration is always enclosed in curly braces, and different name-value pairs are separated from each other by semi-colons. For example,


B {color: lime; text-decoration: underline; font-family: Arial}


is a perfectly valid style rule

The CSS specification lays down definitions for more than sixty keywords, and you're going to learn all the important ones during the course of this tutorial.

Selectors can also be grouped together, as in the following example, which turns all H1, H2, and H3 text white:


H1 H2 H3 {color: white} /* this rule turns H1, H2 and H3 blocks white */


Note that you can also include comments within your style block, as demonstrated above.

The most common method of including a set of style rules in an HTML document is via the <STYLE> tag. The <STYLE> tag usually appears within the <HEAD> of your HTML document, and looks something like this:


<HEAD>

<STYLE TYPE="text/css">
...style rules go here...
</STYLE>

</HEAD>


If you take a look at the examples above, you'll see that this is the method used. Style rules defined in such a manner will apply to the current document only...which creates a problem if you'd like to apply styles across a series of Web pages. Not to worry...a solution is at hand!


Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 150

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 152

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 167

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 168

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 170
Write Once, Link Often

One of the most ingenious aspects of CSS technology - and one of the primary reasons I like using it so much - is that it allows developers to define a single "global" style sheet and apply the rules in that sheet to all the HTML documents on a Web site.

The obvious advantage here, of course, is that if you need to make a simple change, you need only edit a single file, and the change will be reflected in all the HTML documents linked to that style sheet. I've found this to be a life-saver on numerous occasions, the most memorable one being a Saturday night date I was running late for...

I'm digressing again. Sorry about that.

Back to the matter at hand. Let's suppose that you have a global style sheet called "global.css" located on your server at "http://www.somewhere.com/global.css";. To link the style rules in that document to a specific HTML document, simply include this code within the <HEAD> of your HTML document, like this,


<HEAD>
<LINK REL="stylesheet" HREF="http://www.somewhere.com/global.css"; TYPE="text/css">
</HEAD>


and all the style definitions from "global.css" will be automatically applied to your HTML file.

You could also "import" a style sheet with the @import keyword, as in the following example:


<STYLE TYPE="text/css">
@import url(http://www.somewhere.com/global.css);
P {color: yellow}
</STYLE>  


You can also apply styles on a case-by-case basis, by adding the STYLE attribute to the HTML code itself. For example:


<HTML>
<HEAD>
</HEAD>

<BODY>

Q. How many <B STYLE="color: lime; background-color: black">developers</B> does it take to change a <B STYLE="color: lime; background-color: black">light bulb</B>?
<P>
A. The light bulb works <B STYLE="color: lime; background-color: black">fine</B> on the <B STYLE="color: lime; background-color: black">system in my office...</B>

</BODY>
</HTML>


See?


Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 150

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 152

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 167

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 168

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 170
More Pseudo-Gibberish

Next on the basic concept list: inheritance, classes, pseudo-classes and contextual selectors. Let's take them one by one.

* Inheritance: Inheritance basically means that HTML elements which lack a specific style rule will inherit the style rules of the elements they are enclosed within. For example, consider this snippet of code:


<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: red}
</STYLE>

</HEAD>

<BODY>

<B>
Q.  How many <FONT SIZE="+1">psychiatrists</FONT> does it take to change a lightbulb?
<P>
A.  Only one, but the lighbulb has to want to change.
</B>
</BODY>
</HTML>


In this case, the <B> tag has a color defined in the style sheet, while the <FONT> tag doesn't have any style rule defined for it. Since the <FONT> tag is enclosed within the <B> tags, it inherits the style rule defined for the <B> tag - in this case, the colour red.

* Classes: CSS also allows you to group elements together in "classes" and apply a style rule to that class. For example,


<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {color: red}
.answer {color: blue}
</STYLE>

</HEAD>

<BODY>

<P CLASS="question">
Q.  How many psychiatrists does it take to change a lightbulb?
<P CLASS="answer">
A.  Only one, but the lighbulb has to <FONT CLASS="question">want</FONT> to change.

</BODY>
</HTML>


In this case, we've defined two classes, "question" and "answer", with appropriate style rules for each (note the manner of their definition within the <STYLE> tags, and the period prefix). Next, we've invoked the appropriate style rules by adding the CLASS attribute to the HTML tags within the body of the document.

All the text within tags which are marked as part of the class named "question" will appear in red, while all the text within the "answer" class will appear in blue.

Thus, CSS gives you a simple and elegant way to group otherwise unrelated tags together, and apply a common style rule to them

* Pseudo-classes: Unlike what the name suggests, these are actually pre-defined classes for certain HTML tags. The most well-known of these are the pseudo-classes defined for the anchor element A - it comes with the following pre-defined classes:

A:link - refers to all hyperlinks within the document A:visited - refers to all visited hyperlinks within the document A:active - refers to the last hyperlink selected within the document A:hover - refers to the hyperlink your mouse pointer is currently hovering over

By using these pseudo-classes, it's possible to change the default colour of active, visited and unvisited hyperlinks within the document.

* Contextual selectors: Contextual selectors are a lot like conditional statements - the style declarations that follow them are invoked only when certain conditions are met. For example, suppose you'd like all bold italic text in your document to appear in blue Arial. Your contextual selector would look like this:


<HEAD>
<STYLE TYPE="text/css">
B I {color: blue; font-family: Arial} /* this selector is for all bold+italic text */
</STYLE>
</HEAD>


Go on, try it yourself. Do I look like I'm lying?


Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 150

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 152

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 167

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 168

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 170
The Colour Of My Eyes

Now that all the theory's out of the way, how about actually getting down with some of the basic CSS properties available?

First on the list is the "color" property. As you've seen in the examples above, this property controls the foreground colour of an HTML element, and comes in very handy when you need to change the colour of different blocks of text. The example below turns all italicized text blue.


<HEAD>
<STYLE TYPE="text/css">
I {color: blue)
</STYLE>
</HEAD>


CSS offers a number of different ways to specify the colour value here. The simplest is to use one of the sixteen pre-defined colour names available - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. You can also specify a hexadecimal colour combination by prefixing it with a #


I {color: #0000FF)


or a combination of RGB values in absolute or percentage terms, like this:


I {color: rgb (0, 0, 255))

I {color: rgb (0%, 0%, 100%))


Following close on the heels of "color" comes "background-color", which controls the background colour of an HTML element.


<HTML>
<HEAD>
<STYLE TYPE="text/css">
.blue {color: cyan; background-color: #FF8000}
.green {color: lime; background-color: black}
</STYLE>

</HEAD>

<BODY>

<P CLASS="blue">
Oooh...you have beautiful eyes!
<P CLASS="green">
I know. But you aren't too bad yourself. 

</BODY>
</HTML>


Keep looking at that combination, and you'll make some eye surgeon very, very rich!


Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 150

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 152

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 167

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 168

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 170


Deprecated: Function eregi_replace() is deprecated in /home3/vvaswani/sql.php on line 301

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 150

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 152

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 167

Deprecated: Function ereg_replace() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 168

Deprecated: Function split() is deprecated in /home3/vvaswani/public_html/community/columns/trog/print.php on line 170


Copyright notice:

This article is copyright Melonfire,
Strict Standards: mktime(): You should be using the time() function instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 193
2018. All rights reserved.

All source code, brand names, trademarks and other content contained herein and proprietary to Melonfire,
Strict Standards: mktime(): You should be using the time() function instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 195
2018. All rights reserved.

Source code within this article is provided with NO WARRANTY WHATSOEVER. It is meant for illustrative purposes only, and is NOT recommended for use in production environments.

Copyright infringement is a violation of law.

Printed from http://www.melonfire.com/community/columns/trog/article.php?id=23



Copyright © 1998-
Strict Standards: mktime(): You should be using the time() function instead in /home3/vvaswani/public_html/community/columns/trog/print.php on line 211
2018 Melonfire. All rights reserved
Terms and Conditions | Feedback