---
# System prepended metadata

title: 'CSS: A Practical Introduction for Beginners'

---

CSS (Cascading Style Sheets) is the technology that controls how web pages look and feel. It defines layout, colors, fonts, spacing, and responsiveness. Without CSS, websites would appear as plain text documents with no visual structure. This tutorial introduces CSS concepts step by step and shows how they are applied in real projects.

# **What CSS Does**

HTML provides structure, but CSS controls presentation. With CSS, you can:

* Change colors and fonts
* Control spacing and alignment
* Create responsive layouts 
* Add animations and transitions

CSS allows developers to separate content from design, making websites easier to maintain and scale.
# Ways to Use CSS

There are three main ways to apply CSS to HTML.
1. Inline CSS

CSS is written directly inside an HTML tag.

`<p style="color: blue; font-size: 18px;">Hello World</p>`

This method is quick but not recommended for large projects.

2. Internal CSS

CSS is written inside a `<style>`tag in the HTML file.
```
<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is styled using internal CSS.</p>
</body>
</html>
```
3. External CSS (Best Practice)

CSS is written in a separate .css file.
`<html>`
`<link rel="stylesheet" href="styles.css">`

`<css>`
```
/* Element selector */
p {
  color: black;
}

/* Class selector */
.card {
  background: #f4f4f4;
}

/* ID selector */
#header {
  font-size: 24px;
}
```
# The Box Model

Every HTML element is a box consisting of:

* Content
* Padding
* Border
* Margin

```
<css>
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}
```
Understanding the box model is essential for layout control.