1. What is CSS?

Definition

CSS (Cascading Style Sheets) is used to style and design HTML web pages. It controls how elements like text, images, tables, and layouts appear on the screen.

With CSS you can change:

Colors & Fonts
Spacing & Layout
Alignment

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

<h1>Welcome to CSS</h1>

2. CSS Syntax

CSS syntax defines how CSS rules are written to style HTML elements.

Part	Meaning
Selector	HTML element to style
Property	Style type (color, size)
Value	Style value

/* Selector { Property: Value; } */
p {
  color: red;
  font-size: 18px;
}

<!DOCTYPE html>
<html>
<head>
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p>Styled Paragraph</p>
</body>
</html>

3. CSS Types

There are 3 ways to apply CSS in HTML. Each has a specific purpose and scope.

3.1 Inline CSS

Written directly inside the HTML tag.

3.2 Internal CSS

Written inside the <head> section.

3.3 External CSS

Written in a separate .css file.

3.1 Inline CSS

Definition

Written inside the HTML element using the style attribute.

Rules:

Applied to one element only.
Not recommended for large websites.

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

<p style="font-size:20px;">
  This is a paragraph.
</p>

3.2 Internal CSS

Definition

Written inside the <style> tag in the <head> section.

Rules:

Applies to only one webpage.
Good for single-page styling.

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

3.3 External CSS

Step 1: style.css

h1 { color: blue; }
p { font-size: 20px; }

Step 2: Link in HTML

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

Rules:

CSS is stored in a separate file.
Can style multiple pages at once.
Best method for professional websites.

4. CSS Comments

Syntax: /* comment */

Comments are ignored by the browser. They help developers understand the code.

Rules:

Used for explanation.
Helps in teamwork & maintenance.

/* Change heading color */
h1 { color: red; }

/* Style paragraph size */
p { font-size: 20px; }