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
<span style="color:red">Critical text here</span>
<!-- Setting critical text using a class -->
<span class="critical">Critical text here</span>
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.
color: red;
background: #EBB;
}
.critical {
color: darkred;
}
And to use thr classes
<span class="critical">Critical text here.</span>
<span class="angry critical">Angry critical text here.</span>
Classes can be applied to any element, so you could have angry bold text by using:
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
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 →
Colours Table of Contents