Subscribe:

Ads 468x60px

dropdown

Social Icons

JavaScript Tutorials:- My first JavaScript


A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a web page.
You can place the <script> tag containing your JavaScript anywhere within you web page but it is preferred way to keep it within the <head> tags.
The <script> tag alert the browser program to begin interpreting all the text between these tags as a script. So simple syntax of your JavaScript will be as follows

<script ...>
  JavaScript code
</script>

The script tag takes two important attributes:

·         language: This attribute specifies what scripting language you are using. Typically, its value will be javascript
·         type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript".

So your JavaScript segment will look like:


<script language="javascript" type="text/javascript">
  JavaScript code
</script>


My first java script:

Let us write our class example to print out "Hello World".

<html>
<body>
<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>
</body>
</html>

We added an optional HTML comment that surrounds our Javascript code. This is to save our code from a browser that does not support Javascript. The comment ends with a "//-->". Here "//" signifies a comment in Javascript, so we add that to prevent a browser from reading the end of the HTML comment in as a piece of Javascript code.
Next, we call a function document.write which writes a string into our HTML document. This function can be used to write text, HTML, or both. So above code will display following result:

Hello World!

JavaScript Tutorials: What are Development tools



One of JavaScript's strengths is that expensive development tools are not usually required. You can start with a simple text editor such as Notepad.
Since it is an interpreted language inside the context of a web browser, you don't even need to buy a compiler.
To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Few of them are listed here:
·         Microsoft FrontPage: Microsoft has developed a popular HTML editor called FrontPage. FrontPage also provides web developers with a number of JavaScript tools to assist in the creation of an interactive web site.
·         Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very popular HTML and JavaScript editor in the professional web development crowd. It provides several handy prebuilt JavaScript components, integrates well with databases, and conforms to new standards such as XHTML and XML.
·         Macromedia HomeSite 5: This provided a well-liked HTML and JavaScript editor, which will manage their personal web site just fine.


Java Script Tutorials: Pros and Cons of Using JavaScript



The merits of using JavaScript are:
·         Less server interaction: You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
·         Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something.
·         Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.

·         Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.


The Demerit of using JavaScript are:

We can not treat JavaScript as a full fledged programming language. It lacks the following important features:
·         Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
·         JavaScript can not be used for Networking applications because there is no such support available.
·         JavaScript doesn't have any multithreading or multiprocess capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages.

Java Script tutorials: What is Client-side JavaScript


Client-side JavaScript is the most common form of the language. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need no longer be static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism features many advantages over traditional CGI server-side scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid they would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user explicitly or implicitly initiates.

Java Script Tutorials: What is Java Script


JavaScript started life as LiveScript, but Netscape changed the name, possibly because of the excitement being generated by Java.to JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a name LiveScript.
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages.
The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers

JavaScript is:


  • JavaScript is a lightweight, interpreted programming language
  • Designed for creating network-centric applications
  • Complementary to and integrated with Java
  • Complementary to and integrated with HTML
  • Open and cross-platform

GREAT HTML TABLES - FOR BLOGGER, WORDPRESS, JOOMLA, PROJECTS.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 1: Simple Table


Demo:


Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.

One column:

100

One row and three columns:

100 200 300

Two rows and three columns:

100 200 300
400 500 600





--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 2: Tables Without Borders


Demo:


This table has no borders:

100 200 300
400 500 600

And this table has no borders:

100 200 300
400 500 600



CODE: Get its code


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 3: Table Header


Demo:


Table headers:

Name Telephone Telephone
Bill Gates 555 77 854 555 77 855

Vertical headers:

First Name: Bill Gates
Telephone: 555 77 854
Telephone: 555 77 855



CODE: Get its code


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 4: Table with a Caption


Demo:



Monthly savings
Month Savings
January $100
February $50







--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 5: Table cells than span more than one row/column 


Demo:


Cell that spans two columns:

Telephone
Name
Bill Gates
555 77 854
555 77 855

Cell that spans two rows:

Telephone:
First Name: Bill Gates

555 77 854
555 77 855







--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 6: Tags inside a table


Demo:



This is a paragraph
This is another paragraph
This cell contains a table:
A B
C D
This cell contains a list
  • apples
  • bananas
  • pineapples
HELLO







--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 7: Cell padding (controls white space between text and borders)


