CSS Introduction
What is CSS
Learn how CSS controls presentation, layout, spacing, typography, color, and responsive behavior while HTML continues to provide the document structure.
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. The supporting concepts are explained in CSS Syntax and How to Add CSS.
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
CSS Syntax
css
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; |
CSS is a constraint system
CSS does more than decorate individual elements. It resolves competing declarations, computes values, creates formatting contexts, and adapts the result to content, available space, device capabilities, and user preferences. Good CSS describes relationships and constraints instead of hard-coding one screenshot. The browser then performs the final layout for the actual document and environment.
CSS Example
html
<!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>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Core CSS styling | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
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.