How to Make a Website: Part II, Styling and CSS

In Part II, you’ll use CSS to control how an existing web page looks: its colors, spacing, typography, layout, and behavior on smaller screens. You’ll need the HTML files from Part I, a text editor, and a browser; this guide assumes the page already has its basic content and structure.

What You’ll Need

The HTML page you want to style, saved in a project folder.
A plain-text or code editor and a current web browser.
Basic familiarity with HTML tags, attributes, and file paths.
Optional: a second screen or browser window for checking changes as you work.

Step-by-Step

Create a stylesheet. In the same folder as your HTML file, create a file named styles.css. The extension must be .css, not .txt. If your site has multiple pages, a shared stylesheet can keep their appearance consistent.
Connect the CSS to your HTML. In the HTML document’s <head>, add <link rel="stylesheet" href="styles.css">. The href is relative to the HTML file, so adjust it if your stylesheet is in a subfolder, such as css/styles.css. Save both files, reload the page, and confirm the browser can find the stylesheet.
Start with a small set of defaults. Add rules for the page background, text color, font, and spacing. For example: body { margin: 0; font-family: Arial, sans-serif; color: #222; background: #fff; line-height: 1.6; }. A CSS rule has a selector followed by braces; each declaration is a property, a colon, a value, and usually a semicolon.
Style elements with selectors. A selector tells the browser what to change. h1 targets every level-one heading; .card targets elements with class="card"; and #contact targets the element with id="contact". Prefer classes for reusable designs. Add the class in HTML, then create a rule such as .card { padding: 1.25rem; border: 1px solid #ddd; }.
Set a readable type scale. Choose a clear body font and set a comfortable line height. Use relative sizes such as rem for headings and text, for example h1 { font-size: 2rem; }. Keep paragraphs a manageable width with main { max-width: 70ch; }; the ch unit is based on character width and can help prevent very long lines.
Control spacing and the box model. CSS width includes content by default, with padding and borders added outside it. Make sizing easier to reason about with * { box-sizing: border-box; }. Use padding for space inside an element and margin for space outside it. For example, section { margin-block: 2rem; } adds vertical space around sections. Avoid adding large margins to many nested elements at once.
Build a layout with Flexbox or Grid. For a row of items that can wrap, use .nav { display: flex; flex-wrap: wrap; gap: 1rem; }. For a grid of cards, try .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }. Put the layout rule on the parent, then style the children. These tools are usually more adaptable than positioning everything with fixed coordinates.
Make links and controls clear. Give links a visible color and keep a visible keyboard focus style. For example: a:focus-visible { outline: 3px solid #165fcc; outline-offset: 3px; }. Buttons should look interactive, have enough space to use comfortably, and remain distinguishable from ordinary text. Do not rely on color alone to communicate important information.
Check the page at different widths. Resize the browser and make sure text, navigation, and images do not overlap or force horizontal scrolling. Add a media query only when the layout needs to change, such as @media (max-width: 600px) { .sidebar { display: none; } }. Hiding content is not always appropriate; consider stacking columns or adjusting gaps instead so important information stays available.
Test, refine, and save. Reload the page after saving both files. Inspect it at desktop and narrow widths, and use the browser’s developer tools to inspect an element’s styles and see whether a rule is being overridden. Change one or two properties at a time. When the page looks right, check that your HTML and CSS files are saved in the location you intend to publish.

Common Mistakes

Using the wrong path: A stylesheet in a subfolder needs a matching relative path in href.
Missing punctuation: A missing brace or colon can prevent a rule, or later rules, from working as expected.
Confusing class and ID selectors: Write .notice for a class and #notice for an ID.
Overusing fixed dimensions: A fixed width that fits a desktop may overflow on a phone. Prefer flexible widths and responsive layout rules.
Changing many styles at once: This makes it harder to identify which edit caused a problem. Make and check small changes.
Ignoring contrast and focus: Pale text or invisible keyboard focus can make a page difficult to use.

Tips

Keep related rules together, and use comments such as /* Navigation */ to make a longer file easier to scan.
Use a small, consistent set of colors, spacing values, and type sizes rather than choosing every value anew.
Use browser developer tools to test a CSS change temporarily before editing the file.
Use semantic HTML for structure and CSS for appearance. A heading should be a heading in the HTML, not just a paragraph made large with CSS.
Check pages with a keyboard as well as a mouse, and confirm that images have suitable alternative text in the HTML.

Troubleshooting

Nothing changes: Confirm the HTML contains the stylesheet link, the path and filename match exactly, and the CSS file is saved. Check the browser’s developer tools for a failed file request or a CSS syntax error. Try a full reload if an older cached version appears.

Only some styles apply: Look for a misspelled selector, missing brace, or invalid property value. Then inspect the element in developer tools: another rule may override yours because it is more specific or appears later in the stylesheet. Prefer simplifying the selectors and removing conflicting rules rather than adding repeated overrides.

The layout overflows on a small screen: Look for fixed widths, large margins, or images wider than their container. Try flexible sizing, such as img { max-width: 100%; height: auto; }, and use Flexbox or Grid with wrapping. Test at several widths instead of relying on one device size.

The text looks hard to read: Increase its size or line height, limit paragraph width, and check foreground-to-background contrast. Make sure focus indicators remain visible if you use a keyboard.

Frequently Asked Questions

Do I need to learn all of CSS before styling a page?
No. Start with selectors, colors, typography, spacing, and one layout method. Add more techniques when the page needs them.

Should CSS go in a separate file or inside the HTML?
A separate file is a good default. It keeps structure and presentation apart and makes it easier to reuse styles across pages.

What is the difference between a class and an ID?
A class can be reused on multiple elements and is selected with a period, such as .card. An ID identifies one element on a page and is selected with a hash, such as #header.

Why does my CSS rule get ignored?
The selector may not match, the CSS may contain a syntax error, or another rule may take precedence. Inspect the element in developer tools to see which declarations are active.

How can I make a site work on phones?
Use flexible layouts and sizes, avoid fixed-width content, and test at narrow viewport widths. Add media queries where a specific layout change improves usability.

Can I use CSS without changing my HTML?
You can style elements and existing classes, but adding useful classes or semantic elements to the HTML often makes styling clearer and more reliable.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →