Dice game?

game
javascript

#1

For whatever reason you can leave
div.dice{
float:left;
width:32px;
background:#F5F5F5;
border:#999 1px solid;
padding:10px;
font-size:24px;
text-align:center;
margin:5px;
}
in the index.php. Why is that? I tried taking them out but it didn't show the square boxes around...?
I mean it's really cool the dice and all but why can you leave that in index.php and when you take it out and put it in style.css it doesn't show the boxes..?
Thank you! :yum:

<!DOCTYPE html>
<html>
<head>
<style>
div.dice{
	float:left;
	width:32px;
	background:#F5F5F5;
	border:#999 1px solid;
	padding:10px;
	font-size:24px;
	text-align:center;
	margin:5px;
}
</style>
<script>
function rollDice(){
    var die1 = document.getElementById("die1");
    var die2 = document.getElementById("die2");
    var status = document.getElementById("status");
    var d1 = Math.floor(Math.random() * 6) + 1;
    var d2 = Math.floor(Math.random() * 6) + 1;
    var diceTotal = d1 + d2;
    die1.innerHTML = d1;
    die2.innerHTML = d2;
    status.innerHTML = "You rolled "+diceTotal+".";
    if(d1 == d2){
        status.innerHTML += " DOUBLES! You get a free turn!!";
    }
}
</script>
</head>
<body>
<div id="die1" class="dice">0</div>
<div id="die2" class="dice">0</div>
<button onclick="rollDice()">Roll Dice</button>
<h2 id="status" style="clear:left;"></h2>
</body>
</html>

#2

using <style></style>, you are using something called an internal stylesheet (the style in the same file as the rest of the code (index.php in this case))

Using style.css, you are using a external stylesheet (naming of things in programming is sometimes so logic), since the css file is now external (surprise)

Anyway, if you want to it in a external css file, you need to tell the html file where the css file is located, and tell it is a css file:

<link rel="stylesheet" href="style.css">

assuming the html and css file are in the same directory, and the css file is called style.css