CSS: Introduction to CSS
1. What is CSS?
CSS (Cascading Style Sheets) is a descriptive language used to control the styling and layout of web pages. With CSS, you can precisely control how HTML elements are displayed — including fonts, colors, backgrounds, borders, sizes, positions, and other visual properties. CSS is an indispensable core technology in modern web development.
Think of it this way: if HTML is the "skeleton" of a web page — determining what content appears on the page (headings, paragraphs, images, tables, etc.) — then CSS is the "clothes and makeup" — determining how that content looks (colors, sizes, positions, animations, etc.).
2. What CSS Does
- Controls page layout: Defines the position, size, and arrangement of web page elements
- Sets visual styles: Specifies colors, fonts, borders, backgrounds, and other style properties
- Enhances user experience: Improves page interactivity through animations, transitions, and responsive design
- Adapts to multiple devices: Supports different screen sizes through flexible layouts and unit settings
3. Separating Structure from Style
One of CSS's greatest values is achieving "separation of content and presentation" — HTML handles structured content, CSS handles visual presentation. This separation brings many benefits:
- Easier maintenance: Change styles by modifying only the CSS file, without touching the HTML structure
- Cleaner code: No style attributes cluttering up your HTML, making it clear and readable
- Better reusability: The same CSS file can be shared across multiple pages
- Higher loading efficiency: Once a browser caches a CSS file, all pages benefit
4. How Browsers Work
When a browser loads a web page, it:
- Parses the HTML document to build a DOM (Document Object Model) tree
- Parses the CSS file/code to build a CSSOM (CSS Object Model) tree
- Merges the DOM and CSSOM into a render tree
- Layouts based on the render tree (calculates position and size of each element)
- Renders to the screen
Simply put, the browser first parses structure and styles separately, then merges and calculates, and finally paints the page you see.
5. A Brief History of CSS
- CSS1 (1996): The earliest CSS standard, providing basic styling capabilities like fonts, colors, and margins
- CSS2 (1998): Added layout capabilities like positioning, floating, and z-index
- CSS3 (2005–present): Modular development, adding border-radius, gradients, shadows, animations, Flexbox, Grid, and many other new features
- CSS4+ (in progress): Continuous evolution, adding container queries, cascade layers, and other new features Today's CSS is incredibly powerful, capable of achieving effects that previously required JavaScript or images.
▶ Example
CSS3 features: rounded corners and shadows:
.card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
padding: 20px;
}
.button {
border-radius: 20px;
background: linear-gradient(to right, #667eea, #764ba2);
color: white;
padding: 10px 24px;
}
6. Core CSS Concepts
- Cascading: Multiple style rules can apply to the same element, with priority rules determining which style takes effect
- Inheritance: Some style properties are passed from parent elements to child elements
- Box Model: Every element is treated as a rectangular box composed of content, padding, border, and margin
- Responsive: Through media queries and other techniques, pages perform well on different devices
▶ Example
A simple HTML page with CSS styling:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: navy; }
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This is a styled paragraph.</p>
</body>
</html>
The browser renders the heading in navy color, using the Arial font for all text. CSS in the <style> tag controls these visual properties.
▶ Example
Inline CSS vs. internal stylesheet:
<p style="color: red; font-size: 20px;">Inline-styled paragraph</p>
<style>
.styled { color: blue; font-size: 20px; }
</style>
<p class="styled">Stylesheet-styled paragraph</p>
Both produce similar visual results, but the stylesheet approach is reusable and easier to maintain.
❓ FAQ
📖 Summary
- CSS is one of the three pillars of web development (HTML + CSS + JavaScript)
- It handles the visual presentation, transforming pages from "readable" to "beautiful"
- With CSS, you can control every pixel's appearance on a web page
- Next, we'll start from CSS basic syntax and dive deeper step by step
📝 Exercises
- Create a
css-intro.htmlfile in your project folder. Think about web pages you've seen — which parts do you think CSS is responsible for? - Open a website you like, use the browser's Developer Tools (F12) to view the Elements panel, and observe the Styles panel on the right side of the HTML structure to see which CSS rules are at work.
- Summarize the division of labor between CSS and HTML in your own words, and write it in your exercise notes.
