Hey there guys, I just started learning some basic web dev. I’m having problems with making a black rectangle surrounding my div.
drawing.html
<html>
<head>
<title> Drawing in JS </title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="seg1" class="center">
<h1 class="style1">
My Canvas
</h1>
<canvas id="canvas" width = "550" height = "400">
You noob, use a HTML5 compatible browser.
</canvas>
</div>
<script type="text/javascript"></script>
</body>
</html>
*stylesheet.css
*
#seg1{ background-color: rgba(0,0,0,0.5);}
.style1{ font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;}
.center{ text-align: center;}
canvas{ border: 1px dotted brown; background-color:#FFFFFF;}
body{ background-color:#F1F1F1;}
The rectangle (div background) spans from the very left of my browser till the very right.
How do I make the rectangle be the same width as the contents in the div?
Additional Questions:
Can i put in padding for the width of the rectangle? How do i define that?
Any book recommendations that goes from beginner to in depth for html/css?
