CSS Tutorial
CSS Introduction
CSS paints HTML. It sets colour, space, type, and layout. The tags stay the meaning; the stylesheet is the look of a lab card or a clinic form.
What is CSS?
CSS stands for Cascading Style Sheets. It is not a programming language. It does not loop or calculate kinetic energy. It styles a document so a browser knows the heading is teal, the card has padding, and the row of buttons sits in a line.
HTML is the skeleton: headings, paragraphs, links. CSS is the paint and the spacing. JavaScript is behavior. A lab reading and a clinic warning use the same tags; CSS is what makes one look like a notebook and the other like an alert. Learn CSS second, right after HTML.
A first rule
Copy this into the live preview. Change teal to navy and watch the heading.
Example
<style>
h1 {
color: teal;
}
p {
color: #475569;
}
</style>
<h1>Ammeter</h1>
<p>I = 0.45 A</p>Click Try it in CSS under the example. That opens /css/try — a live page preview with a stylesheet pane.
What CSS is for
- Color and contrast on text and backgrounds
- Type: font, size, line-height
- Space: margin, padding, gap
- Layout: flex, grid, position
- Motion: hover, transition, a little animation
Structure (what the pieces are) stays in HTML. CSS should not be how you invent a heading. Use<h1>, then style it.
Rules, selectors, declarations
A CSS rule has a selector and a declaration block. The selector picks elements. Inside the braces, each declaration is a property, a colon, a value, and a semicolon.
Example
h1 {
color: teal;
font-size: 2rem;
}h1 is the selector. color and font-size are properties.teal and 2rem are values. The next chapter is the syntax in more detail.
Cascade means later can win
When two rules target the same element, CSS does not throw an error. It picks a winner using origin, specificity, and source order. That is the cascade. You will use it on every page, even when you do not name it.
Example
<style>
p { color: gray; }
p { color: teal; }
</style>
<p>This paragraph is teal — the second rule wins.</p>What to do next
Learn the syntax of a rule, then selectors, then the three places you can put CSS. After that the box model — margin, padding, border — is the idea every layout sits on.
| Chapter | You will be able to |
|---|---|
| Syntax | Write a valid rule |
| Selectors | Target a tag, class, or id |
| How To | Put CSS in a file, not only inline |
| Box Model | Count width including padding |
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Physics
Paint a lab reading without changing the tags
CSS does not invent a heading. HTML already said this is an h1 and a paragraph. CSS only paints: teal for the title, slate for the unit line.
That split is the whole web stack at this scale. Change the colour and the document outline stays the same. Screen readers still hear a heading.
I = Q / t
Example
<style>
h1 { color: #0f766e; }
p { color: #334155; }
</style>
<h1>Ammeter</h1>
<p>I = 0.45 A</p>Biology
Fever copy that still reads as a heading
A clinic page can look urgent in CSS and still be honest HTML. colour is appearance. h1 is meaning. Never replace a heading with a big red paragraph.
Example
<style>
h1 { color: #9f1239; }
p { color: #44403c; }
</style>
<h1>Fever protocol</h1>
<p>Oral 38.4 °C — treat as fever.</p>