Monday, July 29, 2013
Work From Home Jobs Online: Get Free Recharge of Rs 30 Every Day for Send Free...
Work From Home Jobs Online: Get Free Recharge of Rs 30 Every Day for Send Free...: Join In These Below Sites and Get Free Recharge of Rs 30 Every Day Play our largest 100 question QUIZ daily and get free recharges 4x f...
Friday, July 12, 2013
JavaScript Switch Case Example
Switch Case
: Switch is used to switch to the required block of the code depending on the
value given to it.
Example :
<html>
<head>
<script>
a =
prompt('Enter any number');
a =
parseInt(a);
switch (a)
{
case 1:
document.write("Monday");
break;
case 2:
document.write("Tuesday");
break;
case 3:
document.write("Wednesday");
break;
case 4:
document.write("Thursday");
break;
case 5:
document.write("Friday");
break;
case 6:
document.write("Saturday");
break;
case 0:
document.write("Sunday");
break;
default:
document.write("Invalid input");
}
</script>
</head>
<body>
</body>
</html>
JavaScript If Ladder Statement Example
If Ladder :
In multiple if every if is independent ( if true stop)
In Else if every if is dependent ( if false continue next )
<script>
per=47.90;
if(per>=75)
document.write("A Grade");
else if(per>=60)
document.write("B Grade");
else if(per>=45)
document.write("C Grade");
else
document.write("D Grade");
</script>
In multiple if every if is independent ( if true stop)
In Else if every if is dependent ( if false continue next )
<script>
per=47.90;
if(per>=75)
document.write("A Grade");
else if(per>=60)
document.write("B Grade");
else if(per>=45)
document.write("C Grade");
else
document.write("D Grade");
</script>
JavaScript Nested If Example
Nested If: if inside another if Statement.
<script>
a = 30;
b = 20;
c = 45;
if(a>b)
{
if(a>c)
document.write(a + ' is big');
else
document.write(c + ' is big');
}
else
{
if(b>c)
document.write(b + ' is big');
else
document.write(c + ' is big');
}
</script>
<script>
a = 30;
b = 20;
c = 45;
if(a>b)
{
if(a>c)
document.write(a + ' is big');
else
document.write(c + ' is big');
}
else
{
if(b>c)
document.write(b + ' is big');
else
document.write(c + ' is big');
}
</script>
JavaScript If Else Statement Example
If else:
Example 1
<html>
<head>
<script>
a = 10;
b = 20;
if(a>b)
{
document.write(a + 'is big');
alert('Thank u');
}
else
{
document.write(b + 'is big');
alert('Thank u');
}
</script>
</head>
<body>
</body>
</html>
Example 1
<html>
<head>
<script>
a = 10;
b = 20;
if(a>b)
{
document.write(a + 'is big');
alert('Thank u');
}
else
{
document.write(b + 'is big');
alert('Thank u');
}
</script>
</head>
<body>
</body>
</html>
JavaScript If Condition Example
1. If Condition:
Example 1
<html>
<head>
<script>
m = 40;
if(m>=35)
{
document.write("Pass");
document.write("<br/>Congrats!");
}
</script>
</head>
<body>
</body>
</html>
Example 1
<html>
<head>
<script>
m = 40;
if(m>=35)
{
document.write("Pass");
document.write("<br/>Congrats!");
}
</script>
</head>
<body>
</body>
</html>
JavaScript Conditional Or Branching Statements
Conditional Or Branching Statements:
These statements are depend on the condition and if the condition is true then only that true branch will be executed other wise it wont take any action.
Every condition is dependent on relational operators (==, > ,< , >=, <=, !=)
These are of 5 Types:
1. If condition
2. If Else
3. Nested If
4. If Ladder
5. Switch
These statements are depend on the condition and if the condition is true then only that true branch will be executed other wise it wont take any action.
Every condition is dependent on relational operators (==, > ,< , >=, <=, !=)
These are of 5 Types:
1. If condition
2. If Else
3. Nested If
4. If Ladder
5. Switch
JavaScript Prompt Dialog Box Example
Prompt Dialog Box:- Prompt is used to take inputs at Runtime through dialog box.
Example-1:
<html>
<head>
<script>
a = prompt('please enter your value');
document.write(a);
</script>
</head>
<body>
</body>
</html>
Example-2:
<html>
<head>
<script>
a = prompt('please enter your value',100);
document.write(a);
</script>
</head>
<body>
</body>
</html>
Example-3:
<html>
<head>
<script>
a = prompt('please enter your value');
document.write(a+'<br>');
b = typeof(a);
document.write(b);
</script>
</head>
<body>
</body>
</html>
Example-4:
<html>
<head>
<script>
a = prompt('please enter your value');
a = parseInt(a);
b = typeof(a);
document.write(a+'<br>');
document.write(b);
</script>
</head>
<body>
</body>
</html>
Example-5:
<html>
<head>
<script>
a = prompt('please enter 1st value');
a = parseInt(a);
b = prompt('please enter 2nd value');
b = parseInt(b);
c = a+b;
document.write(c);
</script>
</head>
<body>
</body>
</html>
Example-6:
<html>
<head>
<script>
a = 'abc';
a = parseInt(a);
document.write(a);
</script>
</head>
<body>
</body>
</html>
Note :
if parseInt conversion is not possible then it will return NaN ( Not a Number )
Example-1:
<html>
<head>
<script>
a = prompt('please enter your value');
document.write(a);
</script>
</head>
<body>
</body>
</html>
Example-2:
<html>
<head>
<script>
a = prompt('please enter your value',100);
document.write(a);
</script>
</head>
<body>
</body>
</html>
Example-3:
<html>
<head>
<script>
a = prompt('please enter your value');
document.write(a+'<br>');
b = typeof(a);
document.write(b);
</script>
</head>
<body>
</body>
</html>
Example-4:
<html>
<head>
<script>
a = prompt('please enter your value');
a = parseInt(a);
b = typeof(a);
document.write(a+'<br>');
document.write(b);
</script>
</head>
<body>
</body>
</html>
Example-5:
<html>
<head>
<script>
a = prompt('please enter 1st value');
a = parseInt(a);
b = prompt('please enter 2nd value');
b = parseInt(b);
c = a+b;
document.write(c);
</script>
</head>
<body>
</body>
</html>
Example-6:
<html>
<head>
<script>
a = 'abc';
a = parseInt(a);
document.write(a);
</script>
</head>
<body>
</body>
</html>
Note :
if parseInt conversion is not possible then it will return NaN ( Not a Number )
Tuesday, July 9, 2013
Javascript Confirm Dialogbox With Example
Confirm Box: To display some confirm message which returns a Boolean (True/False).
Example for confirm
<html>
<head>
<script>
a = confirm('Are you sure');
if(a==true)
{
alert('Selected OK');
}
else
document.write('Cancelled');
</script>
</head>
<body>
</body>
</html>
Example for confirm
<html>
<head>
<script>
a = confirm('Are you sure');
if(a==true)
{
alert('Selected OK');
}
else
document.write('Cancelled');
</script>
</head>
<body>
</body>
</html>
Javascript Alert Dialog Box With Example
alert box: To display some message in the dialog box.
Example for alert box
<html>
<head>
<script>
a = 10;
alert('Value of a is ' + a);
</script>
</head>
<body>
</body>
</html>
Example for alert box
<html>
<head>
<script>
a = 10;
alert('Value of a is ' + a);
</script>
</head>
<body>
</body>
</html>
Operators In Javascript With Examples
Operators in Javascript
1. Arithmetic
+ Addition
- Subtraction
* Product
/ Division
% Modulus (5%2 = 1)
a = a+b
a + = b
a = a-b
a - = b
a = a*b
a * = b
a = a / b
a / = b
a = a % b
a % = b
2. Relational
== Equals to
!= Not equals to
> Greater then
< Less then
>= Greater then or Equals to
<= Less then or Equals to
3. Logical
---------
And &&
Or ||
Not !
If (a==10 && b==20)
{
.....
.....
}
4. Concatenation
+ Addition (if both are numbers)
Concatenation (if any one is string)
5. Assignment
a = 10 ;
a = b ;
6. Incrementation/ Decrementation
++ incrementation
-- Decrementation
Ex :
a = 10 ;
a++; similar to ( a + = 1) that is a = a + 1 => a=11
a-- ; similar to ( a - = 1) that is a = a - 1 => a=9
Post increment
document.write (a++) ;
Pre increment
document.write (++a) ;
i=5;
j=i++; // post increment => j=5, i=6
k=5;
p=++k; // pre increment => p=6, k=6
Note :
Unary operator takes one Value . ( ! , ++ , -- )
Remaining all operators are Binary Operators ( it takes 2 values )
7. Ternary operator
--------------------
Var = ( condition ) ? true val 1 : false val 2
Example
<html>
<head>
<script>
a = 10;
b = 20;
c = ( a > b ) ? a : b;
document.write( c );
</script>
</head>
<body>
</body>
</html>
1. Arithmetic
+ Addition
- Subtraction
* Product
/ Division
% Modulus (5%2 = 1)
a = a+b
a + = b
a = a-b
a - = b
a = a*b
a * = b
a = a / b
a / = b
a = a % b
a % = b
2. Relational
== Equals to
!= Not equals to
> Greater then
< Less then
>= Greater then or Equals to
<= Less then or Equals to
3. Logical
---------
And &&
Or ||
Not !
If (a==10 && b==20)
{
.....
.....
}
4. Concatenation
+ Addition (if both are numbers)
Concatenation (if any one is string)
5. Assignment
a = 10 ;
a = b ;
6. Incrementation/ Decrementation
++ incrementation
-- Decrementation
Ex :
a = 10 ;
a++; similar to ( a + = 1) that is a = a + 1 => a=11
a-- ; similar to ( a - = 1) that is a = a - 1 => a=9
Post increment
document.write (a++) ;
Pre increment
document.write (++a) ;
i=5;
j=i++; // post increment => j=5, i=6
k=5;
p=++k; // pre increment => p=6, k=6
Note :
Unary operator takes one Value . ( ! , ++ , -- )
Remaining all operators are Binary Operators ( it takes 2 values )
7. Ternary operator
--------------------
Var = ( condition ) ? true val 1 : false val 2
Example
<html>
<head>
<script>
a = 10;
b = 20;
c = ( a > b ) ? a : b;
document.write( c );
</script>
</head>
<body>
</body>
</html>
Javascript Basic Script With Examples
variable : A variable is a user defined name which is used to store constant values in it. Variable is a name which is given to memory location.
In Javascript variable Declaration to Datatypes is not mandatory.
Data Types (Type of Constant Values )
1. Number (int – 4 bytes , float – 8 bytes , Double 16 bytes)
2. String ('*', 'abc' or "abc")
3. Boolean (True or False)
Data Type Variables:
Example
Var a;
a = 'W3C';
---(or)---
Var a = 'W3C';
---(or)---
a = 'W3C';
Points to remember for naming the variables
String
1) Use \ when using a quotes " or Apostrophe inside a string.
Ex :
"Hai \" I am Robert"
Note : \ indicates to browser that coming char is not a special char.
2) \n is for next line
Ex :
A = "This is an \n example"
A = "This is an\\n example"
Boolean
Boolean a = true;
Boolean a = false;
Note : don't use quotes like 'true'
Example:
<script type="text/javascript">
document.write("<h2>Welcome To \"JS\"</h2>");
a=123;
b='hello';
c=5>3;
document.write("a=" + a + "<br/>b=" + b + "<br/>c=" + c);
/* js comment */
x=6; y=4;
document.write("<br/>sum=" + (x+y));
document.write("<br/>Type of b is " + typeof(b));
per=57.86948775467656;
document.write("<br/>Per=" + per.toFixed(2)); // per=57.87
document.write("<br/>Per=" + per.toFixed(0)); // per=58
document.write("<br/>Per=" + Math.round(per)); // per=58
document.write("<br/>Per=" + Math.floor(per)); // per=57
document.write("<br/>Per=" + Math.ceil(per)); // per=58
</script>
To get the data type of var
a = 10;
b = typeof(a); ( it is Expression and function )
document.write(b);
Example-2
<html>
<head>
<script>
a = 10;
b = typeof(a);
document.write( b );
</script>
</head>
<body>
</body>
</html>
Note : typeof() is a function as well as expression.
In Javascript variable Declaration to Datatypes is not mandatory.
Data Types (Type of Constant Values )
1. Number (int – 4 bytes , float – 8 bytes , Double 16 bytes)
2. String ('*', 'abc' or "abc")
3. Boolean (True or False)
Data Type Variables:
Example
Var a;
a = 'W3C';
---(or)---
Var a = 'W3C';
---(or)---
a = 'W3C';
Points to remember for naming the variables
- First char of var name must be in A-Z (or) a-z (or) _ (underscore).
- Spaces are not allowed.
- Avoid built in functions and reserve words as variable names.
String
1) Use \ when using a quotes " or Apostrophe inside a string.
Ex :
"Hai \" I am Robert"
Note : \ indicates to browser that coming char is not a special char.
2) \n is for next line
Ex :
A = "This is an \n example"
A = "This is an\\n example"
Boolean
Boolean a = true;
Boolean a = false;
Note : don't use quotes like 'true'
Example:
<script type="text/javascript">
document.write("<h2>Welcome To \"JS\"</h2>");
a=123;
b='hello';
c=5>3;
document.write("a=" + a + "<br/>b=" + b + "<br/>c=" + c);
/* js comment */
x=6; y=4;
document.write("<br/>sum=" + (x+y));
document.write("<br/>Type of b is " + typeof(b));
per=57.86948775467656;
document.write("<br/>Per=" + per.toFixed(2)); // per=57.87
document.write("<br/>Per=" + per.toFixed(0)); // per=58
document.write("<br/>Per=" + Math.round(per)); // per=58
document.write("<br/>Per=" + Math.floor(per)); // per=57
document.write("<br/>Per=" + Math.ceil(per)); // per=58
</script>
To get the data type of var
a = 10;
b = typeof(a); ( it is Expression and function )
document.write(b);
Example-2
<html>
<head>
<script>
a = 10;
b = typeof(a);
document.write( b );
</script>
</head>
<body>
</body>
</html>
Note : typeof() is a function as well as expression.
Java Scripts Introduction
Java Scripts Introduction
<script type="text/javascript">
document.write("<h2>Welcome To \"JS\"</h2>");
</script>
- A product of Sun Microsystem.
- Used to control HTML elements.
- Loosely typed language.
- It is an interpreter.
- Syntax and semantics are simple.
- It is a Client side Scripting language.
Javascript can embedded into html any where as follows:
<script type="text/javascript">
document.write("<h2>Welcome To \"JS\"</h2>");
</script>
Friday, July 5, 2013
Anchor Tags CSS Styles With Examples
Anchor Tags CSS Styles
Link – initial
Hover – Mouse on link
Active – Time between click & reach target page
Visited – After click , come back to back page
Example-1
<html>
<head>
<style>
a:link{
color :red;
text-decoration :none;
font-weight :bold;
}
a:hover{
color :green;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a:active{
color :black;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a:visited{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :20;
}
</style>
</head>
<body>
<a href="a.html"> Page A </a> <br>
<a href="b.html"> Page B </a>
</body>
</html>
Example-2
<html>
<head>
<style>
a:link{
color :red;
text-decoration :none;
font-weight :bold;
}
a:hover{
color :green;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a:active{
color :black;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a:visited{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :20;
}
a.abc:link{
color :green;
text-decoration :none;
font-weight :bold;
}
a.abc:hover{
color :black;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a.abc:active{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a.abc:visited{
color :red;
text-decoration :none;
font-weight :bold;
font-size :20;
}
</style>
</head>
<body>
<a href="a.html"> Page A </a> <br>
<a class="abc" href="b.html"> Page B </a>
</body>
</html>
Link – initial
Hover – Mouse on link
Active – Time between click & reach target page
Visited – After click , come back to back page
Example-1
<html>
<head>
<style>
a:link{
color :red;
text-decoration :none;
font-weight :bold;
}
a:hover{
color :green;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a:active{
color :black;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a:visited{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :20;
}
</style>
</head>
<body>
<a href="a.html"> Page A </a> <br>
<a href="b.html"> Page B </a>
</body>
</html>
Example-2
<html>
<head>
<style>
a:link{
color :red;
text-decoration :none;
font-weight :bold;
}
a:hover{
color :green;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a:active{
color :black;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a:visited{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :20;
}
a.abc:link{
color :green;
text-decoration :none;
font-weight :bold;
}
a.abc:hover{
color :black;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a.abc:active{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a.abc:visited{
color :red;
text-decoration :none;
font-weight :bold;
font-size :20;
}
</style>
</head>
<body>
<a href="a.html"> Page A </a> <br>
<a class="abc" href="b.html"> Page B </a>
</body>
</html>
Styles With DIV Both Id And Class Examples
Styles With DIV Id And Class Styles: If the elements have common attributes the you can put that attributes in “class” where as if the elements have Unique attributes the you can put that attributes in “Id”
Example for class & ID
<html>
<head>
<style>
.abc{
width :150;
height :150;
background :green;
border :1 solid black;
}
#d1 {
position:absolute;
top :0;
left :0;
}
#d2 {
position:absolute;
top :0;
left :150;
}
#d3 {
position:absolute;
top :150;
left :0;
}
#d4 {
position:absolute;
top :150;
left :150;
}
</style>
</head>
<body>
<div id="d1" class="abc"> div1 </div>
<div id="d2" class="abc"> div2 </div>
<div id="d3" class="abc"> div3 </div>
<div id="d4" class="abc"> div4 </div>
</body>
</html>
Example for <div>
<html>
<head>
<style>
.abc{
width :200;
height :30;
background :black;
border-left :1 solid black;
border-top :1 solid black;
border-right:1 solid black;
position :absolute;
top :100;
left :200;
z-index :10;
}
.def{
width :400;
height :300;
background :black;
border :1 solid black;
position :absolute;
top :130;
left :100;
z-index :0;
}
</style>
</head>
<body>
<div class="abc"> div1 </div>
<div class="def"> div2 </div>
</body>
</html>
Example for class & ID
<html>
<head>
<style>
.abc{
width :150;
height :150;
background :green;
border :1 solid black;
}
#d1 {
position:absolute;
top :0;
left :0;
}
#d2 {
position:absolute;
top :0;
left :150;
}
#d3 {
position:absolute;
top :150;
left :0;
}
#d4 {
position:absolute;
top :150;
left :150;
}
</style>
</head>
<body>
<div id="d1" class="abc"> div1 </div>
<div id="d2" class="abc"> div2 </div>
<div id="d3" class="abc"> div3 </div>
<div id="d4" class="abc"> div4 </div>
</body>
</html>
Example for <div>
<html>
<head>
<style>
.abc{
width :200;
height :30;
background :black;
border-left :1 solid black;
border-top :1 solid black;
border-right:1 solid black;
position :absolute;
top :100;
left :200;
z-index :10;
}
.def{
width :400;
height :300;
background :black;
border :1 solid black;
position :absolute;
top :130;
left :100;
z-index :0;
}
</style>
</head>
<body>
<div class="abc"> div1 </div>
<div class="def"> div2 </div>
</body>
</html>
CSS Styles With Position(Absolute/Relative/Fixed) Examples
Position
Absolute : With absolute positioning, an element can be placed anywhere on a page.
Ex :
<html>
<head>
<style>
.abc{
position:absolute;
top :100;
left :200;
}
</style>
</head>
<body>
<p > Welcome to Css </p>
<p > Welcome to Css </p>
<p class="abc"> Welcome to Css </p>
</body>
</html>
Relative positioning moves an element relative to its original position.
<html>
<head>
<style>
.abc{
position:relative;
top :100;
left :200;
}
</style>
</head>
<body>
<p > Welcome to Css </p>
<p > Welcome to Css </p>
<p class="abc"> Welcome to Css </p>
</body>
</html>
- Absolute
- Relative
- Fixed
Absolute : With absolute positioning, an element can be placed anywhere on a page.
Ex :
<html>
<head>
<style>
.abc{
position:absolute;
top :100;
left :200;
}
</style>
</head>
<body>
<p > Welcome to Css </p>
<p > Welcome to Css </p>
<p class="abc"> Welcome to Css </p>
</body>
</html>
Relative positioning moves an element relative to its original position.
<html>
<head>
<style>
.abc{
position:relative;
top :100;
left :200;
}
</style>
</head>
<body>
<p > Welcome to Css </p>
<p > Welcome to Css </p>
<p class="abc"> Welcome to Css </p>
</body>
</html>
CSS Float Property Styles With Example
Float property: Float sets where an image or a text will appear in another element.
<html>
<head>
<style >
.imgleft
{
float:left;
padding:6px;
}
</style>
</head>
<body>
<img class="imgleft" src="rose2.jpg" width="95" height="84" >
<p>
External Style Sheet: Reusability in Global. The <link> tag defines the relationship between a document and an external resource. The <link> tag is used to link to style sheets. The rel attribute specifies the relationship between the current page and the linked web resource.
</p>
</body>
</html>
<html>
<head>
<style >
.imgleft
{
float:left;
padding:6px;
}
</style>
</head>
<body>
<img class="imgleft" src="rose2.jpg" width="95" height="84" >
<p>
External Style Sheet: Reusability in Global. The <link> tag defines the relationship between a document and an external resource. The <link> tag is used to link to style sheets. The rel attribute specifies the relationship between the current page and the linked web resource.
</p>
</body>
</html>
CSS Border, Padding And Margin Styles With Examples
Border : (attributes are width type color)
Type : solid , dotted , dashed , double ( width must be min 3px for double)
Example-1
<html>
<head>
<style>
.abc
{
border :3 dotted blue;
width :250;
height :250;
background-image :url(msslogo.jpg);
}
</style>
</head>
<body>
<p class="abc"> Welcome to CSS </p>
</body>
</html>
Example-2
<html>
<head>
<style>
.abc{
border-left :3 dotted blue;
border-right:3 dashed green;
border-bottom:5 double black;
border-top :1 solid black;
width :250;
height :250;
background-image :url(msslogo.jpg);
}
</style>
</head>
<body>
<p class="abc"> Welcome to CSS </p>
</body>
</html>
Padding ( Displacement from border )
<html>
<head>
<style>
.abc
{
height:150;
width :250;
border:1 solid blue;
padding:50; ( 50 % )
(padding-left , padding-right , padding-top , padding-bottom)
}
</style>
</head>
<body>
<p class="abc"> Welcome to MSS </p>
</body>
</html>
Padding : 10 10 10 10 ;
Top Right Bottom Left
For CSS Commenting
/*
-----------------
---------------- */
Margin ( Displacement form elements )
Example-1
<html>
<head>
<style>
.abc
{
height:150;
width :250;
border:1 solid blue;
padding:50;
margin:50 30;
}
.def
{
height:150;
width :250;
border:1 solid blue;
padding:50;
margin:50 30;
}
</style>
</head>
<body>
<div class="abc"> Welcome to MSS </div>
<div class="def"> Welcome to MSS </div>
</body>
</html>
Type : solid , dotted , dashed , double ( width must be min 3px for double)
Example-1
<html>
<head>
<style>
.abc
{
border :3 dotted blue;
width :250;
height :250;
background-image :url(msslogo.jpg);
}
</style>
</head>
<body>
<p class="abc"> Welcome to CSS </p>
</body>
</html>
Example-2
<html>
<head>
<style>
.abc{
border-left :3 dotted blue;
border-right:3 dashed green;
border-bottom:5 double black;
border-top :1 solid black;
width :250;
height :250;
background-image :url(msslogo.jpg);
}
</style>
</head>
<body>
<p class="abc"> Welcome to CSS </p>
</body>
</html>
Padding ( Displacement from border )
<html>
<head>
<style>
.abc
{
height:150;
width :250;
border:1 solid blue;
padding:50; ( 50 % )
(padding-left , padding-right , padding-top , padding-bottom)
}
</style>
</head>
<body>
<p class="abc"> Welcome to MSS </p>
</body>
</html>
Padding : 10 10 10 10 ;
Top Right Bottom Left
For CSS Commenting
/*
-----------------
---------------- */
Margin ( Displacement form elements )
Example-1
<html>
<head>
<style>
.abc
{
height:150;
width :250;
border:1 solid blue;
padding:50;
margin:50 30;
}
.def
{
height:150;
width :250;
border:1 solid blue;
padding:50;
margin:50 30;
}
</style>
</head>
<body>
<div class="abc"> Welcome to MSS </div>
<div class="def"> Welcome to MSS </div>
</body>
</html>
Subscribe to:
Posts (Atom)
