Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets.

Let’s break down this term word by word:

Cascading means priority order. If there are multiple styles written for the same element, CSS follows rules to decide which style will win and apply. This is called CSS Specificity and Cascade Order.
Style means the visual appearance like colors, spacing, layout, font, border, size, etc.
Sheet means a file or code block that contains style rules.

Therefore,

CSS is used to control the style and layout of web pages.

HTML is used to create the structure (like text, images, headings, links).

CSS is used to design or style that structure (like colors, font sizes, spacing, layout, etc.).

Example:

If HTML:

<p>This is a paragraph.</p>

CSS:

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

This will make the paragraph text blue and 20px in size.

Difference between CSS, HTML, and JavaScript

Feature	HTML	CSS	JavaScript
Purpose	Creates structure and content	Applies design, layout, and visual styling	Adds interactivity and dynamic behavior
Language Type	Markup Language	Style Sheet Language	Programming Language
File Extension	.html	.css	.js
Browser Role	Tells browser what to show	Tells browser how it should look	Tells browser how it should behave
Example	<h1>Title</h1>	h1 { color: red; }	alert(“Hello”);
Executes	Parsed as markup	Parsed and applied during rendering	Executed by browser’s JavaScript Engine

Part	Explanation	Example
Selector	Tells which HTML element to target	p, h1, .box, #main
Property	What style you want to change (like color, font)	color, font-size, margin
Value	How you want the style to appear	blue, 20px, center
Declaration	One line of property and value	color: red;
Rule Set	Full block of selector and declarations	p { color: red; }

p {
  color: blue;
  font-size: 18px;
}

✅Follow us for more updates: