If you’ve ever wondered how websites are actually built, the answer almost always starts with two languages: HTML and CSS. Learning how to use HTML and CSS is the single best first step for anyone who wants to become a web designer, freelance developer, or just understand what’s happening “under the hood” of every page you visit.

HTML (HyperText Markup Language) gives a web page its structure — the headings, paragraphs, images, and links. CSS (Cascading Style Sheets) gives that structure its look — colors, fonts, spacing, and layout. Together, they form the foundation that every website, no matter how advanced, is built on top of.

The good news is that you don’t need any special software, a coding background, or a budget to get started. All you need is a text editor and a web browser, both of which you already have on your computer. In this guide, you’ll learn what HTML and CSS actually do, how they work together, and how to write your first simple web page from scratch — even if you’ve never written a single line of code before.

What Is HTML?

HTML is a markup language, not a programming language. Instead of performing logic or calculations, it uses tags to describe the different parts of a document, telling the browser “this is a heading,” “this is a paragraph,” or “this is a link.”

A basic HTML tag looks like this:

<p>This is a paragraph.</p>

The <p> is the opening tag, </p> is the closing tag, and everything between them is the content.

Common HTML Tags Every Beginner Should Know

  • <h1> to <h6> — headings, from most important (<h1>) to least important (<h6>)
  • <p> — a paragraph of text
  • <a> — a hyperlink to another page
  • <img> — an image
  • <ul> and <li> — an unordered (bulleted) list and its items
  • <div> — a generic container used to group other elements

The Basic Structure of an HTML Page

Every HTML document follows the same skeleton:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my very first paragraph.</p>
  </body>
</html>
  • <!DOCTYPE html> tells the browser this is a modern HTML document.
  • <html> wraps the entire page.
  • <head> holds information about the page, like its title, that isn’t displayed directly on screen.
  • <body> holds everything visitors actually see: text, images, links, and more.

What Is CSS?

If HTML is the skeleton of a web page, CSS is the skin, clothing, and style. CSS controls how HTML elements look — their color, size, spacing, fonts, and position on the page.

A CSS rule has three parts: a selector (what you’re styling), a property (what aspect you’re changing), and a value (the setting you want).

h1 {
  color: blue;
  font-size: 32px;
}

This rule tells the browser: “find every <h1> element and make its text blue and 32 pixels tall.”

Three Ways to Add CSS to HTML

  1. Inline CSS — added directly to a single HTML tag using the style attribute. Good for quick tests, but not recommended for full projects.
    <p style="color: red;">This text is red.</p>
  2. Internal CSS — placed inside a <style> tag in the <head> of your HTML file. Useful for small, single-page projects.
  3. External CSS — kept in a separate .css file and linked to your HTML. This is the standard, recommended approach for real websites because it keeps your structure and style organized and reusable across multiple pages.
    <link rel="stylesheet" href="styles.css">

How to Use HTML and CSS Together: A Step-by-Step Example

Let’s build a simple, styled web page from scratch. This example combines both languages so you can see exactly how they connect.

Step 1: Create Your HTML File

Create a new file named index.html and add the following:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Styled Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This paragraph is styled using an external CSS file.</p>
    <a href="https://example.com">Visit an example site</a>
  </body>
</html>

Step 2: Create Your CSS File

In the same folder, create a file named styles.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 40px;
}

h1 {
  color: #2c3e50;
}

p {
  color: #333;
  line-height: 1.6;
}

a {
  color: #2980b9;
  text-decoration: none;
}

Step 3: Open Your Page in a Browser

Double-click index.html, or drag it into your browser window. You should see a styled heading, a readable paragraph, and a colored link — all controlled by the CSS file you just linked.

That’s it. You’ve just written and styled your first web page using nothing but HTML and CSS.

Key CSS Concepts to Learn Next

Once you’re comfortable with the basics, these concepts will help you build more advanced layouts:

  • The Box Model — every HTML element is treated as a box with content, padding, borders, and margin.
  • Class and ID selectors — target specific elements using class="..." (reusable) or id="..." (unique) instead of styling every tag of one type.
  • Flexbox and Grid — modern CSS layout systems for arranging elements in rows, columns, and grids without complicated workarounds.
  • Responsive design with media queries — CSS rules that adjust your layout depending on screen size, so your site looks good on both desktop and mobile.

Why Learn HTML and CSS in the Age of AI?

With AI tools now able to generate entire web pages from a text prompt, it’s fair to ask whether learning HTML and CSS is still worth your time. The answer is yes — and understanding why will make you far better at using those AI tools, not obsolete because of them.

AI Writes Code, But It Doesn’t Understand Your Intent

AI code generators are trained to produce statistically likely code, not necessarily correct or well-structured code. Without knowing HTML and CSS yourself, you have no way to tell whether the output is using outdated tags, inaccessible markup, or styles that will break on mobile. Learning the fundamentals turns you from someone who has to accept whatever AI hands back into someone who can direct it, correct it, and combine it with their own judgment.

You Can’t Debug What You Don’t Understand

AI-generated pages still break — a misaligned div, a color that fails contrast requirements, a layout that collapses on a phone screen. When that happens, you need to open the browser’s developer tools and read the actual HTML and CSS to find the problem. No AI assistant can fix a bug for you in real time while you’re presenting to a client; a working knowledge of HTML and CSS is what lets you fix it yourself in seconds.

HTML and CSS Are the Common Language of the Web

Every AI tool that “builds websites” still outputs HTML and CSS under the hood, because that’s the language browsers actually understand. Knowing these fundamentals means you can read, edit, and improve AI-generated output no matter which tool created it — ChatGPT, Claude, a website builder, or a no-code platform. It’s a skill that transfers across every AI tool you’ll ever use, rather than being locked into one platform’s interface.

Faster, More Precise Collaboration With AI

Developers who know HTML and CSS write far more effective prompts. Instead of vaguely asking an AI to “make the header nicer,” they can ask for a specific change — “add 20px of padding and switch the background to a linear gradient” — and immediately recognize whether the result is correct. This turns AI from a black box into a genuinely fast collaborator, cutting your development time instead of adding a review-and-fix cycle on top of it.

Standing Out as a Web Designer

As AI makes it easier for anyone to spin up a basic page, genuine skill becomes more valuable, not less. Clients and employers still need people who can build custom, polished, accessible websites — and who can explain why a layout works the way it does. Learning how to use HTML and CSS is what separates a designer who can troubleshoot, customize, and lead a project from someone who can only copy and paste AI output and hope for the best.

Common Beginner Mistakes to Avoid

  • Forgetting to close HTML tags, which can break the layout of the whole page
  • Using inline styles everywhere instead of an external stylesheet, which quickly becomes hard to maintain
  • Mixing up class and id — remember, an id should only be used once per page
  • Not testing your page in an actual browser after every change

Conclusion

Learning how to use HTML and CSS doesn’t require a computer science degree or expensive tools — just a text editor, a browser, and a willingness to experiment. HTML gives your web page structure through elements like headings, paragraphs, and links, while CSS brings that structure to life with color, spacing, and layout.

By following the steps in this guide, you’ve already written and styled a working web page, which puts you ahead of where most beginners start. From here, the best way to keep improving is to practice: rebuild pages you like the look of, experiment with new CSS properties, and gradually add concepts like Flexbox and responsive design to your toolkit.

Whether your goal is a career in web design, freelance client work, or simply building your own personal site, mastering how to use HTML and CSS is the foundation everything else is built on. Keep building, keep testing your code in the browser, and you’ll be creating polished, professional-looking web pages in no time.