Introduction to CSS (Cascading Style Sheets)
CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation (look and formatting) of a web page written in HTML or XML.
Purpose of CSS
CSS controls the layout, color, fonts, spacing, animations, and responsive design of web elements — making websites more visually attractive and user-friendly.
Why Use CSS?
| Feature | Description |
|---|---|
| Separation of concerns | Keeps content (HTML) separate from design (CSS) |
| Reusability | Same CSS file can style multiple HTML pages |
| Maintainability | Easy to update or change styles across the entire site |
| Responsive Design | Helps make websites mobile-friendly and flexible |
CSS Syntax
selector {
property: value;
}
Example:
h1 {
color: blue;
font-size: 24px;
}
This code changes the color of all <h1> elements to blue and sets their font size to 24px.
Types of CSS
- Inline CSS
Applied directly to an HTML element using thestyleattribute.<p style="color: red;">This is red text.</p> - Internal CSS
Written inside a<style>tag within the<head>section of an HTML document.<style> p { color: green; } </style> - External CSS
Saved in a separate.cssfile and linked to the HTML document.<link rel="stylesheet" href="style.css">