What's the difference between HTML and CSS?

HTML provides the structure and content of a page — headings, paragraphs, images. CSS controls how that content looks — colors, fonts, spacing, and layout. HTML is the skeleton; CSS is the styling.

Where should I put my CSS?

For real projects, put CSS in a separate .css file and link it with a tag. This keeps content and style apart and lets one stylesheet format many pages. For quick tests you can use a block in the page's head.

Styling Web Pages with CSS | Coding

From plain to polished

If you've built a page with HTML, you've seen that raw HTML looks plain: black text, blue links, times-style fonts, no spacing. CSS — Cascading Style Sheets — is the language that changes all of that. HTML decides what is on the page; CSS decides how it looks.

A CSS rule

CSS is made of rules. Each rule has a selector (what to style) and one or more declarations (how to style it):

p {
  color: navy;
  font-size: 18px;
}

Breaking it down:

p is the selector — here it targets every <p> (paragraph) element.
Inside the { } are declarations.
Each declaration is a property and a value separated by a colon and ending in a semicolon: color: navy;.

This rule makes all paragraphs navy and 18 pixels tall.

Three ways to select

You won't always want to style every paragraph the same way. CSS gives you three common selectors:

/* By tag name: every <h1> */
h1 {
  color: darkgreen;
}

/* By class: any element with class="highlight" */
.highlight {
  background-color: yellow;
}

/* By id: the single element with id="header" */
#header {
  font-size: 32px;
}

A class (selected with a dot .) can be reused on many elements. An id (selected with a hash #) should be unique — only one element per page. In the HTML they look like this:

<h1 id="header">My Blog</h1>
<p class="highlight">Read this part carefully.</p>
<p>A normal paragraph.</p>

Connecting CSS to HTML

The cleanest way to add CSS is in a separate file. Save your styles as style.css, then link it inside the <head> of your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="header">My Blog</h1>
  <p class="highlight">Welcome!</p>
</body>
</html>

The <link rel="stylesheet" href="style.css"> tag tells the browser to load and apply that stylesheet. One CSS file can style an entire website.

Colors and fonts

You can name colors directly (red, navy, teal) or use hex codes for precise shades. A hex code starts with # followed by six characters for red, green, and blue:

body {
  background-color: #f4f4f4;   /* light grey */
  color: #222222;              /* near-black text */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

font-family lists fonts in order of preference — the browser uses the first one available, falling back to a generic sans-serif. line-height: 1.6 adds breathing room between lines so text is easier to read.

The box model

Every element on a page is a rectangular box, and CSS lets you control the space around it. From the inside out, the box model has:

content — the text or image itself
padding — space inside the border, around the content
border — a line around the padding
margin — space outside the border, separating it from other elements

.card {
  padding: 16px;
  border: 2px solid #cccccc;
  margin: 20px;
  border-radius: 8px;
}

This rule adds inner spacing, a soft grey border with rounded corners, and outer spacing so cards don't touch each other. Understanding padding versus margin is one of the biggest "aha" moments in CSS: padding pushes the border outward; margin pushes other elements away.

A little layout

You can size and centre a block of content using width and margin: auto:

.container {
  width: 600px;
  margin: 0 auto;     /* 0 top/bottom, auto left/right = centred */
  padding: 20px;
}

margin: 0 auto is a classic trick: the auto left and right margins split the leftover space evenly, centring the box horizontally.

Putting it all together

Here's a small style.css that would make a basic page look clean and modern:

body {
  font-family: Arial, sans-serif;
  background-color: #fafafa;
  color: #222;
  line-height: 1.6;
  margin: 0;
}

.container {
  width: 600px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  color: #1a5276;
}

.highlight {
  background-color: #fff3b0;
  padding: 4px 8px;
  border-radius: 4px;
}

Wrap your page content in a <div class="container"> ... </div> and watch a plain page turn into something that looks designed.

What comes next

CSS handles the look. To make a page do things — respond to clicks, change content, react to the user — you'll add behaviour with JavaScript. Together, HTML, CSS, and JavaScript are the three core languages of every web page.

Practice challenges

Style every <h2> with a colour of your choice and a larger font size.
Create a .card class with padding, a border, and a margin, and apply it to a <div>.
Centre a 500px-wide container on the page and give the body a light background colour.

Styling Web Pages with CSS

Key takeaways