Quick Links

GitHub LMS Syllabus All Notes
Past Lesson Note

This note is from 3 weeks ago. You're viewing content from a previous lesson.

Daily Note for October 6, 2026 Past Lesson

We will review your test

Lesson 4: Style your generator with CSS

Time: 60 minutes

Your button now asks Flask for a result and displays it on your page. Today, you will use CSS to improve your page’s appearance and make it easier to use.

These skills will help you understand AdminLTE later.

Technology Its responsibility
HTML Describes the page’s content and structure.
CSS Controls its colours, spacing, fonts, and layout.
JavaScript Handles interactions in the browser.
Python and Flask Process requests and generate results on the server.

By the end of this lesson, you should be able to:

  • Link a CSS file to your HTML page.

  • Use element, class, and ID selectors.

  • Change colours, spacing, text, and button appearance.

  • Explain the difference between margin and padding.

  • Check that your generator still works after styling it.

Step 1: Start from a working application — 10 minutes

1.1 Open your existing my_first_web_app folder in VS Code.

1.2 Make a backup of app.py and your static folder before replacing anything.

1.3 If you need the completed Lesson 3 code, copy app.py and the static folder from lesson3_complete into your project. Keep your existing .venv folder.

The supplied example uses item as the JSON key in Python and data.item in JavaScript.

1.4 Open a terminal and activate your environment.

On macOS:

source .venv/bin/activate

On Windows Command Prompt:

.venv\Scripts\activate.bat

1.5 Start Flask:

python -m flask --app app run --debug

1.6 Open:

http://127.0.0.1:5000/static/index.html

If you use port 5001, add --port 5001 to your startup command and use 5001 in your browser.

Click Generate several times. A random result can repeat; repeated text does not necessarily mean the button has stopped working.

Checkpoint: Your button displays a generated item. If it does not, ask for help before adding CSS.

Step 2: Connect a stylesheet — 10 minutes

2.1 Inside static, create a file named style.css.

Your files should now include:

File Location
app.py Project folder
index.html Inside static
script.js Inside static
style.css Inside static

2.2 In index.html, add this line immediately before :

 

This tells the browser where to find your stylesheet.

2.3 Enter the following code in style.css:

body {
    font-family: Arial, sans-serif;
    background-color: #eef2f7;
    color: #1f2937;
    line-height: 1.6;
    margin: 0;
    padding: 24px;
}

h1 {
    color: #1e3a8a;
}

2.4 Save both files and hard refresh your browser:

  • Chrome on macOS: Command + Shift + R

  • Chrome on Windows: Ctrl + Shift + R

You should see a pale background, a different font, and space around your content.

Read this rule:

h1 {
    color: #1e3a8a;
}
Part Meaning
h1 The selector identifies which elements to style.
color The property identifies what to change.
#1e3a8a The value specifies a dark blue colour.
{ ... } Braces contain the style declarations.
; A semicolon ends a declaration.

Checkpoint: Point to a selector, property, and value. Identify the HTML line that connects your stylesheet.

Step 3: Group your content in a card — 10 minutes

3.1 In index.html, add this line immediately after :

<link rel="stylesheet" href="/static/style.css">

3.2 Add this closing tag immediately before your existing

The

element identifies the page’s main content. The class attribute gives CSS a way to select it.

 

3.3 Add this rule at the bottom of style.css:

.card {
    background-color: white;
    max-width: 640px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
}

3.4 Save and refresh.

Your content should appear inside a centred white card.

Property Purpose
max-width Limits the content width while allowing it to become narrower.
margin Controls space outside the border. Here, auto centres the card horizontally.
padding Controls space between the content and the border.
border Adds a line around the card.
border-radius Rounds its corners.

3.5 Change the card’s padding from 24px to 40px.

Predict what will change, then save and refresh. Restore it to 24px after checking.

Checkpoint: Explain why the CSS selector is .card, but the HTML says class="card" without a dot.

Step 4: Style your button and result — 15 minutes

4.1 Add these rules at the bottom of style.css:

button {
    background-color: #1e40af;
    color: white;
    font-size: 18px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

button:hover {
    background-color: #172554;
}

button:focus-visible {
    outline: 3px solid #111827;
    outline-offset: 4px;
}

#result {
    background-color: #dbeafe;
    padding: 16px;
    border-radius: 8px;
    font-size: 22px;
    font-weight: bold;
}

4.2 Save and refresh.

4.3 Move your pointer over the button. Its background should become darker.

4.4 Click the button. Your generated result should appear in the styled result area.

4.5 Press Tab to move keyboard focus through the controls. When the button has focus, you should see an outline. Press Enter to activate it.

Read the selectors:

Selector What it selects
button Every button element.
.card Elements with class="card". A class can be reused.
#result The element with id="result". An ID should be unique on the page.
button:hover A button while the pointer is over it.
button:focus-visible A button when a visible focus indicator is needed, typically during keyboard navigation.

Keep the IDs generate-button and result unchanged. Your JavaScript uses them to find the elements.

4.6 Personalise three things:

  1. Change the heading colour.

  2. Change the card’s corner rounding.

  3. Change the result text size.

For each change, predict its effect, save, refresh, and compare.

Keep the text easy to read and the button clearly visible against its background.

Checkpoint: Your page has a styled button and result area. Clicking the button still generates an item.

Step 5: Test and explain — 10 minutes

5.1 Ask a partner to test your application.

Test Expected result
Click Generate several times A generated value appears; random repeats are possible.
Move the pointer over the button The button becomes darker.
Navigate using Tab The selected button has a visible focus outline.
Activate the focused button with Enter The generator runs.
Make the browser window narrower The card fits within the window at a normal phone-sized width.
Follow the generator data link JSON still appears at /api/generate.

5.2 Create lesson4_notes.txt and answer:

  1. Describe the purpose of CSS.

  2. Identify the selector that styles the result paragraph.

  3. Explain the difference between margin and padding.

  4. Predict what would happen if the stylesheet link were removed.

  5. Explain one design choice you made to help the user.

5.3 Show your teacher your working page and your answers.

If something goes wrong

Problem What to check
No styles appear Check style.css and the link /static/style.css. Save both files and hard refresh.
Only the card styling is missing Check class="card" in HTML and .card in CSS.