Introduction to CSS

After building a web page with HTML, you have the structure of the page, but the result is usually very basic.

The browser applies its own default styles to HTML elements. A heading looks like a heading, a paragraph looks like a paragraph, and a button looks like a button.

This is similar to opening a new document in Microsoft Word or Google Docs. You get a default page, default fonts, default spacing, and default styles.

That is useful, but it is rarely enough for a real website.

This is where CSS comes in.

1. What Is CSS?

CSS stands for Cascading Style Sheets.

CSS is used to control how HTML elements look on a web page.

With CSS, we can change things such as:

Font
Font size
Text color
Background color
Width and height
Spacing
Borders
Alignment
Position
Layout
Animations
Responsive behavior

For example, HTML gives us:

<h1>Hello, world!</h1>

Without CSS, the browser decides how that heading should look.

With CSS:

h1 {
    color: blue;
    font-size: 48px;
}

we tell the browser how we want the heading to look.

The basic idea is:

HTML
  ↓
Structure and content

CSS
  ↓
Appearance and layout

2. Why Do We Need CSS?

Imagine building a website using only HTML.

You could have:

<h1>My Website</h1>

<p>
    Welcome to my website.
</p>

<button>
    Click me
</button>

The browser can display everything correctly.

But it will look very plain.

You might want:

a different font
a larger heading
more spacing
a colored button
a different background
a specific layout

HTML describes what the elements are.

CSS lets us control how those elements look and are arranged.

For example:

body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 48px;
    color: #333;
}

button {
    background: black;
    color: white;
    padding: 12px 20px;
}

Now the same HTML can look completely different.

3. How Does CSS Work?

CSS consists of rules.

A basic CSS rule looks like this:

h1 {
    color: blue;
    font-size: 48px;
}

There are three important parts.

Selector

h1

The selector tells the browser which HTML elements should receive the style.

Property

color

The property tells the browser what aspect of the element we want to change.

Value

blue

The value tells the browser what we want that property to be.

So:

color: blue;

means:

Set the text color to blue.

The complete rule:

h1 {
    color: blue;
    font-size: 48px;
}

means:

Find the relevant <h1> elements and give them these styles.

4. The Three Ways to Use CSS

There are three common ways to add CSS to an HTML document:

Inline CSS
Internal CSS
External CSS

They all use the same CSS syntax, but the CSS is placed in different locations.

5. Inline CSS

The simplest way to add CSS is to put it directly on an HTML element.

For example:

<h1 style="color: blue;">
    Hello, world!
</h1>

The style attribute contains the CSS.

We can add multiple properties:

<h1
    style="
        color: blue;
        font-size: 48px;
        background-color: lightgray;
    "
>
    Hello, world!
</h1>

The CSS is written directly inside the element.

This is called inline CSS.

5.1 When Is Inline CSS Useful?

Inline CSS can be useful when you only need to style one specific element.

For example:

<p style="color: red;">
    This is an important message.
</p>

Only this paragraph receives the style.

However, there is a problem.

Imagine having a large website with hundreds of elements.

You could end up with HTML like this:

<h1 style="font-size: 48px; color: black;">
    Welcome
</h1>

<p style="font-size: 18px; color: #555;">
    Some text.
</p>

<button
    style="
        background: black;
        color: white;
        padding: 12px 20px;
    "
>
    Click me
</button>

The HTML becomes harder to read.

The structure and styling are mixed together.

This is why we have other ways to write CSS.

6. Internal CSS

Instead of putting CSS directly on every element, we can put CSS in a <style> element.

The <style> element is usually placed inside the <head> of the HTML document.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>

    <style>
        h1 {
            color: blue;
            font-size: 48px;
        }

        p {
            color: #555;
            font-size: 18px;
        }
    </style>
</head>

<body>

    <h1>Hello, world!</h1>

    <p>
        Welcome to my website.
    </p>

</body>
</html>

Now the styling is separated from the HTML elements.

But there is a new question:

How does CSS know which elements it should style?

The answer is selectors.

7. CSS Selectors

A selector tells CSS which HTML elements a rule should apply to.

There are many types of selectors, but three important ones to learn first are:

Element selectors
Class selectors
ID selectors

8. Element Selector

The simplest selector is the HTML element name.

For example:

h1 {
    color: blue;
}

This targets <h1> elements.

So:

<h1>First heading</h1>
<h1>Second heading</h1>
<h1>Third heading</h1>

will all receive the style:

h1 {
    color: blue;
}

The same works with other elements:

p {
    font-size: 18px;
}

button {
    padding: 10px 20px;
}

ul {
    list-style: none;
}

An element selector applies the rule to all matching elements.

9. Class Selector

Sometimes we don't want to style every element of the same type.

For example, imagine this:

<h1>Website Title</h1>

<h1>Special Heading</h1>

Maybe we want only the second heading to have a different style.

This is where a class is useful.

Add a class to the element:

<h1 class="special">
    Special Heading
</h1>

Then define the CSS:

.special {
    color: red;
}

Notice the dot:

.special

The . means that we are selecting a class.

9.1 Why Are Classes Useful?

A class can be reused.

For example:

<h1 class="special">
    Heading
</h1>

<p class="special">
    Important paragraph
</p>

<button class="special">
    Button
</button>

We can style all of them with:

.special {
    color: red;
}

The elements do not have to be the same HTML element.

The important thing is that they have the same class.

This makes classes very useful for reusable styles.

For example:

.card {
    padding: 20px;
    border-radius: 12px;
    background-color: white;
}

Then we can reuse it:

<div class="card">
    Card 1
</div>

<div class="card">
    Card 2
</div>

<div class="card">
    Card 3
</div>

All three elements receive the same styling.

10. ID Selector

An ID is useful when we want to identify a specific element.

For example:

<h1 id="main-title">
    My Website
</h1>

The CSS selector uses #:

#main-title {
    color: blue;
}

The # means that we are selecting an ID.

For example:

<button id="login-button">
    Login
</button>

#login-button {
    background-color: black;
    color: white;
}

The ID identifies that particular element.

11. Class vs ID

The syntax is easy to remember:

.class-name {
}

uses a dot.

#id-name {
}

uses a hashtag.

For example:

<p class="description">
    Some text.
</p>

<button id="submit-button">
    Submit
</button>

.description {
    color: gray;
}

#submit-button {
    background-color: black;
}

A useful rule for beginners is:

Use classes for reusable styles. Use IDs when you need to identify one specific element.

Classes are generally the more common choice for styling components.

12. External CSS

There is still one major problem with internal CSS.

Imagine having:

index.html
about.html
projects.html
contact.html

If all of these pages use the same styles, we don't want to copy the same <style> block into every HTML file.

Instead, we can create a separate CSS file.

For example:

project/
├── index.html
├── about.html
├── projects.html
├── contact.html
└── style.css

The CSS goes into:

style.css

For example:

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
}

button {
    background-color: black;
    color: white;
}

Then we connect it to our HTML.

13. Linking an External CSS File

Inside the <head> of the HTML document, use:

<link rel="stylesheet" href="style.css">

For example:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <h1>Hello, world!</h1>

</body>
</html>

The important part is:

rel="stylesheet"

This tells the browser that the linked resource is a stylesheet.

And:

href="style.css"

tells the browser where the CSS file is located.

14. Why External CSS Is Useful

Now we can use the same CSS file across multiple pages.

For example:

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<!-- about.html -->

<link rel="stylesheet" href="style.css">

<!-- contact.html -->

<link rel="stylesheet" href="style.css">

All three pages can use the same stylesheet.

This gives us a much cleaner structure:

HTML
    → page structure

CSS
    → page styling

Instead of repeating the same CSS in every page, we define it once.

If we change:

button {
    background-color: black;
}

to:

button {
    background-color: blue;
}

every page using that stylesheet can receive the change.

This becomes especially useful as a website grows.

15. The Three Methods Together

Here is the same idea using all three approaches.

Inline CSS

<h1 style="color: blue;">
    Hello
</h1>

The CSS is directly on the element.

Internal CSS

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

The CSS is inside the HTML document.

External CSS

<head>
    <link rel="stylesheet" href="style.css">
</head>

with:

h1 {
    color: blue;
}

The CSS is stored in a separate file.

For larger websites, external CSS is generally the cleanest structure.

16. CSS Properties

There are many CSS properties.

Some common ones are:

color: red;

Changes the text color.

background-color: black;

Changes the background color.

font-size: 24px;

Changes the font size.

font-family: Arial, sans-serif;

Changes the font.

width: 300px;

Changes the width.

height: 200px;

Changes the height.

padding: 20px;

Adds space inside an element.

margin: 20px;

Adds space outside an element.

border-radius: 12px;

Rounds the corners.

For example:

.card {
    width: 300px;
    padding: 20px;
    background-color: white;
    border-radius: 12px;
}

17. Padding vs Margin

Two properties that beginners often confuse are padding and margin.

Consider a box:

        margin
    ┌───────────────┐
    │    padding    │
    │  ┌─────────┐  │
    │  │ content │  │
    │  └─────────┘  │
    └───────────────┘

Padding is the space between the content and the edge of the element.

Margin is the space outside the element.

For example:

.card {
    padding: 20px;
    margin: 30px;
}

means:

30px outside the card
        ↓
┌─────────────────────┐
│     20px padding    │
│   ┌─────────────┐   │
│   │   content   │   │
│   └─────────────┘   │
└─────────────────────┘

Understanding this is important when you start creating layouts.

18. CSS and Layout

CSS is not only about changing colors and fonts.

It is also responsible for arranging elements on the page.

For example, we can use Flexbox:

.container {
    display: flex;
    gap: 20px;
}

If we have:

<div class="container">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

the elements can be arranged next to each other.

CSS Grid is another important layout system:

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

These layout systems become especially important when building responsive websites.

19. What Does Responsive CSS Mean?

A website is not always viewed on the same screen.

Someone might open it on:

Desktop
Laptop
Tablet
Phone

These screens have different sizes.

A layout that looks good on a large monitor may not work well on a phone.

Responsive design means designing the website so that it adapts to different screen sizes.

For example:

Desktop

[ Sidebar ] [ Content ][ Content ]

could become:

Mobile

[ Content ]
[ Content ]
[ Content ]

The HTML can remain mostly the same while CSS changes the layout.

20. Media Queries

One of the main tools for responsive CSS is a media query.

For example:

.container {
    display: flex;
}

We might want the layout to become vertical on smaller screens:

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

The idea is:

Screen width > 768px
        ↓
Use the normal layout

Screen width ≤ 768px
        ↓
Use the mobile layout

This lets us create different styles for different screen sizes.

21. Responsive Navigation

This is where CSS and JavaScript start working together.

A navigation menu might look like this on desktop:

Home   About   Projects   Contact

On mobile, we might want:

☰

CSS can determine how the navigation looks at different screen sizes.

JavaScript can handle the interaction.

For example:

CSS
 ↓
Makes the menu responsive

JavaScript
 ↓
Opens and closes the menu

This is an important pattern in web development:

HTML provides the structure, CSS controls the presentation, and JavaScript controls the behavior.

22. A Simple Responsive Example

HTML:

<nav>
    <button id="menu-button">
        Menu
    </button>

    <div class="menu">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Projects</a>
    </div>
</nav>

CSS:

.menu {
    display: flex;
    gap: 20px;
}

#menu-button {
    display: none;
}

@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
    }

    #menu-button {
        display: block;
    }
}

Now the CSS controls which navigation style is appropriate for the screen size.

JavaScript can then control whether the mobile menu is opened or closed.

23. A Simple Mental Model for CSS

When writing CSS, ask three questions:

1. What do I want to style?
           ↓
       Selector

2. What do I want to change?
           ↓
       Property

3. What should the new value be?
           ↓
        Value

For example:

.card {
    padding: 20px;
}

means:

What?
→ .card

What do I change?
→ padding

What should it be?
→ 20px

This simple way of thinking makes CSS much easier to understand.

24. The Overall Structure

You can now think of a basic website as three separate responsibilities.

HTML
│
├── Content
├── Elements
└── Structure

CSS
│
├── Colors
├── Fonts
├── Spacing
├── Layout
└── Responsive design

JavaScript
│
├── Logic
├── User interaction
├── Events
├── Dynamic content
└── Data

For example, a mobile navigation might use all three:

HTML
    ↓
Creates the navigation and button

CSS
    ↓
Controls its appearance and responsive layout

JavaScript
    ↓
Opens and closes the menu

This separation is one of the fundamental ideas behind frontend web development.

25. What You Should Learn Next

After the basics of CSS, the most useful topics to learn are:

The box model
Units such as px, %, rem, em, vh, and vw
Flexbox
CSS Grid
Positioning
Responsive design
Media queries
Pseudo-classes such as :hover
CSS transitions and animations
CSS variables

You do not need to memorize every CSS property.

The important thing is to understand how CSS works and know how to find the property you need.

Final Takeaway

CSS is the language we use to control the appearance and layout of HTML.

The basic relationship is:

HTML
  ↓
What exists?

CSS
  ↓
How does it look and where does it go?

JavaScript
  ↓
What does it do?

There are three common ways to write CSS:

Inline CSS
    ↓
style="..."

Internal CSS
    ↓
<style>...</style>

External CSS
    ↓
style.css

And there are three important selectors to start with:

Element
    ↓
h1 { }

Class
    ↓
.card { }

ID
    ↓
#main-title { }

Once you understand these concepts, you can move from styling individual elements to building complete layouts and responsive interfaces.

The next step is to use JavaScript together with HTML and CSS to make those interfaces interactive.

Introducing CSS

Introduction to CSS

1. What Is CSS?

2. Why Do We Need CSS?

3. How Does CSS Work?

Selector

Property

Value

4. The Three Ways to Use CSS

5. Inline CSS

5.1 When Is Inline CSS Useful?

6. Internal CSS

7. CSS Selectors

8. Element Selector

9. Class Selector

9.1 Why Are Classes Useful?

10. ID Selector

11. Class vs ID

12. External CSS

13. Linking an External CSS File

14. Why External CSS Is Useful

15. The Three Methods Together

Inline CSS

Internal CSS

External CSS

16. CSS Properties

17. Padding vs Margin

18. CSS and Layout

19. What Does Responsive CSS Mean?

20. Media Queries

21. Responsive Navigation

22. A Simple Responsive Example

23. A Simple Mental Model for CSS

24. The Overall Structure

25. What You Should Learn Next

Final Takeaway