HTML Coding:
<html>
<head>
<title>
Simple WebPage
</title><link rel="stylesheet" href="background.css" type="text/css">
</head>
<body>
<div id="WhitePage">
</div>
</body>
</html>
CSS Coding:
Background.css
body
{
background-color:#E3E1E2;
}
#WhitePage
{
background-color:white;
Width:auto;
height:auto;
align:center;
margin-top:8%;
margin-bottom:8%;
margin-left:8%;
margin-right:8%;
padding-bottom:10cm;
box-shadow:15px 15px 5px #888888;
}
Explanation for css:
If u need To know about the css coding just change the value alone and see :
For Example
- If u change the value of the padding bottom to 100 cm the whitepage which is expaned...
- If u change the margin-top,bottom,left,right it changes the border...
- If u change the box-shawdow to 100px 100px 50px #888888; u can feel the difference.
Note :
Old IE Does not support some css like box shadow.. so use chrome to feel the diference
Explanation for the Whole Coding:
Here in the link tag style sheet is loded href indicates the path where the file is stored ..now it finds css background.css page ..It automatically subites the back ground color for body and for div tag it subtitutes the #whitepage which is to be written in div tag like this <div id="whitepage">..
Output:
Tags:
simple Basic Background Design For a WebSite,webdesign a showdow box?,sadowBox,first step for basic design of any website,first step for basic design template
No comments:
Post a Comment