CSS

Description #

CSS (Cascading Style Sheets) is a stylesheet language used to describe the appearance and formatting of HTML documents. It controls visual aspects like layout, colors, fonts, spacing, and responsiveness, separating content from presentation.

History #

CSS was first proposed by Håkon Wium Lie in 1994 while working at CERN with Tim Berners-Lee. The first official specification, CSS1, was published by the W3C in 1996.

Over the years, CSS evolved into:

• CSS2 (1998) — introduced positioning, z-index, media types
• CSS3 (2011) — modularized the standard and added animations, flexbox, grid, and media queries
  Today, CSS is essential to modern web design, and the standard continues to evolve with CSS4 modules (like CSS Nesting, Subgrid, and more) developed and maintained by the W3C and WHATWG.

Hello World Code #

p {
  color: blue;
  font-family: Arial, sans-serif;
}

This CSS changes paragraph text to blue and sets the font.

How to Run #

Create an HTML file and link a CSS file like this:

<link rel="stylesheet" href="styles.css">

2. Save the CSS code in a file called styles.css
3. Open the HTML file in a browser

Or, you can include CSS directly in the HTML:

<style>
  p {
    color: blue;
  }
</style>

Key Concepts #

CSS uses selectors to target HTML elements

A declaration block is wrapped in {}

Properties (like color) define what to style

Values (like blue) define how to style

CSS can be external, internal, or inline

Multiple rules can cascade (overlap)

Uses specificity and inheritance to resolve conflicts

Supports media queries for responsive design

Includes layout systems like Flexbox and Grid

CSS3 added animations, transitions, and variables

Try It Online #

🔗 JSFiddle – CSS Editor
🔗 CodePen
🔗 CSS Deck

Fun Facts #

• CSS was created to keep HTML clean and focused on content
• The “Cascading” in CSS means rules can override each other based on priority
• You can write CSS that responds to screen size, orientation, and color schemes
• Some CSS properties like :has() took over 15 years to be widely supported
• There are hidden CSS features like @supports, mix-blend-mode, and scroll-snap

Resources #

MDN Web Docs – CSS

W3Schools CSS Guide

CSS Tricks Almanac

Can I use… (CSS Support)