How to Write the CSS for the Number Guesser in Your HTML5 Game - dummies

How to Write the CSS for the Number Guesser in Your HTML5 Game

By Andy Harris

The HTML provides the foundation for the number guesser in your HTML5 game, but it needs some CSS code to make it have the look you’re aiming for. The CSS isn’t just for beauty’s sake, but it also adds some functionality. Specifically, one of the buttons will appear and disappear on command. The visibility of the button is controlled with a CSS style, which is changed through JavaScript code.

Here is how to build the CSS for the game:

  1. Center the headline.

    Most of the content of this page will be centered, so center the h1 element. Set the text-align to center.

  2. Format the fieldset.

    The page consists of a form with a fieldset. Change the fieldset’s width to a fixed size and set the margins to auto. This will center the fieldset in the page.

  3. Format the output div.

    There is a special div called output that will contain the instructions to the user. The only formatting necessary is to center the text with text-align: center. (Remember, you center the contents of an element with text-align. Center the element itself with margin: auto.)

  4. Float the labels and input elements.

    This will be a standard form with the label on the left and input elements to the right. Assign the necessary attributes to float and input elements.

  5. Center the buttons.

    The buttons will look best if they’re centered on the page. Convert buttons to block-level and set the margins to auto for this effect.

The complete CSS code is available here:

h1 {
 text-align: center;
}
fieldset {
 width: 600px;
 margin-left: auto;
 margin-right: auto;
}
#output {
 text-align: center;
}
label {
 float: left;
 width: 250px;
 clear: left;
 text-align: right;
 padding-right: 1em;
}
input {
 float: left;
}
button {
 display: block;
 clear: both;
 margin-left: auto;
 margin-right: auto;
}

Note that the Play Again button is visible. Although CSS code is used to hide and display the button, that code will be generated through JavaScript.