6. CSS with paragraph and graphics
6A) Create and use different style for border property.
CODE:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p.one{border-style:solid; border-width:5px;}
p.two{border-style: solid; border-width:medium ;}
p.three{border-style: dotted; border-width: 2px;}
p.four{border-style: dotted; border-width:thick ;}
</style>
</head>
<body>
<h2>the border-width property</h2>
<p>This property specifies the width of thefour border:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p><b>Note:-</b> The"border-style" property to set the bodersfirst</p>
</body></html>
OUTPUT:
6B) Create a CSS padding property.
CODE:
<!DOCTYPE html>
<html>
<head>
<style> p.ex1 {
border: 1px solid red; padding: 35px; } p.ex2 {
border: 1px solid red; margin: 35px; }
</style>
</head>
<body>
<h1>The padding Property</h1>
<p class="ex1">This paragraph has a padding of 35 pixels
on all four sides.</p>
<p class="ex2">This paragraph has no specified padding,
but a margin of 35 pixels on all four sides.</p>
<p><strong>Note:</strong>
Padding creates extra space within an element, while margin
creates extra space around an element!</p>
</body>
OUTPUT:
6C) Create a program with link button in CSS.
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #ff4586;
color: white;
padding: 14px 25px;
text-align: center;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
OUTPUT:
