The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →A short stylesheet can give a plain HTML page a readable text column, comfortable type, and images that stay inside their space. The baseline in this guide is twelve CSS declarations, and it works as a starting point rather than a finished design. It comes from a How-To Geek walkthrough by author Bobby Jack, republished on Yahoo Tech and dated 2026. The author’s own caveat is the right way to read it: “These styles will not necessarily all apply to your design.”
The complete baseline
The original snippet packs several declarations onto each physical line. The version below contains the same twelve declarations, one per line, so each one is easy to find and change.
As an Amazon Associate I earn from qualifying purchases.
html {
box-sizing: border-box;
max-width: 70ch;
margin: auto;
font-size: 1.25em;
color: #333;
line-height: 1.4;
}
* { box-sizing: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
img { max-width: 100%; height: auto; }
a:link { text-decoration: none; }
a:hover { text-decoration: underline; }The count matters because the article’s “12 lines” is really twelve declarations. Compact formatting can make the stylesheet look shorter than it is, and a reader who copies only the first six lines will miss half the rules.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11How each group of rules works
Sizing with border-box
box-sizing: border-box on the html element means that a declared width includes padding and borders. Without it, adding padding to an element with a set width makes the element wider than you specified, which is a common source of layout surprises. The universal selector * { box-sizing: inherit; } passes that setting down so every element uses the same model. Because the rule is inherited, you only need to change it in one place if you later want a different model for a particular component.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The reading column
max-width: 70ch caps the width of the html element, and margin: auto centres it when the browser window is wider than that cap. The article cites typography guidance of 45 to 75 characters per line, which it reports from How-To Geek’s 2026 reference material. Treat that range as a commonly cited guideline rather than a measured standard. The ch unit is based on the width of the “0” character in the current font, so it approximates a character count. With a variable-width font, the number of characters that actually fit will vary from line to line.
The snippet applies the width cap to html rather than to a wrapper element, and it does not reset the browser’s default body margin. Centring behaves as expected in current browsers in the author’s example, but if your page has a body with its own padding or a fixed-width header, you will need a wrapper element and a test of its own.
Type size and line height
font-size: 1.25em scales text relative to the browser’s base size. The article’s example takes the common 16px default and produces 20px. The result depends on each reader’s browser settings, so 20px is an illustration, not a fixed value. line-height: 1.4 adds vertical space between lines, which the article presents as a compromise. The author says the best value depends on the typeface, line length, and paragraph content, so the 1.4 figure is a reasonable place to begin, not a rule.
Free tools Windows power users keep installed
One-click scans. No signup required.
Headings
The rule h1, h2, h3, h4, h5, h6 { font-family: sans-serif; } sets headings to a sans-serif face while the body keeps the browser’s default serif. This creates visual contrast between headings and text. It is a stylistic choice that the article offers as one option. Nothing about HTML or accessibility requires it, and if your brand uses a different typeface, change the family rather than keeping the generic one.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Images
img { max-width: 100%; height: auto; } does two jobs. The width limit stops an image from running past its container when the column is narrower than the image’s natural size. The height: auto value keeps the image’s proportions when it scales down, so it is not squashed. Together they handle most responsive image overflow in simple pages. They do not control how an image is cropped, and they do not prevent layout shift before the image loads, which is a separate concern covered by setting explicit dimensions in the HTML.
Links
The last two rules remove the underline from links at rest and restore it on hover. The author notes that links keep the browser’s default blue colour, and that keyboard users still see the browser’s default focus outline. That focus outline is the most important thing to keep. Removing underlines is a design decision that makes links harder to spot in running text, so check whether a reader can still tell a link from ordinary text before you ship the change.
Which values to change first
The twelve declarations are not equally likely to need adjustment. The table below lists the values most often worth revisiting and the circumstances that justify changing them.
| Declaration | Starting value in the article | Change it when |
|---|---|---|
max-width on html |
70ch | Your content is code, tables, or wide forms that need more room, or your typeface is very wide or very narrow. |
font-size |
1.25em (20px from a 16px base in the article’s example) | Your body text is dense, or your audience commonly uses a larger or smaller browser text size. |
line-height |
1.4 | Paragraphs are long or set in a condensed face, which may call for more or less leading. |
color |
#333 | Your page uses a different palette, or you need a stronger contrast value for your text and background. |
font-family on headings |
sans-serif | Your typography system names a specific typeface for headings. |
text-decoration on links |
none at rest; underline on hover | Links need to be identifiable without relying on colour alone, which is common in body copy. |
Applying the baseline to a page
The following sequence applies the rules to a simple HTML document and checks that they work as intended.
Best Value
- Create a file named
index.htmlwith aheadcontaining atitleelement and abodycontaining a few headings, paragraphs, one image, and two or three links. - Place the twelve declarations inside a
styleelement in thehead, or save them asstyle.cssand link that file with alinkelement. Either works for a single page. - Open the file in a browser. In Chrome or Edge, use the DevTools panel (F12 or Ctrl+Shift+I) and select the
htmlelement in the Elements tab to confirm that the computedmax-widthis about 70 characters of the current font. - Widen and narrow the browser window. The text column should stay centred and should stop widening once it reaches the cap. An image wider than the column should shrink rather than overflow.
- Hover over a link and confirm that the underline appears. Then press Tab to move focus through the links and confirm that the browser’s focus outline is still visible.
- Change the browser’s default text size in its settings and reload. The page should remain readable, and the headings and body text should scale together.
Accessibility checks the article does not perform
The article reports two contrast ratios it calculated. Dark grey #333 on white is 12.63:1, and black on white is 21:1. Both figures are well above the 4.5:1 minimum that the WCAG 2 standard sets for normal body text at its AA level, so the default colour choice is safe for most text. The article also mentions a 7:1 figure without naming the conformance level or the text conditions it applies to. In WCAG 2, 7:1 is the enhanced (AAA) threshold for normal text, but the source does not make that distinction, so consult the WCAG text directly before treating 7:1 as a requirement for your project.
The article is a walkthrough, not a browser test, a user study, or an accessibility audit. Before publishing a site built on these rules, check focus visibility with the keyboard, confirm link identification without underlines, and test the page with your own content, including long words and wide tables, since these are the cases the twelve lines do not address.
Where the baseline ends
The stylesheet is a base for simple documents such as a personal page, a short article, or a project README converted to HTML. It does not style navigation, forms, code blocks, tables, dark mode, or print output, and it leaves the browser’s default body margin in place. Once those components appear, add rules for them in the same file so the spacing and type scale stay consistent. The safest habit is to keep the twelve declarations, change only the values that your content and audience require, and treat every change as a deliberate decision rather than a default that came with the snippet.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
