Spelchan.com Logo

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

Chapter 3.1: CSS Basics Cheat Sheet

As CSS gives you control over how a document looks, this chapter’s cheat sheet is nicer looking than the HTML Basics cheat sheet. It also makes use of a css file so there are two files required for the cheat sheet.

The purpose of the cheat sheet is to give you a summary of the chapter and to allow readers who are already familiar with the material to review the material and decide if they want to skip the chapter. I urge those readers to attempt the project just to make sure they really do understand the material but that is up to you.

The cheat sheet is located here and is in my GitHub repository located at https://github.com/BillySpelchan/FromScratchHTML_CSS_JS.

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
Chapter contents
next section →
What is CSS
Table of Contents