Spelchan.com Logo

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

Chapter 3.4: Blocks, Spans, and Selectors

As was mentioned in the previous chapter, elements can be blocks in which they take up the entire available width of area in which they reside. There are also inline blocks which they only take up the space that they occupy. For working with styles, you may want to apply a style to a block or an inline block, so to make that easier, HTML has special tags for this purpose. The <div> tag, short for division, is for creating a block inside another block. For dealing with inline text, we have the <span> tag.

Red with blue text div
Blue with yellow text div
Green with orange text div
Red with blue text span Blue with yellow text span Green with orange text span

The <span> and <div> tags tend to use classes, which we will discuss in a later section, but are useful in the rare case that you need a unique style and want to use inline styles. The image above can be created with the following code:

<div style="color:blue;background:red">Red with blue text div</div>
<div style="color:yellow;background:blue">Blue with yellow text div</div>
<div style="color:orange;background:green">Green with orange text div</div>
<span style="color:blue;background:red">Red with blue text span</span>
<span style="color:yellow;background:blue">Blue with yellow text span</span>
<span style="color:orange;background:green">Green with orange text span</span>

By default, elements tend to be one of these two types, but CSS does allow this to be changed by changing the style of that element. As was hinted at in the previous section, we can change the style of any element on a page. This is done by writing a CSS declaration which has the following format:
Selector {
  Attribute: value;

Selectors are simply a pattern to determine which elements are affected by the style. More specific styles take precedence over less specific styles with classes and ids being the most specific. In the case where there are two styles with the same specificity, then the style that was specified later takes precedence.

You can set styles for multiple tags at the same time by using , between the different elements. So if you wanted both bold and italic text to be blue, you would use the following: b, i {
  color: blue;
So the code:
<b>bold</b> or <i>Italic</i> text.
would result in bold or italic text.

It is also possible to select every element using the * selector, but this is considered very bad practice and should only be used for resetting the style.

It is also possible to control the style of an element contained within another element. This is done by having the container element followed by a space then the element you want the style to change. For instance, assuming we had bold and italic being blue, but any bold within a span should be red, we would use the following declaration:
span b {
  color: red;

And to test this use the code:
Testing <b>bold</b> and <i>italic</i> as well as inside a span <span><b>bold</b> and <i>italic</i>.</span>
Would result in: Testing bold and italic as well as inside a span bold and italic.

We will touch upon even more specific ways of selecting an element when we discuss the relevant uses, such as classes in the next section.

The style attributes are what parts of the style we are going to change. There are numerous attributes, with more being added as the standard evolves. We will discuss the more commonly used attributes throughout this book and should cover most things you would want to know about, but for a complete list of the currently supported attributes, check out https://developer.mozilla.org/en-US/docs/Web/CSS/Reference.

The value applied to the attribute is dependent on what the attribute is setting. We will go into more details of the values when we cover the different attributes. There is, however, size related attributes, which are common among many attributes. These are used by having a number followed by the size type to use with the most common being:

  • px - pixels the dots that make up your display
  • pt - point, typesetting standard, 1/72 of an inch
  • % - percentage of the block item is in
  • rem - Root Element M, relative to how wide an M is on the root element
  • em - Elements M, relative to width of M on current element
  • cm - metric centimeter (10 millimeters)
  • mm - metric millimeter
  • in - imperial Inch

note that pt, cm, mm, inch are based on display settings, so may not be accurate, and some devices treat pixels as 1/96 inch but some devices will use multiple pixels to represent a pixel unit.

Modifying tags is great for an overall look, but often, we want to support multiple styles within the same tag. This is where classes come into play.

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
Setting up Style Sheets
next section →
Table of Contents