Key Takeaways
- HTML structures content; CSS styles it — they are different languages with different jobs
- Every webpage is built on the same core HTML elements: headings, paragraphs, links, images, divs
- CSS selectors target elements by tag name, class, or ID to apply styles
- The box model (content, padding, border, margin) controls how all elements take up space
- Responsive design with media queries makes sites work on any screen size
Everyone who builds websites — from designers to AI engineers — started with HTML and CSS. These are the foundational languages of the web. HTML (HyperText Markup Language) defines what's on the page. CSS (Cascading Style Sheets) controls how it looks. This guide walks you through both, from absolute zero to a real, styled webpage you can show people.
HTML Basics: Building Blocks of Every Webpage
HTML uses elements made of opening and closing tags. <h1>Hello World</h1> creates a top-level heading. <p>Some text</p> creates a paragraph. The most important elements to know: headings (h1 through h6), paragraphs (p), links (a href='url'), images (img src='url' alt='description'), lists (ul for unordered, ol for ordered, li for items), and containers (div and span).
Every HTML file starts the same way:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>My First Page</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<h1>Hello, World!</h1>
<p>My first webpage.</p>
</body>
</html>
Semantic HTML: Use the Right Element for the Job
HTML5 introduced semantic elements that describe their content's meaning — not just their visual role. Use <header> for page or section headers, <nav> for navigation menus, <main> for the primary content, <article> for self-contained content, <section> for thematic groupings, <aside> for sidebars, and <footer> for page footers. Why it matters: screen readers use these to navigate pages for visually impaired users. Search engines use them to understand content structure. And it makes your HTML readable at a glance.
CSS Selectors: Targeting Elements to Style
CSS rules have two parts: a selector and a declaration block. The selector targets HTML elements. The declarations set property-value pairs. Three main selector types: tag selectors (p { color: blue; }) target all elements of that type. Class selectors (.highlight { background: yellow; }) target elements with class='highlight'. ID selectors (#header { font-size: 2rem; }) target the single element with id='header'. Classes are reusable — use them for most styling. IDs are unique — use them sparingly.
The Box Model: How Elements Take Up Space
Every HTML element is a rectangular box. The box model has four layers from inside out: content (the actual text or image), padding (space between content and border), border (a line around the padding), margin (space outside the border, separating from other elements). Add box-sizing: border-box; to all elements (it's standard practice) — this makes width and height include padding and border, not add to them. Without it, a 200px wide box with 20px padding becomes 240px wide, which is confusing.
Colors and Typography: Making Things Look Good
CSS accepts colors as: hex (#3b82f6), RGB (rgb(59, 130, 246)), HSL (hsl(217, 91%, 60%)), or named colors (blue). Typography properties: font-family (the typeface — use Google Fonts for free web fonts), font-size (use rem units for accessibility — 1rem = 16px by default), font-weight (400 normal, 700 bold), line-height (1.5 to 1.7 for readable body text), color (text color). Import a Google Font by adding a link tag to your HTML head: <link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap' rel='stylesheet'>
Responsive Design: Making Sites Work on Any Screen
Add this meta tag to every HTML page: <meta name='viewport' content='width=device-width, initial-scale=1.0'> — without it, mobile browsers zoom out to show the desktop layout. Then use media queries to apply different styles at different screen sizes:
/* Mobile first: base styles apply to all screens */
.container { padding: 1rem; }
/* Tablet and up */
@media (min-width: 768px) {
.container { padding: 2rem; }
}
/* Desktop and up */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}Mobile-first (start with mobile styles, add complexity for larger screens) is the standard approach in 2026.
Frequently Asked Questions
- How long does it take to learn HTML and CSS?
- You can build basic websites within a week of focused learning. Getting comfortable with layouts using Flexbox and Grid takes another 1-2 weeks. Professional-level HTML/CSS with responsive design and modern practices takes 1-3 months.
- Do I need to install anything to write HTML and CSS?
- No. You just need a text editor (VS Code is free and excellent) and a web browser. Create an HTML file, open it in Chrome or Firefox, and you have a working development environment.
- What should I learn after HTML and CSS?
- JavaScript — specifically modern ES6+ syntax. Then pick a framework like React. From there you can go into full-stack development, UI/UX, or specialize in areas like animation or accessibility.
- Is HTML considered programming?
- HTML is a markup language, not a programming language — it doesn't have logic, loops, or conditionals. CSS is also not a programming language. JavaScript is the programming language of the web. You need all three for front-end development.
Ready to Level Up Your Skills?
Ready to go beyond HTML and CSS? Our bootcamp covers the full modern web stack — JavaScript, React, Node.js, databases, and AI integration. Hands-on projects. Real skills. Next cohorts October 2026 in 5 cities. Only $1,490.
View Bootcamp Details