What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and styling of web documents written in HTML or XML. It defines how elements should appear on a webpage, including layout, colors, fonts, spacing, animations, and responsiveness across different devices.

Key Features:

1. Separation of Concerns:
   CSS separates content (HTML) from presentation (styling), making websites easier to maintain and update.

2. Cascading Nature:
   Styles “cascade” from multiple sources (e.g., browser defaults, user styles, author styles), with rules for priority (specificity) and inheritance.

3. Responsive Design:
   Enables flexible layouts (e.g., grids, flexbox) and media queries to adapt designs for mobile, tablet, and desktop screens.

4. Visual Control:
   Manages:

   • Typography (fonts, sizes, spacing)
   • Colors (text, backgrounds, borders)
   • Layout (positioning, alignment, display properties)
   • Animations (transitions, keyframes)
   • Accessibility (e.g., high-contrast modes)

5. Reusability:
   Styles can be applied globally via external stylesheets (.css files), reused across multiple pages.

Simple Example:

/* Style all <h1> elements */
h1 {
  color: navy;
  font-family: Arial;
  text-align: center;
}

/* Style buttons */
.button {
  background-color: #4CAF50; /* Green */
  padding: 10px 20px;
  border-radius: 5px;
}

Why CSS Matters:

• Consistency: Uniform styling across all pages.
• Efficiency: Change one stylesheet to update an entire site.
• Performance: Optimizes loading speed (vs. inline styles).
• Modern Web: Essential for responsive, interactive, and accessible websites.

Evolution

• CSS1 (1996): Basic fonts/colors.
• CSS3 (modular): Advanced features (flexbox, grid, animations, variables).

CSS works alongside HTML (structure) and JavaScript (behavior) to build modern, user-friendly websites.