Demo:


Without cell padding:

First Row
Second Row

With cell padding:

First Row
Second Row







--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 8: Cell spacing (controls space between cells)


Demo:


Without cellspacing:

First Row
Second Row

With cellspacing="0":

First Row
Second Row

With cellspacing="10":

First Row
Second Row






--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------



CSS: CSS List - Learn CSS for Free and Fun ......

CSS List

With the help of CSS list properties; you can set an image as the list-item marker and place the list-item marker.

With CSS you can prepare your list item
You can add properties like
 image
 style

Tag:ol {list-style-type: decimal;}

The CSS list property allocates you to set an image as the list-item marker and place the list-item marker. You can easily add properties like image and style.

Example:

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc;}
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ul.none {list-style-type: none;}
</style>
</head>
<body>
<ul class="disc">
     <li>Sun</li>
     <li>Moon</li>
     <li>Stars</li>
</ul>
<ul class="circle">
     <li>Sun</li>
     <li>Moon</li>
     <li>Stars</li>
</ul>
 <ul class="square">
       <li>Sun</li>
       <li>Moon</li>
       <li>Stars</li>
</ul>
<ul class="none">
      <li>Sun</li>
      <li>Moon</li>
      <li>Stars</li>
</ul>
</body>
</html>



CSS: CSS Outline - Learn CSS for Free and Fun



With CSS we can draw a line bounding your element. We can add properties like

 color
 style
 width

Remember this option does not work with internet explorer.

Tag: outline: green dotted thick;

The CSS outline is used to make an element “stand out’. It is a line that is drawn around the
outside the border edge. Additional properties like color, style and width can be added.

Example:

<html>
<head>
<style type="text/css">
p {
border: red solid thin;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>


CSS: CSS Padding - Learn CSS for Free and Fun .......


With CSS we can define the space between the element border and the element content. Padding can be applied at

 top of the page
 left of the page
 bottom of the page
 right of the page

Tags:

padding-top: 2cm;
padding-left: 3cm;
padding-bottom: 4cm;
padding-right: 5cm;
padding: 2cm 3cm 4cm 5cm;

The CSS padding identifies the space between the element border and the element content.
CSS padding can be applied to the top, bottom, left and right of the web page.

Example:

<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm;}
td.test2 {padding: 0.5cm 2.5cm;}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
This is a tablecell with equal padding on each side.
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
This tablecell has a top and bottom padding of 0.5cm
and a left and right padding of 2.5cm.
</td>
</tr>
</table>
</body>
</html>

Demo:


This is a tablecell with equal padding on each side.

This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.

CSS; CSS Margin - Learn CSS for Free and Fun ......


With CSS we can set Margins at the

 top of the page
 bottom of the page
 right of the page
 left of the page

Tags:

margin-top: 5cm;
margin-right: 6cm;
margin-bottom: 7cm;
margin-left: 8cm;
margin: 5cm 6cm 7cm 8cm;

A margin is a space around an object. We can set margin in web pages using CSS. Using
separate properties within margin syntax we can define space all around the element.

Example:

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm;}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>

CSS: CSS Border - Learn CSS for Free and Fun


What we can do with CSS Border?

 We can set the color of the border
 We can set the style of the border
 We can set the width of the border

The CSS border is used for the purpose of changing color, style and the width of the border.
The CSS border allows to use each side of the separately from the other three sides. Each of
the sides can have different color, style and width.

The color of the border also has different syntaxes for the top, bottom, left and right. To set the color of four borders the syntax used is

<style type="text/css">
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>

The style of the CSS border varies in case of top, bottom, right and left borders. The syntax used in case of dotted, dashed, solid, double, groove, ridge, inset, outset paragraphs are

<style type="text/css">
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
</style>

The width of the CSS border also varies in case of top, bottom, right and left. To set the width
of the bottom border the syntax used is

<style type="text/css">
p.one {
border-style: solid;
border-top-width: 15px;
}
p.two {
border-style: solid;
border-top-width: thin;
}
</style>

CSS: CSS Font - Learn CSS for Free and Fun


What we can do with CSS Font?

 We can set the font of a text
 We can set a paragraph font using the "caption" value
 We can set the size of the font
 We can set the style of the font
 We can set the variant of the font
 We can set the boldness of the font


