Home / Guides / Html Css

HTML & CSS: Build Your First Web Pages

Beginner • 30 min read • Updated December 2024

HTML and CSS are the foundation of every website. HTML structures your content while CSS makes it look beautiful. Together, they're the first skills every web developer learns.

The Building Blocks of the Web

  • HTML (HyperText Markup Language): Defines the structure and content
  • CSS (Cascading Style Sheets): Controls the visual presentation
  • JavaScript: Adds interactivity (covered in a separate guide)

HTML Basics

Basic HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my website.</p>
</body>
</html>

Key Parts Explained

  • <!DOCTYPE html> - Declares HTML5 document
  • <html> - Root element, contains everything
  • <head> - Metadata, title, links to CSS
  • <body> - Visible content
  • lang="en" - Page language (accessibility)
  • charset="UTF-8" - Character encoding
  • viewport - Enables responsive design

HTML Syntax

<!-- This is a comment -->

<!-- Most elements have opening and closing tags -->
<tagname>content</tagname>

<!-- Self-closing elements (no content) -->
<img src="photo.jpg" alt="Description">
<br>
<hr>
<input type="text">

<!-- Elements can have attributes -->
<a href="https://example.com" target="_blank">Link Text</a>

<!-- Attributes provide additional information -->
<img src="photo.jpg" alt="A sunset" width="300" height="200">

Essential HTML Elements

Text Content

<!-- Headings (h1 = most important, h6 = least) -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>

<!-- Paragraphs -->
<p>This is a paragraph of text.</p>

<!-- Emphasis -->
<strong>Bold/important text</strong>
<em>Italic/emphasized text</em>

<!-- Line break and horizontal rule -->
<br>
<hr>

Links and Images

<!-- Links -->
<a href="https://example.com">External Link</a>
<a href="/about">Internal Link</a>
<a href="#section-id">Anchor Link</a>
<a href="mailto:email@example.com">Email Link</a>

<!-- Images -->
<img src="photo.jpg" alt="Description of image">
<img src="logo.png" alt="Company Logo" width="200">

Lists

<!-- Unordered list (bullets) -->
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

<!-- Ordered list (numbers) -->
<ol>
    <li>Step one</li>
    <li>Step two</li>
    <li>Step three</li>
</ol>

<!-- Description list -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Semantic Structure

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

<main>
    <article>
        <h1>Article Title</h1>
        <p>Article content...</p>
    </article>

    <aside>
        <h2>Related Links</h2>
    </aside>
</main>

<footer>
    <p>&copy; 2024 My Website</p>
</footer>

Forms

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>

    <label>
        <input type="checkbox" name="subscribe">
        Subscribe to newsletter
    </label>

    <button type="submit">Send</button>
</form>

CSS Basics

Adding CSS to HTML

<!-- Method 1: External stylesheet (recommended) -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

<!-- Method 2: Internal styles -->
<head>
    <style>
        p { color: blue; }
    </style>
</head>

<!-- Method 3: Inline styles (avoid when possible) -->
<p style="color: blue;">Blue text</p>

CSS Syntax

/* CSS Rule Structure */
selector {
    property: value;
    another-property: value;
}

/* Example */
h1 {
    color: navy;
    font-size: 32px;
    text-align: center;
}

p {
    color: #333333;
    line-height: 1.6;
    margin-bottom: 16px;
}

Common Properties

/* Text */
color: #333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: underline;
line-height: 1.5;

/* Background */
background-color: #f0f0f0;
background-image: url('bg.jpg');
background-size: cover;

/* Dimensions */
width: 100%;
max-width: 800px;
height: 200px;
min-height: 100vh;

/* Spacing */
margin: 20px;           /* all sides */
margin: 10px 20px;      /* vertical horizontal */
margin: 10px 20px 30px 40px;  /* top right bottom left */
padding: 20px;

/* Border */
border: 1px solid #ccc;
border-radius: 8px;

CSS Selectors

/* Element selector */
p { color: black; }

/* Class selector (reusable) */
.highlight { background: yellow; }
<p class="highlight">Highlighted text</p>

/* ID selector (unique) */
#header { height: 80px; }
<div id="header">...</div>

/* Descendant selector */
article p { font-size: 18px; }

