HTML and CSS Basics

Every web page you have ever seen is built from the same two ingredients: HTML and CSS. HTML says what is on the page: a heading, a paragraph, a list, an image, a link, a form. CSS says how it should look: colors, fonts, spacing, positions. Together with JavaScript they form the core of the web, and they are the most beginner-friendly entry point to programming-adjacent work, because you can make a change and see the result in seconds. This guide teaches the essentials with small examples you can try today.

Web standards evolve, and browsers differ in small ways. This guide covers stable fundamentals. For advanced features, consult current reference documentation.

How a page is built

A web page is a text file that a browser reads and displays. The browser turns HTML into a structure called the Document Object Model, applies CSS rules to style it and runs JavaScript for behavior. You write HTML and CSS in plain text files, save them and open them in a browser.

What you need

• A text or code editor. Free editors with syntax highlighting help.
• A modern browser with developer tools.
• A project folder with an HTML file and a CSS file.

You do not need to install anything else to start.

HTML basics

The skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, web</h1>
  <p>This is my first page.</p>
</body>
</html>

• doctype tells the browser it is a modern HTML page.
• html wraps everything, and the lang attribute declares the language.
• head holds information about the page: character set, viewport, title and links to styles.
• body holds visible content.

Elements, tags and attributes

An element usually has an opening tag, content and a closing tag. Attributes add information inside the opening tag.

<a href="https://example.com">Visit the example</a>

Common elements

• Headings: h1 to h6. Use one h1 per page, and keep the order logical.
• Paragraphs: p.
• Lists: ul for unordered, ol for ordered, li for items.
• Links: a with href.
• Images: img with src and alt.
• Emphasis: em for emphasis, strong for strong importance.
• Line breaks and rules: br and hr, used sparingly.
• Containers: div and span, generic wrappers without meaning.
• Tables: for tabular data, not layout.
• Buttons and inputs: for interaction.

Semantic elements

Semantic elements describe meaning.

• header, nav, main, footer, section, article, aside.

They improve accessibility and search understanding. Prefer them to generic divs where they fit.

Images

<img src="photo.jpg" alt="Students studying in a library">

The alt text describes the image for people who cannot see it and appears if the image fails to load. If an image is purely decorative, use an empty alt attribute. Compress images to keep pages fast, and make sure you have rights to use them.

Links

• Relative links point to files in your project, such as about.html.
• Absolute links include the full web address.
• Anchor links jump to sections of a page.
• Link text should make sense on its own. Avoid "click here."

Forms

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>

Forms collect user input. Always pair inputs with labels. Processing form data requires server-side code, and you should handle personal data responsibly. Our digital safety section and guide to building your first website cover privacy points.

CSS basics

Linking styles

Put CSS in a separate file and link it from the head, as shown above. You can also write styles inside the page, but separate files are easier to maintain.

Rules, selectors and properties

h1 {
  color: #222;
  font-size: 2rem;
}

A rule has a selector (what to style) and declarations (property and value pairs).

Common selectors

• Element selectors: p, h1, a.
• Class selectors: .card, which targets elements with class="card".
• ID selectors: #header, for unique elements.
• Descendant selectors: nav a, targeting links inside nav.
• Pseudo-classes: a:hover, for states.
• Combining selectors for precision.

Prefer classes for styling. Keep selectors simple.

The cascade and specificity

When rules conflict, the browser decides by order, importance and specificity. Later rules usually override earlier ones with the same specificity. More specific selectors win over less specific ones. Understanding this prevents confusion. Use developer tools to see which rules apply.

The box model

Every element is a box with:

• Content.
• Padding: space inside the border.
• Border.
• Margin: space outside.

.card {
  padding: 1rem;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}

A helpful setting is to include padding and borders in element widths, which makes sizing predictable.

* {
  box-sizing: border-box;
}

Units

• rem and em scale with font size, which supports accessibility.
• Percentages relate to parent sizes.
• Pixels are fixed.
• Viewport units relate to the screen size.

Use relative units for text and spacing where possible.

Color and typography

• Colors: names, hexadecimal codes and other formats.
• Contrast: ensure text is readable against its background. Test with tools.
• Fonts: choose readable fonts with fallbacks, and avoid too many families.
• Line height: about one and a half times the font size improves readability.
• Line length: keep lines to a comfortable width.
• Hierarchy: use size and weight to show importance.

Backgrounds and borders

Use background colors, images and gradients thoughtfully. Check contrast on top of images.

Layout

Modern CSS provides two main layout systems.

Flexbox

For arranging items in a row or column.

.nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

Grid

For two-dimensional layouts.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

This creates a responsive set of columns that adapt to the available width. Avoid using tables for layout, and avoid old float-based layouts for new work.

Positioning

Use positioning (relative, absolute, fixed, sticky) for specific effects, with care. Overuse leads to fragile layouts.

Responsive design

Design for all screen sizes.

• Include the viewport meta tag.
• Use flexible layouts and relative units.
• Make images scale within their containers.
• Use media queries to adjust styles at certain widths.

@media (min-width: 40rem) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
  }
}

• Start with a mobile layout, then add enhancements for larger screens.
• Test with browser tools and real devices.
• Avoid horizontal scrolling.
• Make touch targets large.

Accessibility

Accessible pages work for people using screen readers, keyboards, magnification and different abilities.

• Use semantic HTML.
• Provide alt text and captions.
• Ensure sufficient color contrast.
• Make focus visible so keyboard users can see where they are.
• Do not remove outlines without providing alternatives.
• Use labels for form fields.
• Make link and button text descriptive.
• Support zoom and text resizing.
• Respect motion preferences by limiting animations.
• Use heading structure logically.
• Test by navigating with the keyboard only.

Accessibility is a professional skill and often a legal requirement.

Debug with browser tools

• Inspect elements to see their HTML and applied CSS.
• Edit styles live to experiment.
• Check the box model view to understand spacing.
• Use the device mode to simulate screen sizes.
• Look at the console and network tabs for errors, such as missing files.
• Validate your HTML with a validator to catch mistakes.
• Check paths and file names. Case and spelling matter.

When a style does not apply, check for typos, specificity conflicts, missing semicolons or brackets and whether the CSS file is linked correctly.

A practice page

Try building a simple profile page.

1. Create index.html and style.css in a folder.
2. Add a header with your name and a short description.
3. Add a navigation list of links.
4. Add a main section with a heading, a paragraph and an image with alt text.
5. Add a footer with contact information.
6. Style it: choose fonts and colors, add spacing and use flexbox for the navigation.
7. Make it responsive with a media query.
8. Check accessibility: contrast, keyboard navigation and headings.
9. Validate and fix errors.
10. Publish it following

Once it works, change the design completely using only CSS. That shows the separation between structure and style.

Good habits

• Write clean, indented code.
• Use meaningful class names.
• Keep CSS organized, grouping related rules.
• Avoid inline styles except for quick tests.
• Comment sparingly.
• Use version control.
• Learn from other sites by inspecting them, but don't copy protected material.
• Keep file names lowercase and simple, without spaces.

Next steps

After the basics, learn JavaScript to add behavior. Then explore layout in depth, accessibility, performance and tools for larger projects.

Common mistakes

• Using headings for size instead of structure.
• Missing alt text.
• Using div for everything.
• Fixed pixel widths that break on phones.
• Low contrast text.
• Forgetting to link the stylesheet.
• Overusing absolute positioning.

A quick checklist

• Is my HTML valid and semantic?
• Do images have meaningful alt text?
• Is my CSS organized, with a sensible box model?
• Does the page work on small screens?
• Have I checked contrast and keyboard access?

Final thoughts

HTML and CSS are the foundation of the web and a gentle way into building things. Learn the core elements, the box model and flexible layout. Keep pages accessible and responsive, use browser tools to experiment and practice by building small pages. Strong basics here make everything else in web development easier.