How CSS Font is used?

Syntax: tag1 {font: < font style> || < font-variant> || < font size> || < font-family>;}

Example: font: italic small-caps 12px Arial;

The CSS font is used to set the font of the text, and the paragraph font can be set by using the
“caption” value. It helps to set the style, variant and size of the font. The boldness of the font
can be set by CSS font. The font in the webpage varies in color, style, size and others using
CSS.

The CSS can set the font of a text by adding the syntax

<style type="text/css">
h3 {font-family: times;}
p {font-family: courier;}
p.sans-serif {font-family: sans-serif;}
</style>

To set the paragraph font by using the “caption” value, the following syntax is used

<html>
<body>
<p>This is a normal paragraph</p>
<p style="font: caption">This is a paragraph with a "caption" font</p>
</body>
</html>

The size and style of the font is set by the help of the following syntaxes respectively

<style type="text/css">
h1 {font-size: 150%;}
h2 {font-size: 130%;}
p {font-size: 100%;}
</style>

and

<style type="text/css">
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
</style>

To set the variant of the font, the syntax used is

<style type="text/css">
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
</style>

CSS font can also set the boldness of the font, the syntax used is

<style type="text/css">
p.normal {font-weight: normal;}
p.thick {font-weight: bold;}
p.thicker {font-weight: 900;}
</style>

CSS: CSS Text - Learn CSS for Free and Fun


What we can do with CSS Text?

 We can set the color of the text
 We can set the background-color of the text
 We can specify the space between characters
 We can specify the space between lines
 We can align the text
 We can add attributes to the text
 We can indent text
 We can control the letters in a text
 We can increase the white space between words
 We can disable text wrapping inside an element


How CSS Text is used?

Syntax: tag1 { color: color1;}

Example: p {color: red;}

The CSS text decorates the text of the website and sets the background color. Besides this the
CSS text also sets the space between the characters and between lines. It further incorporates
indent text, aligns the text, controls the letters in the text and increases the white space
between the words. The CSS text adds attributes to the text, changes its direction wherever
necessary and disables text wrapping inside an element.

The CSS text changes the webpage in terms of color and alignment with the following syntaxes
respectively:

<style type="text/css">
h1 {color: #00ff00;}
h2 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>

and

<style type="text/css">
h1 {text-align: center;}
h2 {text-align: left;}
h3 {text-align: right;}
</style>

To change the background-color of the text, the syntax used is

<style type="text/css">
span.highlight {
background-color:yellow;
}
</style>

The text specifies the space between characters and lines, through these syntaxes respectively

<style type="text/css">
h1 {letter-spacing: -3px;}
h4 {letter-spacing: 0.5cm;}
</style>

and

<style type="text/css">
p.small {line-height: 90%;}
p.big {line-height: 200%;}
</style>

It adds to the indent text by adding the syntax

<style type="text/css">
p {text-indent: 1cm;}
</style>

It controls the letter in a text by the syntax

<style type="text/css">
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}
</style>

The CSS text also increases the white space between words and disables text wrapping inside
an element by adding the following syntax respectively

<style type="text/css">
p {
word-spacing: 30px;
}
</style>
and
<style type="text/css">
p {
white-space: nowrap;
}
</style>

CSS: Group Selectors - Learn CSS for free and fun ........



Group Selectors

What are Group Selectors?
 By using Group Selectors we can assign styling for a group of text at a time
 Group selectors contain a common set of property & values, which can be combined/grouped logically for easier coding.

How Group Selectors are used?

tag1,tag2 {Property:Value;}

tag1 {Property:changed value;}

tag2 {Property:changed value;}

Example
b,p {font-family:Arial, Helvetica, sans-serif; color:black; background:yellow;}
b {font-size:14px;}
p {font-size:10px;}

group selectors are used to define the common styles at once.
.headlines, .sublines, .infotext

 {
font-family:Arial, Helvetica, sans-serif; color:red; background:blue;
}
.headlines {font-size:14px;}
.sublines {font-size:12px;}
.infotext {font-size: 10px;}


With group selectors the typing time becomes less and editing becomes easy.

CSS: CSS Background - Learn CSS for Free and Fun


What we can do with CSS Background?

 We can set the background color
 We can set image as the background
 We can repeat a background image only vertically, only horizontally or display a background image only one time
 We can place the background image
 We can position a background image using % or pixels
 We can set a fixed background image


