HTML & CSS Basics
Building and Styling Your First Web Pages
A beginner-friendly practical guide
1. How the Web Is Built
Every web page is built from two core technologies. HTML (HyperText Markup Language) provides
the structure and content — headings, paragraphs, images, links. CSS (Cascading Style Sheets)
controls the appearance — colors, fonts, spacing, and layout. Together they describe what a page
contains and how it looks.
2. A Minimal HTML Page
HTML uses tags wrapped in angle brackets. Most come in pairs: an opening tag and a closing tag.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first web page.</p>
</body>
</html>
3. Common HTML Elements
• <h1> to <h6> — headings, largest to smallest.
• <p> — a paragraph of text.
• <a href="..."> — a link to another page.
• <img src="..."> — an image.
• <ul> and <li> — a bulleted list.
4. Adding Style with CSS
CSS rules target elements and set properties. A rule has a selector and a block of declarations.
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #2563EB;
HTML & CSS Basics Page 2
text-align: center;
}
You can link a stylesheet from the page's <head> section:
<link rel="stylesheet" href="[Link]">
5. The Box Model
Every element is a rectangular box. Its size comes from the content plus padding (inside space),
border, and margin (outside space). Understanding this model is the key to controlling layout.
.card {
padding: 16px;
border: 1px solid #ccc;
margin: 12px;
}
6. Responsive Layout
Modern layouts adapt to phones, tablets, and desktops. Flexbox is a simple, powerful tool for
arranging items in rows or columns.
.row {
display: flex;
gap: 16px;
justify-content: space-between;
}
7. Next Steps
Build a one-page personal site: a heading, a short bio, a photo, and a list of links. Style it with CSS,
then make it look good on a phone. This single project touches nearly every fundamental and gives
you something real to keep improving.
HTML & CSS Basics Page 3