CSS Tutorial
CSS How To
Three places to put CSS: inline on a tag, a style element in the head, or a separate .css file.
Three places to put CSS
The same declarations can live on a tag, in a <style> block, or in a file the page links to. Learn all three so you can read other people’s HTML. For a real site, put rules in a stylesheet file.
| Where | How | Best for |
|---|---|---|
| Inline | style attribute on one tag | A one-off test |
| Internal | <style> in <head> | A single page sketch |
| External | <link rel="stylesheet"> | A whole site |
Inline: the style attribute
The style attribute holds CSS declarations for that element only. There is no selector — the tag is already chosen. Declarations are still property: value; pairs, separated by semicolons.
Example
<style>
p {
color: #475569;
}
</style>
<h1 style="color: teal;">Harbor studio</h1>
<p>Open 8–16.</p>Inline style wins over most rules in a stylesheet. That makes it handy for a quick check and messy on a finished page: you cannot reuse it, and you have to hunt tags to change a color.
Internal: a style element in the head
A <style> element in <head> holds rules for the whole document. Selectors work as usual. One block can style every heading, class, and id on that page.
Example
<style>
h1 {
color: teal;
}
p {
color: #475569;
}
.hours {
color: #0284c7;
font-weight: 700;
}
</style>
<h1>Harbor studio</h1>
<p class="hours">Open 8–16.</p>
<p>Internal CSS styles every matching tag on this page.</p>In these chapters the <style> block sits next to the HTML so the live preview can paint. On a full document, put it in <head>.
External: link a stylesheet
A separate .css file is the usual production setup. One file can style every page. In HTML, point to it from <head> with <link rel="stylesheet" href="styles.css">. The file itself contains only rules — no <style> tag, no markup.
Example
<style>
h1 {
color: teal;
}
p {
color: #475569;
}
.hours {
color: #0284c7;
font-weight: 700;
}
</style>
<h1>Harbor studio</h1>
<p class="hours">Open 8–16.</p>
<p>On a real site these rules live in styles.css. The HTML only links that file.</p>The HTML in <head> is a link, not a style element:<link rel="stylesheet" href="styles.css">. The file styles.css holds the same rules you see in the example — no tags, no braces around the whole sheet, just selectors and declarations.
A <link href="styles.css"> in a preview has nothing to fetch unless that file is on the server. These examples keep the rules in a <style> block so you can see the result. On your computer, put the same rules in styles.css and link it.
Try CSS uses the stylesheet pane
StudyGrid’s live editor at /css/try already works like an external stylesheet. CSS goes in the stylesheet pane. HTML goes in the markup pane. When you click Try it in CSS under an example, the <style> contents move into that pane and the tags become the demo page.
That editor is /css/try. Edit a property on the left. The harbor page on the right updates.
Treat the stylesheet pane as styles.css. Treat the HTML pane as index.htmlthat has already been linked. You do not type <link> there — the preview applies the CSS for you.
Which place wins
Inline style beats an internal or external rule for the same property. Between two stylesheets, source order and specificity decide. You will unpack that in the cascade and specificity chapters. For now: keep CSS out of attributes unless you are testing one tag.
- Sketch on one page with
<style> - Ship a site with
<link rel="stylesheet"> - Practice here in the stylesheet pane at
/css/try
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.
Engineering
Internal sheet for a logger card
Three places: inline style on the tag, a style element, or a .css file. Inline wins on that element. A file is how twenty pages share one look.
This preview uses a style tag because the editor is one buffer. On a real site, move the same rules into logger.css and link them from head.
Example
<style>
body { font-family: Georgia, serif; }
.ok { color: #0f766e; }
</style>
<p class="ok">logger v1: ok</p>
<p style="color:#0369a1">Inline only on this line.</p>Chemistry
Why the bottle card is not all inline
Five bottles with the same warning should share a class, not five copies of style="color:red". Internal or external CSS is the reusable form.
Example
<style>
.acid { color: #b91c1c; }
</style>
<p class="acid">HCl</p>
<p class="acid">H2SO4</p>