Understand the idea
Start with a real question The words on a revision sheet can be correct and still be exhausting to read. A line runs across the whole screen, the button has almost no space around its label, and the heading disappears into the paragraph below it. CSS lets you improve those experiences without rewriting the information.
In this lesson, you are the person making a study page comfortable to use. We will work on readable text, a recognisable heading and a button with room to breathe. The goal is not to collect random properties. It is to make a change, predict the effect, and explain why the browser applied it.
Keep the preview and the rule in view together. When you change a value, name the element that should change and the visible difference you expect. If nothing happens, you have a concrete prediction to investigate rather than a vague feeling that CSS is broken.
Understand the idea
The job of a stylesheet CSS describes how HTML elements should be presented. It can change colours, text, spacing and layout without replacing the content itself. A useful first distinction is between selecting an element and styling it: the selector identifies the elements, while declarations describe the changes.
A rule such as p { color: navy; } selects paragraphs. Inside its braces, color is a property, navy is a value and the colon separates them. The semicolon ends the declaration. Keep these punctuation marks consistent even when a short final declaration could omit its semicolon; predictable source is easier to debug.
Our CSS practice editor supplies a sample page with a heading, paragraph, button and list. Enter CSS, not an HTML document, in this editor. Later lessons will explain how real project files connect HTML and CSS.
See how it works
Example 1: change text and background colours CSS exampleRead the code, then try a change.
Try this example
body {
background-color: white;
color: #1e293b;
}
h1 {
color: #0f766e;
} Expected result: the sample page has a white background, dark slate text and a teal heading. The heading has its own color declaration; other text can inherit the colour supplied by an ancestor. A six-digit hexadecimal colour describes red, green and blue components. You do not need to memorise colour codes to understand the rule's structure.
Predict what happens if you remove the h1 rule. Run that version before restoring it. The heading should no longer receive the explicitly supplied teal colour from this stylesheet. Notice that browsers also supply default styles, so an element can retain a default size or weight even when your CSS does not specify one.
See how it works
Example 2: make a paragraph comfortable to read CSS exampleRead the code, then try a change.
Try this example
p {
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
max-width: 60ch;
} Expected result: the paragraph uses a local sans-serif font, an 18-pixel font size and more generous line spacing. Its line length is capped at roughly sixty zero-character widths. Arial, sans-serif is a fallback list, not an instruction to download a font.A unitless line height scales with the element's font size.
Reading comfort is not the same as making every element large. Keep paragraph text legible, leave enough contrast against the background and avoid forcing readers to scan extremely long lines. Device width still matters: max-width sets an upper bound rather than demanding that a narrow preview become wider.
See how it works
Example 3: inspect a visible box CSS exampleRead the code, then try a change.
Try this example
button {
padding: 12px 18px;
border: 2px solid #0f766e;
border-radius: 6px;
background-color: white;
color: #0f172a;
} Expected result: the existing sample button gets internal space, a visible teal border, slightly rounded corners and dark text. Padding lies between content and border. It does not add distance outside the border. The first padding value applies vertically and the second horizontally. We will examine the complete box model, including margin and sizing, in its own lesson.
Spot the mistake
Debug one declaration at a time If a rule appears not to work, first confirm that the selected element exists. Next check the braces, property spelling, colon, value and semicolon. font-size: 18; is not the intended length: write font-size: 18px;.A number is not automatically a valid CSS value for every property. Different properties accept different kinds of values.
Avoid changing six rules at once to guess at a problem. Disable one declaration, observe the effect and restore it. Later, browser inspection tools will help identify which rules match and which declarations win. For now, small experiments establish that CSS is a set of explicit instructions, not a collection of visual guesses.
Your turn
Independent exercise Style the sample page as a simple revision sheet. Give the heading a distinct readable colour, limit paragraph width, and give the button both padding and a border. Do not use external fonts, images or imports. Explain which selector affected each element.
Show hint Write separate rules for body, h1, p and button. Change appearance with declarations inside braces, not by typing HTML into the CSS editor.
Show solution A valid solution can combine the three worked examples. Use different readable colours if desired. Check that the paragraph remains readable in the narrow preview and that the button's text is not hidden by its background.
Understand the idea
Separate a matching rule from an inherited value Inheritance and direct styling can produce similar pictures, but they are different explanations. A paragraph can inherit a body text colour while a heading gets its colour directly from a heading rule. Do not memorise the screenshot: trace the selector and property responsible for each element. In the example below, changing the heading colour does not edit the body rule. A useful experiment changes one property at a time, predicts which elements should respond, and compares that prediction with the actual preview.
Understand the idea
Slow down at the important part Understand the idea
Think of each rule as a precise instruction Read a CSS rule in two parts. The selector answers "which elements?" The declarations answer "which aspects of their appearance?" In a paragraph rule, colour and line-height are different decisions applied to the same selected elements. Changing the colour does not change which paragraphs the selector matches.
There is a useful debugging order here. First check that you are editing CSS rather than pasting a complete HTML document into this language's editor. Next check the selector spelling. Then check the braces, colon, property name, value and semicolon. Finally consider whether another applicable rule wins. Work from the smallest explanation rather than replacing the entire stylesheet immediately.
Understand the idea
Readability is something you can test A paragraph can have a sensible font size and still feel crowded when the lines sit too close together. A comfortable line-height gives the eye room to travel from the end of one line to the start of the next. A maximum width limits the length of each line on a large display without demanding that a small display become wider.
Resize the preview rather than assuming the layout is good because it looks acceptable at one width. A fixed width and a maximum width are not the same promise. A fixed width can insist on space the device does not have; a maximum width is a ceiling. Keep the page usable when the available space is below that ceiling.
Understand the idea
Space has an inside and an outside Picture a button as content surrounded by padding and a border. Padding belongs inside that border. Margin belongs outside it. If the label feels squeezed against the border, increasing outside space will not create the missing internal room. State the problem before choosing the property.
Use a visible border while experimenting. Increase padding and watch the clickable shape grow around the label. Then change margin and watch the relationship to neighbouring content instead. You are learning to recognise the effect, not just remember a definition.
Your turn
Build it, change it, explain it Style the revision sheet in four passes. First make the body text readable against its background. Next distinguish the h1. Then adjust paragraph size, line-height and maximum width. Finally improve the button's padding and border. After each pass, say what became easier for the reader.
Make one controlled mistake: remove the unit from a nonzero font-size value. Observe which declaration stops taking effect and restore valid syntax. Do not change the selector at the same time, because that would make it harder to identify the cause.
Repeat the spacing experiment with a narrower preview. Your explanation should distinguish readable contrast, internal spacing and line length rather than describing everything as "making it look nice." Those distinctions will help you debug much larger stylesheets later.
Understand the idea
What this makes possible A styled page can now communicate more clearly. The next challenge is to keep that reasoning when several rules apply at once. Before adding more properties, practise identifying the selector, the property and the winning value in a small rule you can explain.