How CSS background is used?

Syntax: tag1 {background-color: color1;}

Example: body {background-color:cyan;}

CSS background enables to set the background color or the image. The image can be set as the
background of the webpage which can be repeated in vertical, horizontal form or in neither
direction. The CSS background is formulated in such a way that the background image can be
changed. Apart from this, the position of the background image can be changed by using % or
pixels or can be fixed. The CSS background helps to change the webpage on the basis of color,
gradient, image and other properties.

The webpage can be made more attractive by adding a color in the background. To change the
color of the background into cyan, the syntax added is body {background-color: cyan;}. Thus
the syntax remains same in case of any color only the shade of the color is to be replaced. The
syntax used is

<style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: transparent;}
p {background-color: rgb(250,0,255);}
</style>

Similarly by adding image, the background can be made more attractive by using the syntax 

p {
background-image: url(image1.jpg);}.
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
}
</style>

To repeat the background image the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat;
}
</style>

For the vertical repetition, the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat-y;
}
</style>

For horizontal repetition the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat-x;
}
</style>

To display the background image only once, the syntax used is

<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>

To place the background image the syntax used is

<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>

To change the position of the background image using %, the syntax used is

<style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>

To change the position of the background image using pixel, the syntax used is

<style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>

To set a fixed background image the syntax used is

<style type="text/css">
body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>

CSS: Context Dependents - Learn CSS for Free and Fun


What are Context Dependents?

 By using Group Selectors we can assign styling to make selectors that will only work in
certain contexts.
 We can use context dependent and grouped selectors simultaneously.

How Context Dependents are used?

i b { color:red;}

This means the font color of those texts will be red which are bold and written in italics.
You may require to change a property of text depending on its other property. Let us suppose
we have two sentences, one written in bold and the other written in both italics and bold. You
want to change the color of the sentence written in both bold and italics and not for the
sentence written in bold. You can make this happen by context dependents.

Let us consider the example

i b { color:red;}

This means only the texts which are both bold and written in italics will appear in red.

It is possible to make selectors that will only work in certain contexts.
For example, you can define a style for the <b> tag that is only triggered if the text is not only
bold but also written in italics.

For example, the style should be in effect here:

<i><b>example</b></i>
but not here :
<b>example</b>.

CSS: Class Selectors - learn CSS for free and fun


Class Selectors

Class selectors are used for defining different styles for the same type of HTML element.

If you want to add two different styles (say, two different font styles) to a particular type of
HTML element (say, ‘paragraphs’ appearing on a web page), you can do it with the class
selector.

The general syntax for a class selector is
tag.class attribute {Property:Value;}

Example: Consider the instructional website as given above. If you want to define two
different font colors for the alternate paragraphs, the style sheet will be written as:

