Learn HTML & CSS

  • Home
  • Learn HTML & CSS

Learn HTML & CSS

19th August, 2026

Introduction to HTML and CSS

HTML
Creates the Structure

HTML (HyperText Markup Language) is used to create the structure and content of a webpage.

  • Headings
  • Paragraphs
  • Images
  • Links
  • Tables
  • Forms
CSS
Adds Style and Design

CSS (Cascading Style Sheets) is used to control the appearance and layout of HTML elements.

  • Colors
  • Fonts
  • Spacing
  • Layouts
  • Animations
  • Responsive Design

1. HTML: Create the Structure

Every webpage begins with an HTML structure.

<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first paragraph.</p> <a href="https://example.com"> Visit Website </a> </body> </html>
H
Heading

The <h1> tag represents the main heading of a webpage.

P
Paragraph

The <p> tag is used to display paragraphs and text content.

A
Link

The <a> tag is used to connect one webpage or resource to another.

Understanding HTML 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 Website</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph.</p> </body> </html>

Important HTML Tags

Tag Purpose
<!DOCTYPE html> Tells the browser this is HTML5
<html> Root of the webpage
<head> Contains page information
<title> Text shown in browser tab
<body> Visible webpage content
<h1> Main heading
<p> Paragraph

2. CSS: Add Style

CSS controls how HTML elements look on the screen.

h1 { color: blue; text-align: center; } p { color: gray; font-size: 18px; } a { color: green; }
Selector

Selects the HTML element that you want to style.

h1
Property

Defines what you want to change.

color
Value

Defines the value of the property.

blue

CSS Selectors

p { color: gray; }

This affects all paragraph elements.

.important { color: red; font-weight: bold; }

#header { background-color: #003366; color: white; }

Flexbox and CSS Grid

Flexbox

Flexbox is useful for arranging elements in rows or columns.

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

CSS Grid is useful for creating advanced page layouts.

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

Responsive Design

Responsive design ensures that your website works properly on desktops, tablets and mobile devices.

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

Practice Project

HTML

HTML is used to create the structure of a webpage.

Learn HTML

CSS

CSS is used to style and design the webpage.

Learn CSS

Responsive Design

Make your website work properly on all screen sizes.

Learn More