HTML CSS for Beginners: Build Your First Web Page
Learn html css for beginners with this guide covering tags, structure, selectors, the box model, responsive design, and best practices to build your first page.
HTML CSS for Beginners: Build Your First Web Page
If you want to build websites, this html css for beginners guide is where you start. Every website on the planet is built with HTML and CSS. HTML provides the structure and content, while CSS controls how it looks. Together they form the foundation of everything you see on the web. In this guide we will walk through the essential HTML tags, how to structure a page, how CSS selectors work, the box model, responsive design basics, and the best practices that will keep your code clean and maintainable. By the end you will be able to build a complete, styled web page from scratch.
What is HTML?
HTML stands for HyperText Markup Language. It is not a programming language. It is a markup language, which means you use tags to label and organize content. Browsers read the HTML, understand the tags, and render the page.
An HTML tag is a keyword wrapped in angle brackets. Most tags come in pairs: an opening tag and a closing tag with a forward slash.
<p>This is a paragraph.</p>
<h1>This is a top level heading.</h1>
Tags can also have attributes, which provide extra information:
<a href="https://example.com">Visit Example</a>
<img src="photo.jpg" alt="A descriptive caption">
HTML Structure and Tags
Every HTML document follows a basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first paragraph.</p>
</body>
</html>
The <!DOCTYPE html> declaration tells the browser to use HTML5. The <html> element wraps everything. The <head> contains metadata that is not displayed, like the title and character set. The <body> contains all visible content.
Common Tags
Here are the tags you will use most often:
- Headings:
<h1>through<h6>, with<h1>being the most important. - Paragraphs:
<p>for blocks of text. - Links:
<a href="url">to link to other pages. - Images:
<img src="url" alt="text">to display pictures. - Lists:
<ul>for unordered lists,<ol>for ordered lists, each with<li>items. - Containers:
<div>is a generic block container and<span>is a generic inline container. - Tables:
<table>,<tr>for rows,<td>for cells,<th>for header cells.
Semantic HTML
Modern HTML includes semantic tags that describe the meaning of content, not just its appearance. Using them improves accessibility and SEO:
<header>for the top section of a page or section.<nav>for navigation links.<main>for the primary content of the page.<article>for a self contained piece of content.<section>for a thematic grouping of content.<footer>for the bottom section.
Forms
Forms collect user input:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Subscribe</button>
</form>
What is CSS?
CSS stands for Cascading Style Sheets. It controls the presentation of HTML elements: colors, fonts, spacing, layout, and more. While HTML says what the content is, CSS says how it should look.
You can add CSS three ways:
- Inline: Directly on an element with a
styleattribute. Avoid this for anything beyond quick tests. - Internal: Inside a
<style>tag in the HTML head. - External: In a separate
.cssfile linked from the HTML. This is the recommended approach.
<link rel="stylesheet" href="styles.css">
CSS Selectors
Selectors tell CSS which elements to style. Here are the most important ones:
/* Element selector - targets all paragraphs */
p {
color: #333333;
}
/* Class selector - targets elements with class="highlight" */
.highlight {
background-color: yellow;
}
/* ID selector - targets the single element with id="hero" */
#hero {
font-size: 24px;
}
/* Descendant selector - targets list items inside a nav */
nav li {
display: inline;
}
/* Pseudo-class - targets links on hover */
a:hover {
color: red;
}
- Element selectors match HTML tags directly.
- Class selectors start with a dot and match any element with that class. Classes are reusable.
- ID selectors start with a hash and match one element with that unique ID.
- Descendant selectors match elements nested inside other elements.
- Pseudo-classes like
:hoverand:first-childmatch elements in a specific state.
The Box Model
Every HTML element is a rectangular box. The box model describes the space it takes up, made of four layers:
- Content: The actual text or image.
- Padding: Space between the content and the border.
- Border: A line around the padding.
- Margin: Space outside the border, between this element and its neighbors.
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 15px;
}
Understanding the box model is essential. Most layout problems come down to padding, border, and margin interacting in unexpected ways. The box-sizing: border-box property makes widths include padding and border, which usually makes layouts easier to reason about.
Display Properties
The display property controls how an element takes up space:
- block: Takes the full width available and starts on a new line. Examples:
<div>,<p>,<h1>. - inline: Takes only the width of its content and does not start a new line. Examples:
<span>,<a>. - inline-block: Combines inline flow with block properties like width and height.
- flex: Turns the element into a flex container, enabling flexible layouts.
- grid: Turns the element into a grid container for two dimensional layouts.
- none: Removes the element from the layout entirely.
Responsive Design Basics
Responsive design means your layout adapts to different screen sizes, from phones to desktops. The key tools are the viewport meta tag, relative units, and media queries.
The viewport tag goes in the HTML head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Media queries apply different CSS based on screen width:
.container {
width: 100%;
padding: 20px;
}
@media (min-width: 768px) {
.container {
width: 720px;
margin: 0 auto;
}
}
CSS Units
Choosing the right unit matters:
- px: Fixed pixels. Predictable but not flexible.
- em: Relative to the font size of the parent element.
- rem: Relative to the root font size. Consistent across the page.
- %: Relative to the parent element.
- vh / vw: Relative to the viewport height and width.
Flexbox Basics
Flexbox is the easiest way to create flexible one dimensional layouts:
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
This arranges children in a row with even spacing and vertically centers them.
Best Practices for HTML CSS for Beginners
- Use semantic HTML: Prefer
<header>,<nav>,<main>, and<article>over generic<div>elements. It helps screen readers and search engines understand your page. - Keep CSS external: Link a separate stylesheet instead of inline styles. It keeps HTML clean and lets you reuse styles across pages.
- Use classes over IDs for styling: IDs are unique and hard to override. Classes are reusable and flexible.
- Always add alt text to images: It improves accessibility for users with screen readers and shows when an image fails to load.
- Be responsive from the start: Design for small screens first and scale up with media queries. This mobile first approach prevents layout headaches later.
This html css for beginners guide covered the building blocks of every website: HTML structure and tags, semantic elements, forms, CSS selectors, the box model, display properties, responsive design, and best practices. The best way to learn is to build something. Create a simple personal page, add some headings and paragraphs, link a stylesheet, and style it. Change one thing at a time and watch what happens.
Ready to test what you learned? Take the HTML and CSS Foundations Quiz below and earn your free certificate.
Ready to test your knowledge?
Take the HTML & CSS Foundations Quiz — score 70% or higher to earn a free certificate.
Related articles
Web DevelopmentCSS Flexbox Tutorial: Master Modern Layouts with Grid
This CSS flexbox tutorial teaches modern layout techniques with Flexbox container properties, CSS Grid, template areas, alignment, and responsive patterns.
Web DevelopmentJavaScript Basics Tutorial: A Complete Beginner Guide
Start coding for the web with this javascript basics tutorial covering variables, data types, functions, DOM manipulation, events, and common mistakes.