An Introduction to CSS

Introduction

HTML gives a web page its structure.

CSS controls how that structure looks.

For example, HTML can create a heading:

1<h1>Welcome to My Website</h1>

CSS can change the way that heading appears:

1h1 {2  color: navy;3  font-size: 2rem;4}

Without CSS, a web page can still have headings, paragraphs, links, images, lists, and forms.

However, it will usually look plain.

CSS lets you control colours, spacing, fonts, layout, borders, backgrounds, sizing, alignment, and responsive design.

CSS is one of the main technologies used to build websites, along with HTML and JavaScript.

A simple way to think about them is:

1HTML = structure2CSS = presentation3JavaScript = behaviour

This article explains what CSS is, what it does, and how it works with HTML.

What Is CSS?

CSS stands for Cascading Style Sheets.

CSS is a language used to describe how HTML elements should look.

For example, this HTML creates a paragraph:

1<p>This is a paragraph.</p>

This CSS changes the paragraph’s appearance:

1p {2  color: darkslategray;3  font-size: 18px;4}

The browser reads the HTML to understand the content.

Then it reads the CSS to understand how that content should be displayed.

CSS does not replace HTML.

It works with HTML.

What CSS Does

CSS can control many visual parts of a web page.

It can change:

1text colour2font size3font family4line spacing5background colour6page layout7width and height8margins and padding9borders10shadows11alignment12responsive behaviour

For example, CSS can make a button look more like a real call-to-action button:

1button {2  padding: 12px 20px;3  border-radius: 6px;4  font-size: 1rem;5}

The HTML creates the button.

The CSS styles the button.

CSS and HTML Work Together

HTML and CSS usually work as a pair.

HTML describes the content:

1<h1>About Our Services</h1>2<p>We build simple websites for small businesses.</p>3<a href=”contact.html”>Contact us</a>

CSS describes the presentation:

1h1 {2  color: navy;3}4 5p {6  line-height: 1.6;7}8 9a {10  font-weight: bold;11}

The browser combines both.

The HTML tells the browser what the elements are.

The CSS tells the browser how those elements should look.

Why CSS Exists

In the early days of the web, HTML was sometimes used for both structure and appearance.

That made pages harder to maintain.

CSS helps separate content from design.

For example, this HTML should focus on meaning:

1<h1>Contact Us</h1>2<p>Email us to discuss your project.</p>

The CSS should handle appearance:

1h1 {2  font-size: 2.5rem;3}4 5p {6  color: #333333;7}

This separation makes websites easier to update.

If you want to change the design, you can change the CSS without rewriting all the HTML.

A Basic CSS Rule

A CSS rule usually has a selector and a declaration block.

Example:

1p {2  color: blue;3}

The selector is:

1p

This selects all paragraph elements.

The declaration block is:

1{2  color: blue;3}

Inside the block, the declaration is:

1color: blue;

This tells the browser to make paragraph text blue.

Selectors

A selector tells CSS which HTML elements to style.

For example:

1h1 {2  color: navy;3}

This selects all <h1> elements.

Another example:

1p {2  font-size: 18px;3}

This selects all <p> elements.

Selectors can target HTML elements, classes, IDs, and more.

For example, a class selector looks like this:

1.highlight {2  background-color: yellow;3}

It applies to HTML like this:

1<p class=”highlight”>This text is highlighted.</p>

Properties and Values

A CSS declaration is made from a property and a value.

Example:

1color: blue;

The property is:

1color

The value is:

1blue

Another example:

1font-size: 20px;

The property is:

1font-size

The value is:

120px

CSS uses properties to define what should change.

It uses values to define how it should change.

Declaration Blocks

A CSS rule can contain more than one declaration.

For example:

1h1 {2  color: navy;3  font-size: 2rem;4  margin-bottom: 16px;5}

This rule applies three declarations to all <h1> elements.

It sets:

1the text colour2the font size3the bottom margin

Each declaration ends with a semicolon.

The semicolon helps separate one declaration from the next.

A Complete HTML and CSS Example

Here is a simple HTML page:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>CSS Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <h1>Welcome</h1>11  <p>This page is styled with CSS.</p>12  <a href=”about.html”>Learn more</a>13 14</body>15</html>

The CSS file might look like this:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4}5 6h1 {7  color: navy;8}9 10a {11  color: darkgreen;12}