p.question {color: #CC0000;}
p.answer {color: #339999;}

Class selectors apply to all the elements with the particular class attribute given in the
statement. With class selectors you can also add more than one class to a particular element.
Sometimes you will need to add different styles to a type of HTML element that appears in a
web page. With class selectors we can do it easily.

Class selectors are used for defining different styles for the same type of HTML element.
If you want to add two different styles (say, two different font styles) to a particular type of
HTML element (say, ‘paragraphs’ appearing on a web page), we can do it with the class
selector.

In an instructional website you may have paragraphs displayed in a webpage, with “Definitions”
and “Examples” in alternate paragraphs. With class selectors we have two different styles for
the alternate paragraphs.

Let us consider the example of the instructional website as given above. If we want to define
two different font colors for the alternate paragraphs, the style sheet will be written as shown
here.

Class selectors apply to all the elements with the particular class attribute given in the
statement.
The following things must be noted about class selectors.
The class attribute for which the style is defined in the style sheet must be included in the
HTML document.

If the tag name is not given in the selector, the style will be applied to all the HTML elements
with the particular class.

For example, the following style will apply to all the HTML elements with the “text” attribute.
If you need to add more than one style to an element, we can still do it with class selectors.
With class selectors you can also add more than one class to a particular element.



CSS: ID Selector - Learn CSS for Free and Fun


ID Selectors

ID selectors are also used to define styles for an object with a unique ID. It is mostly used with
layers as layers are always defined by a unique ID. An ID selector is defined as a #. The general
syntax for an ID selector is #IDSelector{Property:Value;}. ID selectors apply to exactly one
element.

There are TWO types of ID selectors:


Solitary ID selectors 

It can apply to any element with an ID matching the ID of the selector. Any element with #idname syntax will have Solitary ID selectors applied over it.

The following ID selector will apply to an element that has an id attribute with a value of "red":

#red {color: red;}


ID selectors

This ID selector is associated with a particular type of element in a page. This ID selector will have the syntax elementname# idname and will apply only to the
element with this ID.

The following ID selector will apply to a p element that has an id attribute with a value of “para1":

p#para1{
text-align: left;
color: blue;
}


ID selectors are also used for defining styles for HTML elements. These selectors are used to
define a style for an object with a unique ID. The ID selector is mostly used with layers as
layers are always defined by a unique ID.

An ID selector is defined as a # and the general syntax for an ID selector is shown here.
Hash followed by the ID selector and then the property and its value within braces. ID selectors
apply to exactly one element.

There are TWO types of ID selectors: Solitary ID selectors and ID selectors.

Solitary ID selector is a general ID selector that can apply to any element with an ID matching
the ID of the selector. Any element with #idname syntax will have Solitary ID selectors applied
over it.

The solitary ID selector in our example will apply to an element that has an id attribute with a
value of "red":

ID selector is associated with a particular type of element in a page. This ID selector will have
the syntax element-name#idname and will apply only to the element with this ID. It must be
noted here that an ID comprises only alpha numeric characters and hyphens and does not
include any other characters, underscores or spaces, nor can an ID start with a numeral.
The example shows the ID selector that will apply to a p element that has an id attribute with
a value of "para1":

CSS: Tag Selector - Learn CSS for Free and Fun ..........


What are Tag Selectors

 By using Tag Selectors we can define styling for existing HTML tags
 Often used to set the basic styles that will appear throughout a Web site

How Tag Selectors are used

HTML Selector {Property:Value;}
Eg : b {font-family:Arial, Helvetica, sans-serif; font-size:14px; color: red;}

This means Arial font of size 14 and red in color is stored within the tag b.
CSS with HTML tag selector, example:

body {
font-family: Arial;
font-size: 14px;
color: red;
text-align: left;
}

The meaning of the CSS code above is: every text inside the body tag will be appeared in Arial
font face with size 14 px, red color and left alignment. As the tag selector is defined within the
body tag only the text appearing in the body will change. However the paragraph text, header
text and others will remain unaffected.

CSS: Advantages and Disadvantages - Learn CSS for Free and Fun


Advantages of CSS

Using CSS we can keep the content of an html file and the style and layout of the file separate
from each other. This gives several advantages to CSS over the traditional HTML.

 CSS keeps the file size smaller

Unlike HTML where we need to write the code to specify the font size, color, style etc. for
every single page of a document that consists of more than one page, In CSS we need to
specify the attributes only once for each element and the specified style will automatically
be applied whenever the element occurs. Since the style and layout elements are
separated from the HTML this allows the document to be much smaller in size.

 The pages of the website loads faster

Since the HTML pages have less code after the style and layout is separated from it, the
pages will take less time to load.

 Lower bandwidth requirement

When the pages of a website take lesser time to load, the bandwidth requirement of the
server is also reduced. This also makes CSS a cost effective option.

 CSS saves time

With CSS, changing the style of a document becomes very easy and it also saves much time.
In HTML if we want to make even a small change in the entire website (such as changing
the font style), we need to open every single page and alter the font style manually, which
makes the process to time consuming. However, with We just need to open the CSS file
where the layout of the site is stored and change the font style, which in turn, will change
the font style of the entire website.

 CSS is easier to manage

As to make a change throughout a website that uses CSS, one need to make an edit only in
a single file, it is easier to manage CSS. This greatly helps when the website has several
pages.


Disadvantage of CSS

One major disadvantage of CSS is its incompatibility to different browsers. While some
browsers show partial compatibility to Style Sheets and support only some of the features
of style sheets, very few browsers such as the early versions of Internet Explorer and
Netscape show almost complete incompatibility to CSS.
However, the latest browsers versions show more standards-compliant and have largely
overcome the compatibility problem.