HTML Tutorial
HTML CSS
CSS is how pages look. You can write it inline, in a style tag, or in a separate file.
HTML structures, CSS paints
HTML names the parts of a page. CSS (Cascading Style Sheets) decides how those parts look: color, space, type size, borders, and layout. Keep the two jobs separate in your mind even when both live in the same file.
You can attach CSS in three places. Learn all three. Use the third for anything larger than a sketch.
| Where | How | Best for |
|---|---|---|
| Inline | style on one tag | A one-off test |
| Internal | <style> in <head> | A single page |
| External | <link rel="stylesheet"> | A whole site |
Inline style
The style attribute holds CSS declarations for that element only. Declarations areproperty: value; pairs. Inline styles win over most rules in a stylesheet, which makes them handy for a quick check and messy on a finished page.
Example
<h1 style="color: #0f172a; font-family: Georgia, serif;">Inline heading</h1>
<p style="color: #334155; line-height: 1.6;">
This paragraph uses the style attribute. Change the color and reload the preview.
</p>Internal CSS in the head
A <style> element in <head> holds rules for the whole document. Each rule has a selector (what to match) and a block of declarations (what to apply).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS</title>
<style>
h1 {
color: #0f172a;
font-family: Georgia, serif;
}
p {
color: #334155;
line-height: 1.6;
}
.note {
background: #ecfdf5;
border-left: 4px solid #0d9488;
padding: 0.75rem 1rem;
}
</style>
</head>
<body>
<h1>Lab notes</h1>
<p>Internal CSS styles every matching tag on this page.</p>
<p class="note">The note class is a selector that starts with a dot.</p>
</body>
</html>The StudyGrid HTML editor previews one document. Internal CSS in <head> shows up here. Put the <style> block in the example when you want the preview to match.
External CSS with link
A separate .css file is the usual production setup. One stylesheet can style every page. Link it from <head> with rel="stylesheet" and an href to the file.
Example
<!-- In the HTML file -->
<head>
<meta charset="UTF-8">
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<!-- In styles.css (a separate file on disk) -->
h1 {
color: #0f172a;
}
p {
color: #334155;
}
.note {
background: #ecfdf5;
padding: 0.75rem 1rem;
}CSS files are not loaded in this editor unless the rules are inlined in the HTML you paste. A<link href="styles.css"> in the preview has nothing to fetch. Copy the rules into a<style> tag when you try the example here. Use a real file when you work on your own computer.
Simple selectors
A tag name matches every element of that type: h1, p. A class starts with a dot and matches any element that has that class: .note. You add the class withclass="note" on the tag.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selectors</title>
<style>
h1 { font-size: 1.75rem; }
p { margin-bottom: 0.75rem; }
.note { color: #155e75; background: #ecfeff; padding: 0.75rem; }
</style>
</head>
<body>
<h1>Selectors</h1>
<p>This paragraph matches p.</p>
<p class="note">This paragraph matches p and .note.</p>
</body>
</html>Later you will meet ids (#intro), descendant selectors (article p), and states such as a:hover. Start with tags and classes. They cover most beginner pages.
Which form should you use?
- Inline: a single experiment, then move the rule out.
- Internal: one lesson page or a throwaway mockup.
- External: anything you will reuse. One change updates every linked page.
Cascade means more than one rule can apply. When they conflict, the more specific rule wins, then the later one, then an inline style. You do not need the full algorithm yet. If a style “does nothing,” check that the selector matches and that a stronger rule is not sitting on the same property.
When you want a full CSS track — selectors, the box model, flex, grid, and a stylesheet editor — open the CSS tutorial. That lives at /css and /css/try, not here.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Engineering
A status card with a style tag
A style element in the head (or, in this preview, above the markup) is an internal stylesheet. Rules apply to every matching tag on the page.
Inline style beats a stylesheet on that one element. External .css files are how real sites share one look across many pages. Start here, then move the rules out.
Example
<style>
.ok { color: #166534; background: #dcfce7; padding: 0.6rem; }
.trip { color: #9f1239; background: #ffe4e6; padding: 0.6rem; }
</style>
<p class="ok">Current 0.47 A — within 0.50 A limit</p>
<p class="trip">Current 0.62 A — trip</p>Maths
A formula card
CSS does not know Pythagoras. It only paints the card that holds the formula. Keep the maths in the HTML text so it still exists if styles fail to load.
c = √(a² + b²)
Example
<style>
.card { background: #e0e7ff; padding: 0.8rem; max-width: 16rem; }
</style>
<div class="card">
<h1>Hypotenuse</h1>
<p>3-4-5 triangle: c = 5 m</p>
</div>