CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance and layout of web pages.
While HTML is used to structure content (like headings, paragraphs, images), CSS is used to style that content — such as adding colors, fonts, spacing, and positioning.
With CSS, you can:
- Change text colors and fonts
- Add background colors or images
- Control layout and spacing
- Make responsive designs for different devices
👉 In simple terms:
HTML = Structure
CSS = Design / Styling
selector {
property: value;
}Attributes
| Property | Description | Example |
|---|---|---|
| color | Sets the text color | color: red; |
| background | Sets background color/image | background: yellow; |
| font-size | Sets text size | font-size: 18px; |
| margin | Controls outer spacing | margin: 10px; |
| padding | Controls inner spacing | padding: 10px; |
<!DOCTYPE html>
<html>
<head>
<title>What is CSS Example</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
}
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This is a paragraph styled using CSS.</p>
</body>
</html>Output
Browser Output
The page will have a light gray background
The heading will appear in blue color
The paragraph text will appear in green with larger font size
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Notes
- CSS stands for Cascading Style Sheets It allows separation of content (HTML) and design (CSS) CSS can be applied in three ways:
- Inline CSS
- Internal CSS
- External CSS
- External CSS is the most recommended method for large projects
Conclusion
CSS is an essential part of modern web development that transforms simple HTML pages into visually appealing and user-friendly websites. By mastering CSS, you gain full control over how your web content looks and behaves across different devices.
