CSS and HTML 5 – DIV Tags and Borders

You can use DIV tags and Borders to group text together in your web page and do things such as create coupons.

borderStyle.css

.dotted {
	border: 10px dotted red;	
}

.dashed {
	border: 15px dashed blue;	
}

.solid { 
	border: 5px solid black;	
}

.double {
	border: 5px double black;	
}

.coupon {
	border: 5px dashed black;	
	border-radius: 40px;	
	background-color: grey;
	width: 300px;
	height: 200px;
	margin: auto;
}

divBorder.html

<html>
<head>
<link rel="stylesheet" href="borderStyle.css" />
</head>
<body>

<div class ="dotted">
<H1>This is a Dotted Border</h1>
<p> Here is some more test I put here to look pretty</p>
</div>
<br>

<div class ="dashed">
<H1>This is a Dashed Border</h1>
<p> Here is some more test I put here to look pretty</p>
</div>
<br>

<div class ="solid">
<H1>This is a Solid Border</h1>
<p> Here is some more test I put here to look pretty</p>
</div>
<br>

<div class ="double">
<H1>This is a Double Border</h1>
<p> Here is some more test I put here to look pretty</p>
</div>
<br>

<div class ="coupon">
<H1>This is a COUPON</h1>
<p> You can use DIV and Borders to create COUPONS!!!</p>
</div>

</body>
</html>

Be the first to comment

Leave a Reply