Cascading Style Sheet

You've probably heard me harping on how important it is to use styles in Word. Well, the same song and dance is true in many professional software programs...particularly a web editing program, such as Dreamweaver. And just like with Word, you'll find that you can get away with not using styles for those quick and dirty documents or web sites. But you'll discover...the hard way...that when the time comes to get serious and create a professional document in Word, you'll be you didn't previously apply proper styles to your document. The same is oh so true with a web site.

Applying direct formatting through the use of or other HTML tags is fine when you just want to toss out a few web pages for friends. But when you're ready to play with the big dogs, you'll end up spending a lot of time reformatting your site to remove all those direct tags and reapplying proper style tags. That is, if you plan to have your site look like a consistent, professional site.

In fact, in Dreamweaver (DW) MX 2004, it's nearly impossible to apply direct formatting without DW creating a style for you. In the text below, I've directly applied formatting by setting the following attributes:

* an Arial font
* size medium
* a blue color
* bold
* italic
* indent

(Note that I've had to display my sample style content in this article as images due to the fact that TechTrax has it's own style sheet...and I dare not mess with it to show my samples!)

Now if I were to apply all that formatting directly with various font tags, the code would probably look like this:

Code:

<blockquote>
    <font face="arial", color="blue", size="medium"><b><i>This Is My Section Title</i></b></font>
</blockquote>

But now with newer versions of web designer software, that understand the importance of using CSS (Cascading Style Sheets...the web development name for a style specification page), DW has only applied a generic style name to the actual text. However, in the header area of the page code, it has defined my style attributes for this particular style, as you can see below.

This CSS definition is up in the header area of the code:

Code:

<style type="text/css">
    <!--
    .style1 {
    font-family: Arial, Helvetica, sans-serif;
    color: #0033FF;
    font-weight: bold;
    font-style: italic;
    font-size: medium;
    }
    -->
    </style>


And this is all that is applied to the actual text:

Code:

  <blockquote>
    <p class="style1">This Is My Section Title </p>
    </blockquote>

Use of proper style formatting becomes even more critical should you want to move your web pages forward to enable them to work with other technologies, such as ASP or, particularly, XML. But even if you only decide that you want to change the font style of your site, you'll save yourself tons of time by applying styles. That is, because you will only have to change the style font and not go through tons of web site pages locating and modifying the word "Arial" to something else.

As you can see in the style code above, if I wanted to change the font throughout my site from Arial to Veranda, I need only change the name within that style. If I'd applied throughout my site text, I would have to do a global search and hope that that did the trick! Fortunately, DW's code search/replace feature is a godsend and does a great job.

Although DW will do the work and create the embedded CSS definitions for you, it's much better to create your own custom styles and stick with those so you're not as tempted to create dozens of formats. A sure sign of an amateur web site is one that has tons of different formatting applied all over the site. A professional site has only a few styles and sticks with those consistently throughout the site.

Let's look at how you can create a few custom styles for your web site.

Javascript

You can add a script anywhere inside the head or body sections of your document. However, to keep your document well structured there are some basic guidelines:

* Most scripts can go inside the document head. This keeps them out of the way of the main document content.
* If your script needs to run at a certain stage during page layout (for example, if it uses document.write to create content), it should be put at the correct stage of the document, almost always somewhere inside the document body. If the script is very small, then put it all where it will be used. If it is larger, then put it inside the head inside a function, and you can then call that function when you need it.
* If your script is used on more than one page, or if it is of any significant size, then put it in its own file, and load it in the document head. Not only will this help to keep the clutter of the document, but it will also help avoid potential syntax problems (I will cover these later). As an extra benefit, these can be used by multiple pages, allowing browsers to use their cache, and saving bandwidth for you and your visitors.

Adding a script to the page

To insert Javascript into a web page, use the tag. You should use the type attribute to specify the type of script being used, which in the case of Javascript is text/javascript. It is also possible to the language attribute to say what Javascript version you are using. In practice, this number means very little to browsers. They may claim to support a specific version, but will have vastly different capabilities. All Javascript supporting browsers currently in use will support a level of Javascript equivalent to Javascript 1.2 (represented as "javascript1.2") or higher, so this is what I will teach you in this tutorial.

Browsers will generally choose an arbitrary version number that they will claim to support, and will run any script that has either no language version number, or a version equal to or lower than the one they claim to support. Since the language is so unreliable, you should generally omit this attribute, although it is common to see scripts using it. Your script can then detect if the browser is capable of running your script, and it can do this a lot more accurately than the version number can.

This is an example of a script tag, used to include a script in your page:

Code:

<script type="text/javascript">
//Javascript goes here
</script>

If your script is incapable of providing its own fallback, but it is needed to access the page, you should include support for non-Javascript browsers by using:

Code:

<noscript>
  <p>This will not be displayed if Javascript is enabled</p>
</noscript>

Using comments

Comments allow you to leave notes to yourself and other people in your script, and are useful as a reminder of what the script is doing and why. The double slash indicates a single line comment. Everything after it on the same line will be ignored by the script engine. The slash-asterisk indicates a block comment. Everything after it will be ignored by the script engine until an asterisk-slash is encountered.

Code:


<script type="text/javascript">

//This is a single line comment

/* This is a
block comment */

</script>

Using external script files

You can also use a separate header file to contain the Javascript (usually *.js) making it easy to share across pages:

Code:

<script src="whatever.js" type="text/javascript"></script>