The HTML creates the content.

The CSS changes the way the content appears.

Where CSS Can Be Written

CSS can be added to a page in three main ways:

1external CSS2internal CSS3inline CSS

External CSS is written in a separate .css file.

Internal CSS is written inside a <style> element.

Inline CSS is written directly on an HTML element.

For most real websites, external CSS is usually the best approach.

External CSS

External CSS uses a separate CSS file.

For example, your project might look like this:

1my-website/2  index.html3  styles.css

The HTML file links to the CSS file:

1<link rel=”stylesheet” href=”styles.css”>

This line goes inside the <head> element.

The CSS file contains the styles:

1body {2  font-family: Arial, sans-serif;3}4 5h1 {6  color: navy;7}

External CSS keeps the HTML cleaner.

It also allows the same CSS file to style multiple pages.

Internal CSS

Internal CSS is written inside a <style> element in the HTML file.

Example:

1<head>2  <style>3    body {4      font-family: Arial, sans-serif;5    }6 7    h1 {8      color: navy;9    }10  </style>11</head>

This can be useful for small examples or quick testing.

However, for larger websites, internal CSS can become difficult to manage.

A separate CSS file is usually better.

Inline CSS

Inline CSS is written directly on an HTML element using the style attribute.

Example:

1<h1 style=”color: navy;”>Welcome</h1>

This works, but it is usually not the best way to style a page.

Inline CSS mixes structure and presentation in the same place.

It can also make styles harder to reuse.

A better approach is usually:

1<h1>Welcome</h1>

and:

1h1 {2  color: navy;3}

Use external CSS for most styling.

Use inline CSS only for limited special cases or quick tests.

Linking CSS to HTML

The most common way to connect HTML and CSS is with the <link> element.

Example:

1<link rel=”stylesheet” href=”styles.css”>

This belongs inside the <head>:

1<head>2  <meta charset=”UTF-8″>3  <title>My Page</title>4  <link rel=”stylesheet” href=”styles.css”>5</head>

The rel="stylesheet" attribute tells the browser that the linked file is a CSS stylesheet.

The href="styles.css" attribute tells the browser where the CSS file is.

If the path is wrong, the CSS will not load.

CSS File Paths

The href path must point to the correct CSS file.

If styles.css is in the same folder as index.html, use:

1<link rel=”stylesheet” href=”styles.css”>

Example folder structure:

1my-website/2  index.html3  styles.css

If the CSS file is inside a folder called css, use:

1<link rel=”stylesheet” href=”css/styles.css”>

Example folder structure:

1my-website/2  index.html3  css/4    styles.css

Correct file paths are essential.

If the browser cannot find the CSS file, the page will not be styled.

CSS Changes the Same HTML

One powerful idea is that the same HTML can look very different with different CSS.

For example, this HTML is simple:

1<section class=”card”>2  <h2>HTML</h2>3  <p>HTML structures web pages.</p>4</section>

This CSS can make it look like a card:

1.card {2  border: 1px solid #cccccc;3  padding: 16px;4  border-radius: 8px;5}

Another CSS file could make it look completely different.

The HTML content stays the same.

The CSS controls the presentation.

CSS Can Style Text

CSS is often used to control typography.

For example:

1body {2  font-family: Arial, sans-serif;3  font-size: 16px;4  line-height: 1.6;5}

This sets the main font, text size, and line spacing.

Headings can be styled too:

1h1 {2  font-size: 2.5rem;3  font-weight: bold;4}

Good text styling can make a page easier to read.

CSS should support readability, not just decoration.

CSS Can Style Colours and Backgrounds

CSS can change text colours and background colours.

Example:

1body {2  background-color: #f5f7fb;3  color: #222222;4}

This gives the page a light background and dark text.

A section could have its own background:

1.hero {2  background-color: #e8f0ff;3  padding: 32px;4}

The HTML might look like this:

1<section class=”hero”>2  <h1>Learn CSS</h1>3  <p>CSS controls how web pages look.</p>4</section>

The class connects the HTML to the CSS.

CSS Can Control Spacing

Spacing is one of the most important parts of web design.

CSS can control space inside and outside elements.

For example:

1section {2  margin-bottom: 32px;3  padding: 24px;4}

The margin controls space outside the element.

The padding controls space inside the element.

Spacing helps separate content and make pages easier to scan.

Without good spacing, a page can feel crowded.

CSS Can Create Layouts

CSS can control how elements are arranged on the page.

For example, CSS can create columns, grids, cards, and responsive layouts.

A simple layout example:

1.container {2  width: 90%;3  max-width: 1000px;4  margin: 0 auto;5}

This creates a centered container that adapts to the screen size.

The HTML might look like this:

1<main class=”container”>2  <h1>Welcome</h1>3  <p>This content is inside a centered container.</p>4</main>

CSS layout is a large topic, but the basic idea is simple.

HTML creates the content.

CSS arranges the content.

CSS Can Make Pages Responsive

Responsive design means a page adapts to different screen sizes.

For example, a page may look different on a phone than on a desktop.

CSS can use media queries:

1@media (max-width: 600px) {2  body {3    font-size: 16px;4  }5 6  nav {7    display: block;8  }9}

This CSS applies only when the viewport is 600 pixels wide or less.

Responsive design also often uses flexible widths:

1img {2  max-width: 100%;3  height: auto;4}

This helps images fit smaller screens.

CSS Can Style Forms and Buttons

HTML creates form controls.

CSS can make them easier to use and more visually consistent.

Example HTML:

1<form>2  <label for=”email”>Email address</label>3  <input type=”email” id=”email” name=”email”>4 5  <button type=”submit”>Subscribe</button>6</form>

Example CSS:

1label {2  display: block;3  margin-bottom: 4px;4}5 6input {7  padding: 10px;8  width: 100%;9}10 11button {12  padding: 10px 16px;13}

CSS improves the presentation.

The HTML still provides the structure and meaning.

CSS Can Style States

CSS can style elements in different states.

For example, links can change when a user hovers over them:

1a:hover {2  text-decoration: underline;3}

Buttons can change when focused:

1button:focus {2  outline: 2px solid blue;3}

These states help users understand what they are interacting with.

Focus styles are especially important for keyboard users.

Do not remove focus outlines unless you replace them with a clear alternative.

The Cascade

The “C” in CSS stands for cascading.

The cascade is the system the browser uses to decide which CSS rule applies when more than one rule targets the same element.

For example:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

HTML:

1<p class=”intro”>Welcome to the site.</p>

Both rules target the paragraph.

The class rule may win because it is more specific.

You do not need to master the full cascade immediately.

For now, understand that CSS rules can interact, override, and build on each other.

Inheritance

Some CSS properties are inherited from parent elements.

For example:

1body {2  font-family: Arial, sans-serif;3  color: #222222;4}

Many text elements inside the body will inherit the font and colour unless another rule changes them.

This is useful because you can set general styles once.

Then you can override them only where needed.

For example:

1h1 {2  color: navy;3}

The page text may be dark gray, but headings can be navy.

CSS Comments

CSS comments help explain code.

A CSS comment looks like this:

1/* This styles the main page heading */2h1 {3  color: navy;4}

Comments are ignored by the browser.

They are useful for developers reading the CSS.

Do not put private information in comments because CSS files can usually be viewed by users.

A Simple CSS File

Here is a simple CSS file for a basic page:

1/* Basic page styles */2body {3  font-family: Arial, sans-serif;4  line-height: 1.6;5  margin: 0;6  color: #222222;7  background-color: #f5f7fb;8}9 10/* Layout */11.container {12  width: 90%;13  max-width: 1000px;14  margin: 0 auto;15}16 17/* Headings */18h1 {19  color: navy;20  font-size: 2.5rem;21}22 23/* Links */24a {25  color: darkblue;26}

This CSS controls the overall page appearance.

It styles the body, layout container, heading, and links.

A Complete HTML and CSS Pair

Here is a complete example using HTML and CSS together.

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>6  <title>Introduction to CSS</title>7  <link rel=”stylesheet” href=”styles.css”>8</head>9<body>10 11  <main class=”container”>12    <h1>An Introduction to CSS</h1>13 14    <p class=”intro”>15      CSS controls how HTML content looks on the page.16    </p>17 18    <section class=”card”>19      <h2>What CSS Does</h2>20      <p>21        CSS can style text, colours, spacing, layout, borders,22        backgrounds, and responsive behaviour.23      </p>24    </section>25 26    <a class=”button-link” href=”next-lesson.html”>Continue learning</a>27  </main>28 29</body>30</html>

CSS:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4  margin: 0;5  background-color: #f5f7fb;6  color: #222222;7}8 9.container {10  width: 90%;11  max-width: 900px;12  margin: 0 auto;13  padding: 32px 0;14}15 16.intro {17  font-size: 1.2rem;18}19 20.card {21  background-color: white;22  padding: 24px;23  border: 1px solid #dddddd;24  border-radius: 8px;25  margin: 24px 0;26}27 28.button-link {29  display: inline-block;30  padding: 12px 18px;31  text-decoration: none;32  border: 1px solid #333333;33}

The HTML gives meaning and structure.

The CSS gives presentation and layout.

Together, they create the page users see.

Common Mistake: Expecting CSS to Create Content

CSS can style content, but HTML creates the content.

For example, this HTML creates a heading:

1<h1>Welcome</h1>

CSS can style it:

1h1 {2  color: navy;3}

CSS should not be used as the main way to add important text.

Important content should be written in HTML.

CSS should control how it looks.

Common Mistake: Forgetting to Link the CSS File

If your CSS is in a separate file, the HTML must link to it.

Less complete:

1<head>2  <title>My Page</title>3</head>

Better:

1<head>2  <title>My Page</title>3  <link rel=”stylesheet” href=”styles.css”>4</head>

If the CSS file is not linked, the browser will not apply it.

Common Mistake: Using the Wrong File Path

This only works if styles.css is in the same folder as the HTML file:

1<link rel=”stylesheet” href=”styles.css”>

If the CSS file is inside a css folder, use:

1<link rel=”stylesheet” href=”css/styles.css”>

If the path is wrong, the page may appear unstyled.

Check the file name, folder name, and spelling.

Common Mistake: Mixing Too Much CSS into HTML

Inline styles can make HTML harder to maintain.

Less ideal:

1<p style=”color: blue; font-size: 18px;”>This is a paragraph.</p>

Better:

1<p class=”intro”>This is a paragraph.</p>

1.intro {2  color: blue;3  font-size: 18px;4}

Using classes and external CSS keeps the code cleaner.

Common Mistake: Using CSS Instead of Semantic HTML

Do not choose HTML elements only because of how they look.

For example, do not use a paragraph as a heading just because CSS can make it large:

1<p class=”big-heading”>About Us</p>

Better:

1<h1>About Us</h1>

CSS can then style the heading:

1h1 {2  font-size: 2.5rem;3}

HTML should describe meaning.

CSS should describe appearance.

Common Mistake: Removing Useful Focus Styles

Some people remove focus outlines because they do not like how they look:

1button:focus {2  outline: none;3}

This can make the page harder to use with a keyboard.

Better:

1button:focus {2  outline: 2px solid blue;3}

Focus styles show users where they are on the page.

They are important for accessibility.

Common Mistake: Making Fixed-Width Layouts

A fixed-width layout can cause problems on small screens:

1.container {2  width: 1200px;3}

On a phone, 1200 pixels may be too wide.

A more flexible approach:

1.container {2  width: 90%;3  max-width: 1200px;4}

This lets the layout shrink on small screens and stop growing too wide on large screens.

Best Practices

Use HTML for structure and meaning.

Use CSS for presentation and layout.

Use external CSS for most real projects.

Link CSS with:

1<link rel=”stylesheet” href=”styles.css”>

Place the link inside the <head>.

Use clear selectors.

Use classes for reusable styles.

Keep CSS organised and readable.

Use comments when they help explain sections.

Avoid excessive inline styles.

Do not use CSS as a replacement for semantic HTML.

Use flexible layouts instead of fixed-width designs.

Keep text readable.

Maintain visible focus styles.

Test the page on different screen sizes.

Summary

CSS stands for Cascading Style Sheets.

CSS controls how HTML content looks.

HTML creates the structure:

1<h1>Welcome</h1>2<p>This is a paragraph.</p>

CSS controls the presentation:

1h1 {2  color: navy;3}4 5p {6  line-height: 1.6;7}

The most common way to connect CSS to HTML is with a <link> element:

1<link rel=”stylesheet” href=”styles.css”>

CSS can style text, colours, spacing, backgrounds, borders, layouts, buttons, forms, and responsive behaviour.

The main idea is simple:

1HTML describes what the content is.2CSS describes how the content looks.

Once you understand that difference, it becomes much easier to build clean, organised, and well-designed web pages.