Quartz 4

Why do we need CSS

4 min read

Metadata

  • Date :: 13-04-2025
  • Tags :: web-dev

Notes

🎨 Introduction to CSS: Cascading Style Sheets

🧠 What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation and design of web pages—essentially how HTML elements should appear on the screen.

CSS allows web developers to add colors, change fonts, align elements, add spacing, animations, and more to create visually appealing websites.

🌊 The Concept of “Cascading”

The word “Cascading” in CSS is key to understanding how it works.

  • Think of a waterfall—where water flows from the top and trickles down in layers.

  • Similarly, in CSS:

    • Styles are applied in layers, starting from general rules down to more specific rules.

    • If multiple styles conflict, CSS decides which one “wins” based on specificity, importance, and order (we’ll learn this in later lessons).

🎯 Example:

p {
  color: blue;
}
 
#special-paragraph {
  color: red;
}

If a <p> tag has the ID special-paragraph, it will be red, not blue, because the ID selector is more specific.

📝 What is a Style Sheet?

A Style Sheet is a separate file or block of code that contains the style rules for a web page.

🔤 Similarity to HTML

  • HTML is a markup language (HyperText Markup Language) that defines the structure and content of a page (e.g., headings, paragraphs, lists).

  • CSS is a style sheet language that defines how that content looks (e.g., font type, size, colors, layout).

💡 Why Do We Need CSS?

🔙 Before CSS: The Problem

When the internet first started, there was only HTML. Developers wanted to style their pages, but HTML alone wasn’t designed for that.

  • Styling had to be done inside HTML using tags like:

    • <font color="red" size="4" face="Arial">

    • <center>

⚠️ Problems with Inline Styling

  1. Messy HTML: Styling mixed with structure.

  2. Poor maintainability: Changing one style across a website meant editing many HTML files.

  3. Repetitive code: Redundant styling across elements.

  4. No separation of concerns: Content and presentation were tangled.

📧 The Famous Email

Marc Andreessen (founder of Mosaic and Netscape) said that in early HTML, if you wanted to make your site look a certain way (like you would in MS Word), the only answer was:

“Sorry, you’re screwed.”

That meant: HTML alone couldn’t handle styling well.

🕰 A Bit of History

  • 1996: W3C (World Wide Web Consortium) introduced CSS as a recommendation, thanks to Håkon Wium Lie, who is considered the father of CSS.

  • 1997: HTML 3.2 came with styling-related tags like <font> and <center>, but these are now considered deprecated (i.e., outdated and no longer recommended).

🔧 The Power of Separation: CSS + HTML

CSS introduced a major breakthrough:

Content (HTML) and Style (CSS) could now live in separate files.

This brought:

  • 🔄 Reusability: One CSS file can style multiple HTML pages.

  • 🛠 Maintainability: Easier to update and modify styles.

  • 🧹 Cleaner Code: HTML focuses on structure; CSS handles appearance.

  • 🎯 Precision: More detailed and accurate styling control.

👨‍🏫 Real-Life Analogy: Car Manufacturing

In a car factory:

  • One team builds engines.

  • Another handles paint jobs.

  • Another assembles tires.

Each team focuses on one aspect—modularity and specialization.

Similarly, in web development:

  • HTML is the content team.

  • CSS is the design team.

  • JavaScript (later on) is the behavior/logic team.

This separation of concerns leads to more efficient, scalable, and maintainable websites.

👀 Live Demonstration: CSS in Action

Check out this demo site:
🔗 https://appbrewery.github.io/just-add-css

🔄 What You’ll See:

  1. When you first open it — plain HTML page (unstyled).

  2. Click the “Toggle CSS” button — the page is instantly styled.

  3. View Page Source before and after — the HTML remains the same!

    • The only difference is the CSS gets applied dynamically.

  4. This shows the power of CSS: Visual transformation without touching the HTML structure.

🧪 Other Style Sheet Languages

While CSS is the most widely used, other preprocessor languages exist:

  • 🧠 SASS (Syntactically Awesome Style Sheets):

    • Adds variables, nesting, and logic to CSS.

  • 🎯 LESS (Leaner CSS):

    • Similar to Sass; simplifies complex CSS with functions and operations.

These tools compile into regular CSS before being served to browsers.

However, CSS is the foundation, and must be mastered first.

✅ Summary

ConceptExplanation
CSSLanguage to style HTML content
CascadingStyles are layered from general to specific
Style SheetA separate file or block to hold CSS code
Before CSSStyling was done in HTML, cluttering structure
Problem Solved By CSSSeparation of concerns; cleaner, modular, and scalable web development
CSS vs HTMLHTML = Structure, CSS = Appearance
Live ExampleToggle CSS on/off to see its transformative power without changing HTML
Other Style LanguagesSass, Less – preprocessors that add features but still rely on CSS basics

📘 What’s Next?

In the next lesson, you’ll:

  • Start writing your first CSS rules.

  • Learn about selectors, properties, and values.

  • Begin transforming simple HTML pages into beautifully styled websites.

References

Graph View

Backlinks