When using header files, if you put any script code in between the and tags, it will only be executed if the browser does not support header files (assuming it does support the version of Javascript shown in the language attribute, if you used one). In reality, this is only for very old browsers that are not used at all any more, so there is no need for anything to be put there.

scripts in header files are executed as if they were in the main page. If the script referances any external files, such as images, the addresses it uses are relative to the main page, not the script URI.
Commenting out your scripts

This is not needed any more. All current browsers are aware of script tags, and how to treat their contents, since they have been part of HTML since HTML 3. Browsers that do not understand HTML 3 or scripts (these are virtually never used now) will display the script as if it was the content of the page. You can hide the script from them by commenting out your script with standard HTML comments. Browsers that understand script will simply ignore these comments, and will just interpret the script within them. The opening comment is ignored as if it were a normal single line Javascript comment. The closing comment will not, so it needs to have a Javascript comment put before it:

Code:


<script type="text/javascript">
<!--

//Javascript goes here

//-->
</script>


These HTML comments should not be used if you are using an external script file, and are not to be used anywhere else in your scripts.
Dealing with XHTML

Note that when I talk about XHTML, I am talking about pages that are served using a content type of application/xhtml+xml - the majority of pages that use XHTML markup are actually served as text/html and as a result are correctly treated as HTML, not XHTML.

The rules in XHTML are different. script tags are not treated as being special. Their contents are treated as any other part of XHTML, so various operators can be misinterpreted as part of the markup. To avoid this, it is best to put all scripts in external script files so that they do not interfere with the page itself. If you feel the need to put something directly on the page, you can declare it as CDATA (the default for script contents in normal HTML):



//Javascript goes here

]]>


If you feel the compulsion to comment out your script in XHTML, you must use a more ugly structure to contain your scripts. Again, this really is not needed, since browsers that do not understand script also do not understand XHTML, but in case you want to use it (maybe you are serving it as XHTML to some browsers, and HTML to others), this is what to use:

Code:


<script type="text/javascript">
<!--//--><![CDATA[//><!--

//Javascript goes here

//--><!]]>
</script>

Controlling when the script is activated

By default, any script you write will be processed as the document loads. For example:

Code:

<script type="text/javascript">
var myVariable = 'Hello';
window.alert(myVariable);
//as the document loads, a message box saying 'Hello' will be displayed
</script>

Sometimes, this may be undesirable and it may be better to write functions (see the section on Writing functions) and activate them later.

To activate Javascript, you can use HTML events. Modern browsers can detect a vast number of events on most elements. Older browsers are more limited and can only detect the standard set of events on specific elements. The ones that will work in all browsers I have tested are:

input, textarea, select
onclick, onkeydown, onkeyup, onkeypress, onchange, onfocus, onblur, etc.
form
onsubmit, onreset
a
onclick, onmouseover, onmouseout, onfocus, onblur
body
onload, onunload

Check with the HTML specifications on the W3C site for more details. 'a' elements can also detect onmousemove in all current browsers (but not some of the older browsers that are not used any more. For some of these older browsers, such as Netscape 4, it is possible to compensate using a combination of onmouseover, onmouseout and then document.captureEvents and onmousemove on the body (see the section on Event information). The Event information and more advanced DOM events chapters of this tutorial show how to listen for more event types, and obtain information from them.

These are some examples of using events (shown here using traditional inline event handlers - later on in this tutorial, I will show you alternative ways to attach events to elements that will not require you to alter your HTML):




')">

Another way of making HTML activate Javascript is to use but in general it is best to use events, so the link can provide an accessible alternative if Javascript is not available (the event handler can prevent the browser from using the link normally if scripting is available).

In all these cases, the script is contained within HTML attributes, and is subject to the normal rules of HTML entities. If you need to put quotes in the script in between the quotes in the html, use the HTML entity " or " for " style quotes or if your quotes in the HTML are done using the ' quotes (which is unusual ...), you can use ' to represent these in the script. If you need to include < or > operators, you should use the < and > entities.


credits. private blogspot. :)

2 Re: Creating Css and Js ! Tue Dec 29, 2009 10:13 pm

jatmin

Moderating Team

Number of posts : 233
Age : 29
Location : NCR
Job/hobbies : FSAS Moderator
WARNING LEVEL :

CONTRIBUTION POINTS :

Registration date : 2009-09-23
Reputation : 3
Points : 317

thanks kheem. i need these for my project:))

3 Re: Creating Css and Js ! Tue Dec 29, 2009 11:15 pm

NICHOLE

Guest

Number of posts : 15
Age : 33
WARNING LEVEL :

CONTRIBUTION POINTS :

Registration date : 2009-12-27
Reputation : 0
Points : 21

mahina talaga utak ko sa js.. (

4 Re: Creating Css and Js ! Fri Jan 01, 2010 11:58 am

danilodeleon

Administrative Team

Number of posts : 491
Age : 32
Location : manila
Job/hobbies : ...layout designing lolz
Humor : fixing the data:))
WARNING LEVEL :

CONTRIBUTION POINTS :

Registration date : 2008-11-17
Reputation : 2
Points : 335

for more info about javascripting, just visit on online sites for tutorials it will really help
you
like


jskit.com :)

5 Re: Creating Css and Js ! Fri Jan 01, 2010 5:09 pm

NICHOLE

Guest

Number of posts : 15
Age : 33
WARNING LEVEL :

CONTRIBUTION POINTS :

Registration date : 2009-12-27
Reputation : 0
Points : 21

ahwp.. thnx danz.. :)

6 Re: Creating Css and Js !

Sponsored content

    Message [Page 1 of 1]