Class Height Width
Lets see and example.
Example: 1
<html>
<head>
<style type ="text/css">
.center
{
Background-color: red;
color: blue;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>
<head>
<style type ="text/css">
.center
{
Background-color: red;
color: blue;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>
Output
This is a normal paragraph.
This is a paragraph that uses the CSS code.
But, width of the element is not equal to the background color.
We have to set width and height explicitly.
Lets set only width 400 pixels to the element <p>.
Example: 2
<html>
<head>
<style type ="text/css">
.center
{
Background-color: red;
color: blue;
width: 250px;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>
<head>
<style type ="text/css">
.center
{
Background-color: red;
color: blue;
width: 250px;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>
Output
This is a normal paragraph.
This is a paragraph that uses the CSS code.
Now, width of the element is equal to the background color.
If we want to large our background , then we have to set height attribute.
Lets set height 100 pixels and width 250 pixels to the element <p>.
Example: 3
<html>
<head>
<style type ="text/css">
.center
{
Background-color: red;
color: blue;
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>
<head>
<style type ="text/css">
.center
{
Background-color: red;
color: blue;
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>
Output
This is a normal paragraph.
This is a paragraph that uses the CSS code.
No comments:
Post a Comment