Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 3.5: Classes

There are many times where you want to have a tag that has a variety of different styles based on the context that it is being used. The ability to have style changed based on the parent selector only solves some of these cases. To give you even more control over the specificity of an element, you have the ability to give the element a class. A class simply is a way of telling CSS that you want to use specific properties tied to the element. Classes are more specific than most other forms of specifying selectors and can be applied to any element you want to.

Usually you will define a class to handle a specific situation. An example of this would be if you wanted to have red text to be used to indicate critical pieces of information in your document. While you could use the style tag within a span tags, this becomes unwieldly if there are multiple attributes that you are defining. Take a look at the HTML below, and see for yourself

<!-- Setting critical text using a style -->
<span style="color:red">Critical text here</span>
<!-- Setting critical text using a class -->
<span class="critical">Critical text here</span>
Critical text here Critical text here

While using the style attribute does work, having a class indicating that text is critical does provide more useful information to the designer. If you have dozens of critical sections in a document and decided to change the color from red to dark red, you would then have to find all the instances of using the red color, while just changing the class does this for the class version. Making things even more confusing for the style method is the case where you use red for multiple things, you will not be sure which spans are for critical red sections and which spans are for angry red sections.

Setting up a class is trivially easy. You indicate that a class is being used in css by prefixing the class name with a dot. Each element can have as many classes as desired but remember that the later defined class takes precedence when there are matching attributes. You specify multiple classes by having a space between the classes. Here is some CSS that would be in the .css file or in a style block.

.angry {
color: red;
background: #EBB;
.critical {
color: darkred;

And to use thr classes

<span class="angry">Angry text here.</span>
<span class="critical">Critical text here.</span>
<span class="angry critical">Angry critical text here.</span>
Angry text here. Critical text here. Angry critical text here.

Classes can be applied to any element, so you could have angry bold text by using:

<b class="angry">Angry text here.</b>
Angry text here.

This makes classes a powerful way of adjusting style. We have been using color a lot here for our style demos, so lets properly cover that topic next.

Chapter contents

Chapter 3 Contents

3.1 CSS Basics Cheat Sheet

A cheat sheet covering the basics of CSS.

3.2 What is CSS

A brief look at what CSS is and how it came to be.

3.3 Setting up Style Sheets

A look at the three different ways to add style to your document.

3.4 Blocks, Spans, and Selectors

Setting the style for different types of elements.

3.5 Classes

An easy way of having multiple styles on the same element type and across different elements.

3.6 Colours

The use of named colors, the RGB color model, and creating RGB colors.

3.7 Hexadecimal color codes

Using hexadecimal color codes and other color models.

3.8 Fonts

Controlling what text looks like.

3.9 Box Model

The box model controls how elements are positioned within their layout box.

3.10 Link styles

Anchor element states and turning a link into a button.

Christmas Bonus

Hunt the Santa logo
A total conversion of Hunt the Webbus with a Christmas Theme.

3.11 Styling lists

Lists can have style applied to their layout, placement, and bullet.

3.12 Styling tables

Tables have a grid as well as rows and columns that can be controlled.

3.13 Webbus project

The project for this chapter is a variation of a classic text game

3.14 Webbus solution

My solution for the Webbus project

3.15 Christmas Total Conversion

Converting the Webbus game into a Christmas game.

← previous section
Blocks, Spans, and Selectors
next section →
Table of Contents