CSS Introduction

Last Updated: 13 Nov 2025

  • CSS (Cascading Style Sheets) is the language used to style and layout web pages — controlling colors, fonts, spacing, animations, and responsiveness.
  • It works alongside HTML (structure) and JavaScript (behavior) to create beautiful, interactive websites.
  • CSS is declarative — you describe how elements should look, and the browser applies it.
  • First introduced in 1996 by Håkon Wium Lie and Bert Bos.

Hinglish Tip: CSS HTML ko sundar banata hai — jaise makeup! Bina CSS ke, sab websites plain text jaise dikhte hain.

History of CSS

VersionYearKey Features
CSS 11996Fonts, colors, margins, basic selectors
CSS 2.12011Positioning, z-index, media types
CSS 31999–PresentModules: Flexbox, Grid, animations, transitions, variables

Hinglish Tip: Aaj kal sab CSS3 modules use karte hain — Flexbox aur Grid layout ke liye game-changer hain!

Ways to Add CSS

There are 3 main ways to apply CSS:

1. Inline CSS (style attribute)

<p style="color: red; font-weight: bold;">Inline styled text</p>

Hinglish Tip: Sirf chhote changes ke liye use karo — maintenance mushkil ho jata hai.

2. Internal CSS (<style> tag in <head>)

<style>
  h1 {
    color: navy;
    text-align: center;
  }
</style>

3. External CSS (.css file)

styles.css

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
}

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

Hinglish Tip: Production mein hamesha external CSS use karo — fast loading aur reusable.

Basic CSS Syntax

selector {
  property: value;
  another-property: value;
}

p {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

<p style={{ color: "#333", fontSize: "16px", lineHeight: 1.6 }}>
  This paragraph uses basic CSS properties.
</p>

Common Selectors

SelectorSelects
*All elements on the page
#idSingle element with the specified id (unique)
.classAll elements with the specified class (reusable)
tagAll instances of the specified HTML element
selector1, selector2Multiple selectors that share the same styles
[attribute]Elements with a specific attribute (and optional value)

div p → Descendant
div > p → Child
p + p → Adjacent
p ~ p → General Sibling

Use to target nested elements
:pseudo-class or ::pseudo-element

Special states or parts of elements

CSS Comments

Used to explain code or temporarily disable styles.

/* This is a single-line comment */

/*
  This is a
  multi-line comment
*/

{/* This is a JSX comment in MDX */}
← PreviousNext →