CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML documents. It defines how elements like text, images, and containers appear on the web page — such as their colors, sizes, spacing, fonts, and positions.
HTML = structure
CSS = style (appearance)
JavaScript = behavior (interactivity)
🔹 General Information:
-
Full Name: Cascading Style Sheets
-
Created by: Håkon Wium Lie (1996)
-
Standardized by: W3C (World Wide Web Consortium)
-
Latest major version: CSS3 (with modules)
-
Used in: All modern websites and web applications
🧠 Origin and Development:
| Year | Milestone |
|---|---|
| 1996 | CSS1 released — basic styling features |
| 1998 | CSS2 introduced layouts, media types, z-index |
| 1999–present | CSS3 developed in modules (e.g. Flexbox, Grid, Animations) |
| Ongoing | CSS4 is a term used informally; CSS continues to evolve |
💡 What is CSS used for?
-
Styling HTML elements (fonts, colors, sizes)
-
Creating layouts (grid, flexbox, columns)
-
Controlling page responsiveness (media queries)
-
Adding transitions and animations
-
Customizing user interface components
-
Separating content (HTML) from presentation (CSS)
🔧 CSS Syntax:
selector {
property: value;
}
Example:
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
🔍 Types of CSS:
| Type | Description | Example |
|---|---|---|
| Inline CSS | Directly in the HTML element | <h1 style="color: red;">Title</h1> |
| Internal CSS | In a <style> block inside an HTML <head> |
<style>p {color: green;}</style> |
| External CSS | Linked via a separate .css file (best practice) |
<link rel="stylesheet" href="style.css"> |
📐 CSS Core Concepts:
| Concept | Explanation |
|---|---|
| Selectors | Target HTML elements (h1, .class, #id) |
| Properties | Define what you want to style (color, margin, font) |
| Values | Specific settings (e.g., red, 20px, center) |
| Box Model | Every element is a box: margin > border > padding > content |
| Positioning | Static, relative, absolute, fixed, sticky |
| Display | Block, inline, flex, grid, none |
🎨 Popular CSS Tools & Extensions:
-
SASS/SCSS – Advanced syntax with variables and nesting
-
Tailwind CSS – Utility-first CSS framework
-
Bootstrap – Responsive component framework
-
Animate.css – Ready-to-use animation classes
-
Media Queries – For responsive design on different screens
✅ Advantages of CSS:
-
Speeds up development by separating style from content
-
Makes websites responsive and mobile-friendly
-
Easy to reuse and maintain styles
-
Improves user experience with professional appearance
-
Compatible with all modern browsers