4/05/2016

Create a Box Model using CSS (Cascading Style Sheets) Styles as shown below.

              1:
www.programmingwithbasics.com

                2.

           
www.programmingwithbasics.com

Code Copy From Here


1.
<html><head><title>css style</title>
</head>
<body><center>
<table border="1" height="600" width="600" align="top" bgcolor="magenta" style="margin-top:10px">
<tr><td>
<table border="2" height="85%" width="85%" bgcolor="pink" style="margin-left:50px"><h2 align="center">Margin</h2>
<tr><td>
<table border="3" height="80%" width="80%" bgcolor="yellow" style="padding:20px;margin-left:48px"><h2 align="center">Border</h2>
<tr><td>
<table border="2" height="70%" width="70%" bgcolor="red" style="margin-left:50px"><tr><h2 align="center">Padding</h2>
<td align="center"><h2 align="center">Element Content</h2>Therefore, to ascertain the total space required to place an element on the page, 
add the content area’s dimensions to any padding, borders, and margins that have been declared.</td>
</tr>

</table>
</td></tr></table></td></tr></table></td></tr></table></body></html>

2.
<html>
<head>
<style>
#in
{
 width:20%;
 height:25%;
 padding:90px;
 margin-top:40px;
 transform: rotate(-10deg);
background-color:mediumorchid;
border-color:black;
}
#d
{
width:20%;
height:30%;
margin-left:-100px;
transform: rotate(-10deg);
background-image:url("na.jpg");
opacity: 0.8;
border-color:black;
}
#e
{
width:20%;
height:30%;
margin-left:-100px;
transform: rotate(-10deg);
border-color:black;
background-image:url("t1.jpg");
opacity: 0.8;
}

table
{
 width:20%;
 height:30%;
margin-top:-13%;
margin-left:40%;
transform: rotate(-10deg);
border-style:solid;
border-color:yellow;
}
#td1
{
color:red;
border:none;
padding-left:29%;
}
</style>
</head>
<body bgcolor="LIGHTCORAL">
<marquee>
<b style="font-size:30px;color:brown">
BOX MODEL HIERACHY
</marquee>
<br><br><br><br><br><br>
       <p style="margin-left:30px">
<input type="textfield" id="in">
<input type="textfield" id="d">
<input type="textfield" id="e">
<table border="1">
<tr>
<td id="td1">
The box model is the specification that defines how a box and its attributes relate to each other.
</td>
</tr>
</table>
</p>
</body>
</html>

Output:

www.programmingwithbasics.com


www.programmingwithbasics.com






















subodh yadav

Ghanendra Yadav

Hello, I Am Ghanendra Yadav Owner of This Blog, I am professional Blogger and Programmer. I Love Programming, Logo Making, And Banner Designing. My Highest Qualification is MCA From NIT Warangal. You Can Find Me On Social Media Through Below Link And If You Have Any Query Related To Programming And Other Subject Comment Below or You Can Mail Me I Will Try To Answer Within 24 Hours Email:- yghanendra@student.nitw.ac.in

Find me on Social Media

Facebook | Twitter | Google+ | RSS Feed

No comments:

Post a Comment