CSS stands for Cascading Style Sheets.
It is a stylesheet language used to describe the look and formatting of a webpage written in HTML.
While HTML defines the structure and content of a web page, CSS controls how that content appears — such as colors, fonts, layout, spacing, and overall design.
In short, HTML builds the skeleton, and CSS adds style and beauty to a website.
🧩 Purpose of CSS
- To separate content (HTML) from presentation (design).
- To make web pages attractive and consistent.
- To enable responsive design (fit for all devices).
- To allow developers to apply the same style to multiple pages easily.
⚙️ Basic Syntax of CSS
selector {
property: value;
}
✅ Example:
h1 {
color: blue;
font-size: 30px;
}
Explanation:
h1→ selector (the HTML element to style)colorandfont-size→ propertiesblueand30px→ values
This code makes all <h1> headings blue and sets their font size to 30px.
🧱 Ways to Add CSS to HTML
- Inline CSS – written inside an HTML tag
<h1 style="color:red;">Hello CSS</h1> - Internal CSS – written inside the
<style>tag in the HTML<head>section<style> p { color: green; } </style> - External CSS – written in a separate
.cssfile and linked using the<link>tag<link rel="stylesheet" href="style.css">
🌟 Key Features of CSS
- Controls colors, fonts, spacing, and layout.
- Supports animations and transitions.
- Makes web pages responsive and mobile-friendly.
- Reduces code repetition.
- Easy to update and maintain design.
🧠 Types of CSS Selectors
- Element Selector →
p { color: blue; } - Class Selector →
.box { border: 1px solid black; } - ID Selector →
#header { background-color: gray; } - Group Selector →
h1, h2, h3 { color: green; }
⚔️ Difference Between HTML and CSS
| Feature | HTML | CSS |
|---|---|---|
| Full Form | HyperText Markup Language | Cascading Style Sheets |
| Purpose | Structure and content | Styling and presentation |
| Syntax Type | Tag-based | Rule-based |
| Usage | Creates elements | Styles elements |
| Separation | Content only | Design only |
