Basics of CSS

· CSS3 Module

CSS is the beauty and personality of a webpage.
HTML builds the structure like bricks of a house, while CSS paints the walls, arranges the furniture, and gives style to everything.

Without CSS, websites look plain like old newspaper text.
With CSS, they become modern, colorful, responsive, and attractive.

1. What is CSS Syntax?

CSS Syntax means the way we write CSS rules.

Every CSS rule has 2 important parts:

  • Selector → Which HTML element to style
  • Declaration Block → What style to apply

Basic Structure

selector {
    property: value;
}

Real Example

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

Explanation

Part Meaning
h1 Selector
color Property
blue Value
font-size Property
40px Value

Logic Behind CSS Syntax

Think like giving instructions to a painter:

“Paint the heading blue and make it big.”

CSS works exactly like that.

  • Selector = Who should change
  • Property = What should change
  • Value = How it should look

2. Selectors and Properties

What is a Selector?

A selector chooses the HTML element you want to style.

It tells CSS:

“Apply these styles to this specific element.”

Types of Basic Selectors

A. Element Selector

Selects HTML tags directly.

Example

p {
    color: green;
}

Meaning

All <p> paragraphs become green.

HTML Example

<p>Hello Students</p>
<p>Welcome to CSS</p>

Output

Both paragraphs become green.

B. ID Selector

Used for one unique element.

Uses #

Example

#title {
    color: red;
}

HTML

<h1 id="title">CSS Class</h1>

Output

Only this heading becomes red.

Logic

ID is like Aadhaar number — unique for one person.

C. Class Selector

Used for multiple elements.

Uses .

Example

.note {
    background-color: yellow;
}

HTML

<p class="note">Important point</p>
<h2 class="note">Read carefully</h2>

Output

Both elements get yellow background.

Logic

Class is like a school uniform.

Many students can wear the same uniform.

What are Properties?

Properties define what style should change.

Common CSS Properties

Property Purpose
color Text color
background-color Background color
font-size Text size
text-align Alignment
margin Outside space
padding Inside space
border Border style

Example

h1 {
    color: white;
    background-color: black;
    text-align: center;
}

3. Types of CSS

There are 3 main ways to apply CSS.

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Each method has different use cases.

A. Inline CSS

CSS written directly inside an HTML tag.

Uses the style attribute.

Example

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

Output

Heading becomes blue.

Logic

Inline CSS works only for one specific element.

It is quick but not professional for large websites.

Real-Life Example

Like writing a personal instruction on one paper only.

“This page should be red.”

Advantages

  • Fast for testing
  • Easy for small changes

Disadvantages

  • Repeats code
  • Difficult to manage
  • Makes HTML messy

B. Internal CSS

CSS written inside the <style> tag in the same HTML file.

Usually placed inside <head>.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: green;
}
</style>
</head>

<body>
<h1>Hello CSS</h1>
</body>
</html>

Output

Heading becomes green.

Logic

Internal CSS styles the whole page from one location.

Better than inline CSS.

Advantages

  • Cleaner than inline
  • Easy for single-page websites

Disadvantages

  • Cannot reuse styles across multiple pages

C. External CSS

CSS written in a separate .css file.

Connected using <link>.

Step 1 – Create CSS File

style.css

h1 {
    color: purple;
}

Step 2 – Connect CSS File

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

Full Example

HTML File

<!DOCTYPE html>
<html>

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

<body>

<h1>Learning CSS</h1>

</body>
</html>

Output

Heading becomes purple.

Logic Behind External CSS

One CSS file can control many webpages.

This is the professional industry method.

Real-Life Example

Like a school rulebook.

One rulebook applies to all classrooms.

Advantages

  • Clean code
  • Reusable
  • Easy maintenance
  • Professional method
  • Faster website management

Disadvantages

  • Needs separate file connection

Comparison of CSS Types

Feature Inline Internal External
Location Inside tag Same page Separate file
Reusability No Limited Yes
Professional No Medium Yes
Best For Quick testing Small pages Real websites

4. CSS Comments

Comments are notes written for developers.

Browser ignores comments.

Syntax

/* This is a CSS comment */

Example

/* Main heading style */

h1 {
    color: blue;
}

Why Comments are Important

Comments help developers:

  • Understand code
  • Organize sections
  • Remember logic
  • Work in teams

Real-Life Example

Like writing notes in a notebook:

“Important formula starts here.”

Mini Real Website Example

HTML

<!DOCTYPE html>
<html>

<head>

<style>

/* Website Heading */

h1 {
    color: white;
    background-color: black;
    text-align: center;
}

/* Paragraph Styling */

p {
    color: gray;
    font-size: 20px;
}

</style>

</head>

<body>

<h1>Welcome Students</h1>

<p>Today we learn CSS basics.</p>

</body>
</html>

Output Explanation

  • Heading has white text and black background
  • Paragraph has gray color and bigger font
  • CSS styles are applied using internal CSS

Important Interview Questions

Q1. What is CSS syntax?

CSS syntax is the structure used to write CSS rules using selectors, properties, and values.

Q2. Difference between class and ID?

Class ID
Used multiple times Used once
Uses . Uses #

Q3. Which CSS type is best?

External CSS is best for professional websites because it is reusable and manageable.

Common Beginner Mistakes

Mistake Correct Way
Missing semicolon Add ;
Wrong selector symbol Use . for class, # for ID
Forgetting link tag Connect external CSS properly
Writing property without value Always give value

Learning Outcome

After completing this module, students will be able to:

✅ Understand CSS syntax
✅ Use selectors correctly
✅ Apply CSS properties
✅ Differentiate between inline, internal, and external CSS
✅ Write professional CSS code
✅ Use comments for better code organization

Simple Homework Practice

Create a webpage with:

  • One heading
  • Two paragraphs
  • Apply:
    • Text color
    • Background color
    • Font size
  • Use:
    • Inline CSS
    • Internal CSS
    • External CSS

Then compare the results.

Final Thought

CSS is not merely decoration.
It is the language of presentation, balance, and visual storytelling.

A good developer writes HTML for structure,
but a skilled developer breathes life into it using CSS.

List of Modules

Anas Khan
Written by