What Are HTML and CSS?
Every website on the internet is built with HTML and CSS at its core. Understanding what they each do is the first step:
- HTML (HyperText Markup Language) — defines the structure and content of a page. Headings, paragraphs, images, links — HTML creates these elements.
- CSS (Cascading Style Sheets) — controls the appearance. Colours, fonts, layout, spacing — CSS makes the page look good.
Think of HTML as the skeleton of a building and CSS as the paint, furniture, and decoration.
Your First HTML File
You don't need any special software to start. Open Notepad (Windows) or TextEdit (Mac, set to plain text mode), paste the following, and save it as index.html:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>Now double-click the file — it will open in your browser. You just built a webpage.
Essential HTML Tags to Know
| Tag | Purpose |
|---|---|
<h1> – <h6> | Headings (h1 = largest, h6 = smallest) |
<p> | Paragraph of text |
<a href="..."> | Hyperlink |
<img src="..."> | Image |
<ul> / <li> | Unordered list / list item |
<div> | Container / section block |
Adding CSS to Your Page
Inside your <head> section, add a <style> tag to write CSS directly in your HTML file:
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #6A0DAD;
}
</style>Save and refresh your browser. The page now has a styled heading and custom background. That's CSS in action.
Key CSS Properties to Learn First
- color / background-color — text and background colours
- font-size / font-family — text size and typeface
- margin / padding — spacing outside and inside elements
- border — outlines around elements
- display: flex — powerful tool for side-by-side layouts
Practice Project: A Personal Bio Page
Build a one-page personal bio. Include your name as an <h1>, a short paragraph about yourself, a list of your hobbies, and style it with at least three CSS properties. This single project reinforces every concept you've just learned in a real, meaningful context.
Where to Practice Online
If you want to experiment without saving files, use CodePen.io or JSFiddle — both are free, browser-based editors where you can write HTML and CSS and see results instantly. These are also great for exploring other people's code and learning from examples.
HTML and CSS are the gateway to everything on the web. Master these two, and you'll have a foundation to build on for years.