CSS Tutorial
CSS Lists
list-style-type, position, and image. Padding on ul/ol is what indents the markers.
Markers are list-style-type
Unordered lists default to discs. Ordered lists default to decimal numbers. CSS changes the marker with list-style-type without touching the HTML. Keep a real ul orol so screen readers still announce a list.
| list-style-type | Shows | Fits |
|---|---|---|
disc | Filled circle | Default ul |
circle | Hollow circle | A nested set |
square | Filled square | A packing list |
decimal | 1, 2, 3 | Default ol |
lower-alpha | a, b, c | Sub-steps |
none | No marker | Nav, cards, custom icons |
Example
<style>
.pack {
color: #0c4a6e;
list-style-type: square;
}
.steps {
color: #0f766e;
list-style-type: lower-alpha;
}
</style>
<h1>Harbor studio</h1>
<ul class="pack">
<li>Clay bag</li>
<li>Tide chart</li>
<li>Booking slip</li>
</ul>
<ol class="steps">
<li>Warm the kiln.</li>
<li>Load the shelves.</li>
<li>Log the firing.</li>
</ol>Padding is what indents the markers
Browsers put markers in the list’s padding (or margin, in older sheets). If you setpadding-left: 0 on a ul and leave the default list-style-position, the discs can hang outside the box or clip. Restore padding when you want bullets inside a Harbor studio card.
Example
<style>
.card {
background: #e0f2fe;
color: #0c4a6e;
padding: 12px 12px 12px 2rem;
border: 2px solid teal;
}
.flush {
padding-left: 0;
background: #f0f9ff;
color: #0c4a6e;
}
</style>
<ul class="card">
<li>Open 8–16</li>
<li>Kiln on Tuesdays</li>
</ul>
<ul class="flush">
<li>Zero padding — markers sit on the edge.</li>
<li>Add padding-left to pull them in.</li>
</ul>A starting indent of about 1.5rem to 2rem leaves room for discs, numbers, and two-digit ordered lists. Preview in /css/try and watch the markers move as you change padding.
list-style-position
outside (the default) hangs the marker in the indent. Wrapped lines of a long item line up with the text, not the bullet. inside puts the marker in the first line of the content box, which can look tidy in a tight card but makes wrapped lines sit under the bullet.
Example
<style>
.out,
.in {
max-width: 22rem;
color: #0c4a6e;
}
.out {
list-style-position: outside;
padding-left: 1.5rem;
}
.in {
list-style-position: inside;
padding-left: 0.5rem;
background: #ccfbf1;
}
</style>
<ul class="out">
<li>Harbor studio keeps the marker outside so wrapped firing notes stay aligned.</li>
</ul>
<ul class="in">
<li>Inside position tucks the disc into the first line of the item.</li>
</ul>Images, shorthand, and nav lists
list-style-image swaps the disc for a small picture. Prefer a simple type, or an inline SVG in the item, over a fragile image URL. The shorthand is list-style: type position image. For a navigation bar, list-style: none plus padding reset is the usual pattern — the items stay a list for assistive tech.
Example
<style>
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline;
margin-right: 1rem;
}
nav a {
color: teal;
}
nav a:hover {
color: #0284c7;
}
</style>
<nav>
<ul>
<li><a href="#hours">Hours</a></li>
<li><a href="#kiln">Kiln</a></li>
<li><a href="#book">Harbor studio book</a></li>
</ul>
</nav>list-style: none does not make the HTML a pile of divs. Keep ul /ol and li. Removing the marker is a visual choice, not a reason to drop the list tags.
Nested lists
Nested ul elements often switch to circle then square in the browser default stylesheet. You can set types yourself so a Harbor studio outline stays consistent. Nested lists need their own padding; the inner list’s indent is added to the outer one.
Next: tables. Rows of data need borders, padding, and zebra stripes more than they need bullets.
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.
Chemistry
A procedure without bullets
list-style: none removes markers. You then owe the reader another way to see order — numbers in the text, or keep ol and style the numbers.
padding-left on ul/ol is what indents markers. Zero padding plus list-style none is a flat stack, good for a nav, bad for a method if you forget numbering.
Example
<style>
ol { padding-left: 1.2rem; }
ul { list-style: none; padding: 0; }
ul li { color: #0f766e; }
</style>
<ol>
<li>Rinse the burette.</li>
<li>Titrate to faint pink.</li>
</ol>
<ul>
<li>Goggles</li>
<li>Coat</li>
</ul>Maths
Steps of a proof as a list
ol is the proof order. CSS should not turn it into a pretty row of icons unless the order is still obvious.
Example
<style>
li { margin: 0.35rem 0; }
</style>
<ol>
<li>Write a² + b².</li>
<li>Substitute 9 + 16.</li>
<li>Conclude c = 5.</li>
</ol>