I’m trying to create an online calculator as a means to help me learn HTML, CSS, and JavaScript. I am trying to create the “buttons” as nested boxes in the main container. The container and “screen” show just fine but I can’t get the background color to show for the first “button” I have tried to make. Below are the HTML and CSS files I have thus far. Any suggestions?
HTML:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "calculator.css">
<script type = "text/javascript" src = "calculator.js"></script>
<title>Quick Calculator</title>
</head>
<body>
<div id = "wrapper1">
<div id = "screen">
</div>
<div id = "7button">
</div>
</div>
</body>
</html>
CSS:
#wrapper1{
background-color: #777;
-webkit-border-radius: 7px;
height: 28em;
width: 22em;
padding-top: 0.3em;
padding-left: 0.3em;
padding-right: 0.3em;
vertical-align: middle;
margin: 0 auto;
box-shadow: 2px 2px 1.5px #555
}
#screen{
height: 10em;
width: 20em;
margin: 1em 1em;
background-color: #C8F56E;
-webkit-border-radius: 2px;
box-shadow: 3px 3px #94B551 inset;
}
#7button{
margin: 0.5em 0.5em 0.5em 0.5em;
height: 1.5em;
width: 3.5em;
background-color: #000;
/*-webkit-border-radius: 2px;
box-shadow: 2px 2px 1.5px #111;*/
}
CSS ID’s cannot start with a number. Change it to button7 instead.