---
# System prepended metadata

title: Introduction to Cascading Style Sheets (CSS)

---

# Introduction to Cascading Style Sheets (CSS)
## Week 4(Blockfuse Labs Cohort IV)

## Introduction to Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a stylesheet language used to control the appearance and layout of web pages. While HTML is responsible for the structure of a webpage, CSS is used to make that structure look good.

In simple terms:

HTML = structure

CSS = design

What CSS Is Used For

CSS allows you to:

Change text colors and fonts

Set background colors and images

Control spacing and alignment

Create layouts (columns, grids, flexible designs)

Make websites responsive across different screen sizes

Without CSS, websites would look plain and unorganized.

## How CSS Works

CSS works by selecting HTML elements and applying styles to them.

A basic CSS rule looks like this:

```
p {
  color: blue;
  font-size: 16px;
}
```


p → selector (targets all paragraph elements)

color and font-size → properties

blue and 16px → values

Ways to Add CSS to HTML

There are three main ways to apply CSS:

### 1. Inline CSS

Applied directly inside an HTML tag.

```
<p style="color: red;">Hello World</p>
```

### 2. Internal CSS

Written inside a <style> tag in the HTML <head>.

<style>
  p {
    color: green;
  }
</style>

### 3. External CSS (Most recommended)

Written in a separate .css file and linked to HTML.

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


This method keeps code clean and reusable.

### Why CSS Is Important

Improves user experience

Makes websites visually appealing

Helps separate content from design

Essential for modern web development

### Conclusion

CSS is a core web technology that works alongside HTML and JavaScript. Learning CSS is a crucial step in becoming a front-end or full-stack developer.