Styling with CSS

Making the application legible and navigable with a stylesheet

Concepts

CSS separats content from presentation
- Explain what "separation of concerns" means in the context of HTML and CSS
A CSS rule consists of a selector (which elements it targets), a property (what aspect to change), and a value (what to change it to)
- For example, p { color: red; } makes all paragraphs red
- Show me examples of CSS rules using a tag selector, a class selector, and an ID selector
Specificity determines which rule wins when multiple rules apply to the same element
- An ID selector beats a class selector beats a tag selector
- Give me an example where two CSS rules conflict and explain which one wins and why
The box model describes the space every element occupies
- Content area, then padding (inside), then border, then margin (outside the border)
- Misunderstanding this is the most common reason elements do not line up as expected
Flexbox is a layout mode that arranges an element's children in a row or column and controls how they grow, shrink, and align relative to each other
- Show me how to use Flexbox to put three navigation items in a horizontal row with space between them
A static asset is a file (such as an image or CSS) served directly by the server without modification
- The browser caches it separately from the HTML pages
- How do I configure Litestar to serve a CSS file as a static asset?
Focus styles (the visible outlines around focused elements) are required for keyboard navigation
- Removing them breaks accessibility for users who do not use a mouse
- What sort of users don't use a mouse?

Experimenting with CSS

Use an internal stylesheet for experiments
- Add an internal stylesheet to this HTML page that I can use to experiment with CSS
Prompt the LLM to change the following (in order):
- Font size for everything
- Font size for just H2 headings
- Background color for H2 headings
- Spacing before and after H2 headings
- Why might an LLM write specific pixel values instead of CSS variables?
Prompt the LLM to use CSS variables for these changes
- Rewrite these CSS rules to use CSS variables for all color and spacing values

A stylesheet for the application

Prompting the LLM to write a minimal stylesheet
- Readable typography
- A nav bar
- A table that does not strain the eyes
- Write a minimal CSS stylesheet for a web application with readable typography, a navigation bar, and a clean table style
Serving the file as a static asset from Litestar
- Show me what happens if Litestar is not configured to serve static files properly: what error message do I get and how do I fix it?

Layout with Flexbox

Flexbox as the least confusing layout tool for someone who has never touched CSS
- Explain Flexbox to someone who has never used CSS layout before
Putting navigation items in a row
- Write CSS to put navigation items in a horizontal row using Flexbox
Centering the main content
- Center the main content area of the page horizontally
Keeping the footer at the bottom
- Write CSS to keep the footer at the bottom of the page even when the page content is short

Review what the LLM produced

Common LLM habits
- Excessive specificity
- Magic pixel values
- Missing focus styles for accessibility
- Review this CSS stylesheet for overly specific selectors, unexplained pixel values, and missing focus styles

Check for Understanding

What is the difference between padding and margin in the CSS box model?

Padding is the space between the element's content and its border; it shares the element's background color. Margin is the space outside the border between the element and its neighbors. Collapsing margins (where two adjacent vertical margins merge into one) is a common source of unexpected spacing.

If two CSS rules both target p elements—one with color: red and one with color: blue—which one applies, and why?

It depends on specificity and source order. If both rules have equal specificity (both use a plain tag selector), the one that appears later in the stylesheet wins. If one uses a class selector (e.g., .highlight { color: blue; }) it has higher specificity and wins regardless of order.

What does display: flex do to the children of an element?

It makes the element a flex container, which changes how its direct children are laid out. By default, children are placed in a row from left to right, and Flexbox controls how leftover space is distributed and how children align along the cross-axis. Children that would normally stack vertically (block elements) now sit side by side.

Why does the stylesheet need to be served from a route (or as a static file), rather than just linked as a file path?

A web browser cannot read files directly from the server's disk; it can only request URLs. The server must respond to the stylesheet's URL by sending the file's contents with a Content-Type: text/css header. Litestar's static files feature registers a URL prefix (typically /static/) that maps to a directory on disk.

Exercises

A color rule with no effect

The following CSS is supposed to make the page heading red, but has no visible effect. Find the bug and fix it without asking the LLM first, then reload the page to confirm the heading is red. Once it works, prompt the LLM to explain why this particular mistake is especially hard to spot.

h1 {
    font-color: tomato;
}

A style that has no effect

The following snippet is supposed to highlight error messages with a red background, but the paragraph looks completely unstyled. Find the bug and fix it without asking the LLM first. Then prompt the LLM to explain what strategy it would use to catch this kind of mistake before it reaches users.

<style>
.warning {
    background-color: #ffcccc;
    color: darkred;
}
</style>

<p class="error">File could not be saved.</p>

Audit for accessibility

Run the application and navigate through it using only the keyboard (Tab to move between links and buttons, Enter to activate them). Note every place where the focused element is not clearly visible. Ask the LLM to add focus styles to the stylesheet to fix each one.

Add a dark mode

Ask the LLM to add a dark-mode variant to the stylesheet using CSS custom properties (variables) for colors and the prefers-color-scheme: dark media query. Test it by changing your operating system's appearance setting.

Spot the magic numbers

Find every hard-coded pixel value in the generated stylesheet (e.g., padding: 16px or font-size: 14px). For each one, prompt the LLM to replace it with a named CSS variable and add a comment explaining what the value controls and why that specific number was chosen. Are its explanations reasonable?

Responsive layout

Ask the LLM to make the navigation bar collapse to a vertically stacked layout on screens narrower than 600px using a CSS media query. Test it by resizing the browser window or by using the browser's developer tools to simulate a mobile screen. Note any elements other than the nav that also need adjustment.