CSS Introduction


🔹 What is CSS?

CSS stands for Cascading Style Sheets. It is used to control the style and layout of multiple web pages all at once.

With CSS, you can change:

  • Colors

  • Fonts

  • Spacing

  • Layouts

  • Animations


🔹 Why Use CSS?

  • Separation of content and design

  • Makes the website more attractive and user-friendly

  • Helps maintain consistency across pages

  • Saves time – styles can be reused via external stylesheets


🔹 CSS Syntax

selector {
  property: value;
}
 
Example:
p {
  color: red;
  font-size: 18px;
}
 

This CSS makes all <p> elements red and 18px in size.


🔹 Three Ways to Apply CSS

1. Inline CSS

Applied directly to an HTML element.

<p style="color:blue;">This is blue text.</p>
 
2. Internal CSS

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

<head>
  <style>
    body {
      background-color: lightgrey;
    }
  </style>
</head>
 
3. External CSS

Stored in a separate .css file and linked using:

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

🔹 CSS Selectors

Selector Description
* Selects all elements
p Selects all <p> elements
.class Selects all elements with a class
#id Selects an element with a specific ID
div p Selects all <p> inside <div>

Practice Questions

Q1. Make a heading text red using inline CSS.

Q2. Change body background using internal CSS.

Q3. Change paragraph font size using class.

Q4. Use external CSS to color a paragraph blue.

Q5. Change multiple properties of a div.

 
 
 

Go Back Top