Border Bottom With Class
The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
Example: 1
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p class="one">Class One-Some text.</p>
<p class="two">Class Two-Some text.</p>
<p class="three">Class Three-Some text.</p>
<p class="four">Class Four-Some text.</p>
</body>
</html>
<head>
<style type="text/css">
p.one
{
border-color: blue;
border-style: thick;;
border-width:5px;
}
p.two
{
border-color: red;
border-style:inset;
border-width: medium;
}
p.three
{
border-color: green;
border-style:outset;
border-width:thin;
}
p.four
{
border-color: #006699;
border-style:ridge;
border-width:3px;
}{
border-color: blue;
border-style: thick;;
border-width:5px;
}
p.two
{
border-color: red;
border-style:inset;
border-width: medium;
}
p.three
{
border-color: green;
border-style:outset;
border-width:thin;
}
p.four
{
border-color: #006699;
border-style:ridge;
border-width:3px;
</style>
</head>
<body>
<p class="one">Class One-Some text.</p>
<p class="two">Class Two-Some text.</p>
<p class="three">Class Three-Some text.</p>
<p class="four">Class Four-Some text.</p>
</body>
</html>
Output
Class One-Some text.
Class Two-Some text.
Class Three-Some text.
Class Four-Some text.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
you can compile many properties into one using border. Let us take a look at an example:
p {border-width: 1px; border-style: solid; border-color: blue;}
Can be compiled into:
p{border: 1px solid blue; }
Let see the same example:
Example: 2
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p class="one">Class One-Some text.</p>
<p class="two">Class Two-Some text.</p>
<p class="three">Class Three-Some text.</p>
<p class="four">Class Four-Some text.</p>
</body>
</html>
<head>
<style type="text/css">
p.one{border: 5px solid blue;}
p.two{border: 5px inset red;}
p.three{border: 5px outset green;}
p.four{border: 3px ridge #006699;}
p.two{border: 5px inset red;}
p.three{border: 5px outset green;}
p.four{border: 3px ridge #006699;}
</style>
</head>
<body>
<p class="one">Class One-Some text.</p>
<p class="two">Class Two-Some text.</p>
<p class="three">Class Three-Some text.</p>
<p class="four">Class Four-Some text.</p>
</body>
</html>
Output
Class One-Some text.
Class Two-Some text.
Class Three-Some text.
Class Four-Some text.
No comments:
Post a Comment