HTML and CSS Basics: A Beginner’s Guide to Web Page Structure and Styling

Every website you visit is built on two fundamental technologies: HTML and CSS. HTML gives a page its structure and content, while CSS controls how it looks. If you want to understand web development, this is the perfect place to begin.

In this guide you will learn how they work, see simple examples, and pick up the concepts you need to build your first page.

What Is HTML?

HTML stands for HyperText Markup Language. It uses tags to describe the meaning and structure of content. A tag usually has an opening and closing part that wrap around content.

html

<h1>Welcome to My Website</h1>
<p>This is my first paragraph.</p>

Together, the opening tag, content, and closing tag form an element.

The Basic Structure of an HTML Page

html

<!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>
</head>
<body>
  <h1>Hello, World</h1>
  <p>Welcome to my page.</p>
</body>
</html>

• <!DOCTYPE html> tells the browser this is an HTML5 document.
• <head> holds information about the page, like the title and metadata.
• <body> contains everything visitors see.

Common HTML Elements

• Headings: <h1> to <h6> for titles and subtitles
• Paragraphs: <p> for text
• Links: <a href="https://example.com">Click here</a>
• Images: <img src="photo.jpg" alt="Description of photo">
• Lists: <ul> for bullet lists, <ol> for numbered lists, and <li> for items
• Buttons: <button>Click me</button>
• Forms: <form>, <input>, <label>, and <textarea>

Semantic HTML

Semantic elements describe the purpose of content, which helps accessibility and SEO. Examples include <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. Use them instead of generic <div> tags where they fit.

What Is CSS?

CSS stands for Cascading Style Sheets. It controls colors, fonts, spacing, layout, and more. A CSS rule has a selector and declarations.

css

h1 {
  color: #2c3e50;
  font-size: 2.5rem;
}

Here h1 is the selector, and the declarations inside the braces set the color and font size.

Three Ways to Add CSS

1. Inline: Inside an element using the style attribute. Quick but hard to maintain.
2. Internal: Inside a <style> tag in the head. Good for small pages.
3. External: In a separate .css file linked with <link rel="stylesheet" href="styles.css">. This is the best practice for most sites.

Selectors You Should Know

• Element selector: p { } targets all paragraphs.
• Class selector: .card { } targets elements with class="card".
• ID selector: #header { } targets one element with id="header".
• Descendant selector: nav a { } targets links inside a nav.
• Pseudo classes: a:hover { } styles an element when hovered.

The Box Model

Every element is a box made of four layers: content, padding, border, and margin. Understanding it is key to controlling spacing.

css

.card {
  padding: 20px;
  border: 1px solid #ddd;
  margin: 16px;
}

A helpful setting is box-sizing: border-box;, which includes padding and border in an element’s total width and makes layouts easier to predict.

Layout With Flexbox

Flexbox arranges items in a row or column and handles alignment and spacing.

css

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

Layout With Grid

CSS Grid creates two dimensional layouts with rows and columns.

css

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Making Pages Responsive

Responsive design makes your site look good on any screen size. Use flexible units, fluid images, and media queries.

css

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Practice Project Idea

Build a simple personal profile page with:

• A header with your name and a navigation menu
• An about section with a photo and short bio
• A list of your skills
• A contact section with a link or form
• A footer with social links

Style it with a color palette, a readable font, and a responsive layout.

Tips for Learning Faster

• Write code every day, even for 20 minutes.
• Build small projects instead of only watching tutorials.
• Use your browser’s developer tools to inspect and experiment.
• Read documentation on MDN Web Docs.
• Learn from mistakes and keep going.

Conclusion

HTML builds the skeleton of the web and CSS gives it style. With just these two skills, you can create attractive, responsive pages. Practice with small projects, explore Flexbox and Grid, and soon you will be ready to add JavaScript and bring your pages to life.

Call to action: Create an index.html file right now and build your first page using the examples above.