/* Child selector (direct children only) */
ul > li { list-style: square; }

/* Multiple selectors */
h1, h2, h3 { font-family: Georgia; }

/* Pseudo-classes */
a:hover { color: red; }
a:visited { color: purple; }
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #f5f5f5; }

/* Pseudo-elements */
p::first-line { font-weight: bold; }
p::before { content: "→ "; }

Selector Specificity

When rules conflict, more specific selectors win:

  1. Inline styles (most specific)
  2. ID selectors (#header)
  3. Class selectors (.highlight)
  4. Element selectors (p, div)

The Box Model

Every element is a rectangular box with:

  • Content: The actual content (text, image)
  • Padding: Space inside the border
  • Border: The edge around padding
  • Margin: Space outside the border
/* Default box model: width = content only */
.box {
    width: 200px;        /* content width */
    padding: 20px;       /* adds to total width */
    border: 5px solid;   /* adds to total width */
    /* Total width = 200 + 40 + 10 = 250px */
}

/* Better: border-box includes padding and border */
.box {
    box-sizing: border-box;
    width: 200px;        /* total width */
    padding: 20px;
    border: 5px solid;
    /* Total width = 200px */
}

/* Apply border-box to everything (recommended) */
*, *::before, *::after {
    box-sizing: border-box;
}

Flexbox Layout

Flexbox makes it easy to align and distribute space among items in a container. It's perfect for navigation bars, card layouts, and centering content. 

/* Container (parent) */
.flex-container {
    display: flex;

    /* Direction */
    flex-direction: row;          /* default: horizontal */
    flex-direction: column;       /* vertical stack */

    /* Main axis alignment */
    justify-content: flex-start;  /* default: start */
    justify-content: center;      /* center items */
    justify-content: space-between; /* spread out */
    justify-content: space-around;  /* equal space around */

    /* Cross axis alignment */
    align-items: stretch;         /* default: fill height */
    align-items: center;          /* center vertically */
    align-items: flex-start;      /* top */
    align-items: flex-end;        /* bottom */

    /* Wrapping */
    flex-wrap: wrap;              /* allow items to wrap */
    gap: 20px;                    /* space between items */
}
/* Items (children) */
.flex-item {
    flex-grow: 1;    /* grow to fill space */
    flex-shrink: 0;  /* don't shrink */
    flex-basis: 200px; /* starting size */

    /* Shorthand */
    flex: 1;         /* grow equally */
    flex: 0 0 200px; /* fixed 200px width */
}

Common Flexbox Patterns

/* Center anything */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Navigation bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Card grid */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    flex: 1 1 300px; /* grow, shrink, min 300px */
}

CSS Grid Layout

CSS Grid is powerful for two-dimensional layouts with rows and columns. It's ideal for page layouts and complex component structures. 

/* Basic grid */
.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* 3 columns */
    grid-template-rows: auto 1fr auto;       /* 3 rows */
    gap: 20px;
}

/* Flexible columns */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Named areas */
.page-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Grid vs Flexbox

Use Case Choose
Single row/column of items Flexbox
Two-dimensional layout Grid
Content-first (size based on content) Flexbox
Layout-first (fit content to layout) Grid
Navigation bars, button groups Flexbox
Page layouts, card grids Grid

Responsive Design

Responsive design ensures your website looks good on all screen sizes, from mobile phones to large desktop monitors.

Media Queries

/* Base styles (mobile-first) */
.container {
    padding: 10px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        padding: 20px;
        max-width: 750px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 1000px;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

Responsive Typography

/* Fluid typography */
html {
    font-size: 16px;
}

h1 {
    font-size: 1.75rem;  /* 28px */
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;  /* 40px */
    }
}

/* Modern approach: clamp() */
h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    /* min: 28px, preferred: 4% of viewport, max: 48px */
}

Responsive Images

/* Make images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Background image */
.hero {
    background-image: url('hero-mobile.jpg');
    background-size: cover;
}

@media (min-width: 768px) {
    .hero {
        background-image: url('hero-desktop.jpg');
    }
}

Responsive Navigation

/* Mobile: vertical stack */
.nav {
    display: flex;
    flex-direction: column;
}

/* Desktop: horizontal */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;
        gap: 20px;
    }
}

Next Steps