Saturday, March 28, 2026

Basic Understanding of CSS (For Beginners)

1. What is CSS?

CSS stands for Cascading Style Sheets.

👉 It is used to style and design web pages.

If HTML is the structure, then CSS is the beauty and layout.

2. Why CSS is Important

CSS helps you:

Add colors to your website 🎨
Change fonts and text styles
Control layout and spacing
Make websites look modern and professional
Make websites responsive (fit mobile, tablet, desktop)

3. How CSS Works (Simple Idea)

👉 CSS selects HTML elements and applies styles to them.

4. Basic CSS Syntax

CSS is written like this:


selector {
    property: value;
}

Example:


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

👉 Meaning:

Select all <h1> elements
Change their color to blue
Set font size to 24px

5. Ways to Add CSS to a Website

a. Inline CSS

Inside HTML tag:


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

b. Internal CSS

Inside <style> tag:


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

c. External CSS (Best Method)

Separate file:


/* style.css */
p {
    color: purple;
}

Linked in HTML:


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

6. Common CSS Properties

Text Styling


p {
    color: black;
    font-size: 16px;
    font-family: Arial;
}

Background


body {
    background-color: lightblue;
}

Borders


div {
    border: 1px solid black;
}

Spacing


div {
    margin: 20px;
    padding: 10px;
}

7. CSS Selectors (Very Important)

Element Selector


p { color: blue; }

Class Selector


.myclass { color: red; }

HTML:


<p class="myclass">Text</p>

ID Selector


#myid { color: green; }

HTML:


<p id="myid">Text</p>

8. Box Model (Foundation Concept)

Every element is like a box made of:

Content
Padding
Border
Margin

👉 This controls spacing and layout.

9. Basic Layout Concepts

Display Property


div {
    display: block;
}

Flexbox (Simple Intro)


.container {
    display: flex;
}

👉 Helps arrange items in rows or columns.

10. Responsive Design (Beginner Idea)

CSS helps your website fit different screens:

Phone 📱
Tablet
Laptop 💻

11. Simple Example (HTML + CSS Together)


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightgray;
}

h1 {
    color: blue;
}

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

<body>

<h1>Welcome</h1>
<p>This is my first styled page.</p>

</body>
</html>

12. Real-Life Use of CSS

Students can use CSS to:

Design business websites
Style blogs
Create landing pages
Customize WordPress sites
Build personal portfolios

13. Simple Summary

👉 CSS is what makes websites:

Beautiful
Organized
Responsive
Professional

Power Teaching Line (for your class)

👉 “HTML builds the house, but CSS decorates it and makes people want to stay.”

PALACE TECH HUB