Essential CSS: A Guided Tutorial Using Hangman Stage 1

This page introduces the essential CSS concepts and rules used in our Hangman Stage 1 project. You'll learn how CSS styles your web pages, how selectors and properties work, and how Bootstrap 5 and your own custom styles combine for a polished look.

1. What is CSS?

CSS (Cascading Style Sheets) is a language for describing how HTML elements should look on the screen. CSS lets you change colors, fonts, spacing, layout, and much more.

/* This is a CSS comment */
selector {
    property: value;
    another-property: another-value;
}

2. How CSS is Used in Hangman Stage 1

• Bootstrap CSS: We use Bootstrap 5 for most of the layout and button styles. This is included with a <link> tag in the <head> of the HTML.
• Custom CSS: We add our own styles in a separate file (like hangmanStyles1a.css) to customize the look of the game.
• Inline CSS: (Optional) You can also use <style> tags directly in your HTML for quick customizations.

3. Selectors and Properties

CSS uses selectors to target HTML elements. You can select by tag name (div), class (.myClass), or id (#myId).

/* Select by id */
#wordDisplay {
    background-color: bisque;
    font-family: monospace;
}

/* Select by class */
.btn-primary {
    background-color: #0d6efd;
    color: #fff;
}

/* Select by tag */
button {
    border-radius: 0.25em;
}

4. Key CSS Used in Hangman Stage 1

Here are some of the most important custom styles from our project:

#wordDisplay {
    background-color: bisque;
    font-family: monospace;
    white-space: nowrap;                /* Keeps the word on one line */
    overflow-x: auto;                   /* Adds horizontal scroll if needed */
    font-size: clamp(1.2rem, 8vw, 2.5rem); /* Responsive font size */
    letter-spacing: 0.3em;              /* Space between letters */
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0.5em;
}

#letterButtons button {
    margin: 0.2em;
    width: 2.5em;
    height: 2.5em;
    font-size: 1.2em;
    background-color: lightgreen;
}

/* Used (disabled) letter buttons: higher contrast */
#letterButtons button:disabled {
    background-color: #888 !important;   /* Darker background */
    color: #fff !important;              /* White text */
    opacity: 1 !important;               /* Remove Bootstrap's default dimming */
    border-color: #444 !important;       /* Darker border */
}

5. Responsive Design

Responsive CSS makes your site look good on all devices. We use:

• font-size: clamp(1.2rem, 8vw, 2.5rem); — The font size grows or shrinks with the screen size.
• max-width: 100%; — Prevents elements from overflowing their container.
• Bootstrap's grid and utility classes (like container, py-5, mb-4) for spacing and layout.

6. Bootstrap vs. Custom CSS

• Bootstrap: Handles most layout, button, and typography styles. Example: btn btn-primary, container, text-center.
• Custom CSS: Used for game-specific tweaks, like coloring the word area or customizing button states.

<button class="btn btn-primary">Restart Game</button>
<a class="btn btn-outline-secondary" href="hangmanChatlogStg1.html">View AI Chatlog</a>

7. Tips for Beginners

• Use selectors to target the elements you want to style.
• Use properties to change how things look (color, size, spacing, etc.).
• Use Bootstrap classes for quick, professional-looking layouts and buttons.
• Experiment! Try changing values and see what happens.

8. See It in Action

Explore the game, AI chatlog, and HTML guide to see how CSS and HTML work together in a real project!