CSS Cheat Sheet: Properties, Selectors & Flexbox in Hindi

CSS क्या है?#

CSS (Cascading Style Sheets) एक stylesheet language है जिसका इस्तेमाल HTML webpage को style और design करने के लिए किया जाता है।

HTML webpage की structure बनाता है, जबकि CSS decide करता है कि webpage कैसा दिखाई देगा — जैसे colors, fonts, spacing, borders, layouts और responsive design।

Example के लिए, HTML से आप heading बनाते हैं और CSS से उसका color, size और alignment बदल सकते हैं।

<h1 class="page-title">Welcome to My Website</h1>
<p>Learn CSS step by step.</p>

.page-title {
  color: #16325b;
  font-size: 32px;
  text-align: center;
}

p {
  color: #555;
  line-height: 1.6;
}

CSS क्यों जरूरी है?

• Webpage को attractive और readable बनाता है।
• Responsive layouts बनाने में मदद करता है।
• Reusable styles से code maintain करना आसान होता है।
• Buttons, cards, forms और navigation को style कर सकते हैं।
• Desktop, tablet और mobile screens के लिए layout adjust कर सकते हैं।

CSS Syntax Cheat Sheet#

CSS rule में selector, declarations, properties और values होती हैं।

h1 {
  color: blue;
  font-size: 32px;
}

इस example में:

• h1 = Selector
• color और font-size = Properties
• blue और 32px = Values
• { } = Declaration block
• ; = Declaration separator

याद रखें: एक selector कई CSS declarations को target कर सकता है।

HTML में CSS जोड़ने के तरीके#

CSS को HTML document में तीन common तरीकों से जोड़ा जा सकता है।

1. Inline CSS

Element के style attribute में CSS लिखना।

<p style="color: red;">Hello World</p>

यह छोटे demos के लिए उपयोगी है, लेकिन बड़े projects में इसे ज्यादा इस्तेमाल करने से maintenance मुश्किल हो सकती है।

2. Internal CSS

HTML के <head> में <style> element के अंदर CSS लिखना।

<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>

3. External CSS

अलग .css file बनाकर HTML से connect करना।

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

styles.css:

h1 {
  color: #16325b;
}

p {
  font-size: 16px;
}

Best practice: Real projects में external CSS files या well-organized component styles का उपयोग करें।

CSS Selectors Cheat Sheet#

Selectors बताते हैं कि कौन-से HTML elements पर CSS लागू होगी।

Example:

/* Element selector */
p {
  color: #333;
}

/* Class selector */
.card {
  background: white;
  padding: 20px;
}

/* ID selector */
#main-header {
  background: #16325b;
  color: white;
}

/* Descendant selector */
.card p {
  line-height: 1.6;
}

Classes reusable होती हैं। IDs unique identifiers के लिए रखे जाते हैं। Styling के लिए सामान्यतः classes maintain करना आसान होता है।

CSS Colors Cheat Sheet#

CSS में colors को कई formats में define कर सकते हैं।

.title {
  color: red;
}

.box {
  background-color: #2596be;
}

.card {
  border-color: rgb(22, 50, 91);
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

CSS custom properties के जरिए colors को reusable बनाया जा सकता है।

:root {
  --primary-color: #2596be;
  --text-color: #16325b;
  --surface-color: #ffffff;
}

.button {
  background-color: var(--primary-color);
  color: white;
}

.card {
  color: var(--text-color);
  background-color: var(--surface-color);
}

CSS Text और Font Properties#

Text readability और typography के लिए ये properties बहुत उपयोगी हैं।

Example:

.article {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.article h2 {
  font-size: 28px;
  font-weight: 700;
  text-align: left;
}

.nav-link {
  text-decoration: none;
}

CSS Units Cheat Sheet#

CSS में sizing और spacing के लिए अलग-अलग units उपलब्ध हैं।

Example:

.container {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
}

.title {
  font-size: 2rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Tip: Responsive typography और spacing के लिए rem, %, min(), max() और clamp() उपयोगी हो सकते हैं। हर चीज को fixed px में रखना जरूरी नहीं है।

CSS Box Model Cheat Sheet#

CSS Box Model बताता है कि element की dimensions में content, padding, border और margin कैसे शामिल होते हैं।

• Content: Text, image या element का actual content।
• Padding: Content और border के बीच की space।
• Border: Content और padding के चारों ओर boundary।
• Margin: Element के बाहर की space।

Example:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #ddd;
  margin: 16px;
}

Default content-box model में declared width केवल content width होती है। ऊपर वाले example में horizontal border और padding जोड़ने पर outer width 344px होती है, margin को छोड़कर।

इस calculation को आसान बनाने के लिए:

*,
*::before,
*::after {
  box-sizing: border-box;
}

border-box में declared width के अंदर content, padding और border शामिल होते हैं।

CSS Margin और Padding#

दोनों spacing के लिए हैं, लेकिन इनका काम अलग है।

.card {
  margin: 20px;
  padding: 16px;
}

• margin element के बाहर space बनाता है।
• padding element के अंदर content और border के बीच space बनाता है।

Shorthand Examples

.box {
  margin: 10px;
}

.box-2 {
  margin: 10px 20px;
}

.box-3 {
  margin: 10px 20px 30px 40px;
}

.box-4 {
  padding: 12px 24px;
}

चार values का order होता है: top → right → bottom → left.

Logical properties जैसे margin-inline और padding-block भी इस्तेमाल कर सकते हैं।

.section {
  margin-inline: auto;
  padding-block: 24px;
  padding-inline: 16px;
}

CSS Display Property#

display property element के layout behavior को define करती है।

Example:

.hidden {
  display: none;
}

.button {
  display: inline-block;
  padding: 10px 16px;
}

.navigation {
  display: flex;
  gap: 20px;
}

ध्यान दें: display: none element को visual layout से हटा देता है और सामान्य accessibility tree में भी उपलब्ध नहीं रहता।

CSS Position Cheat Sheet#

position property element को normal document flow के मुकाबले position करने का तरीका बताती है।

Example:

.parent {
  position: relative;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

absolute element अक्सर अपने nearest positioned ancestor के relative position होता है। z-index stacking order को प्रभावित करता है, लेकिन उसका behavior stacking contexts पर भी निर्भर करता है।

CSS Flexbox Cheat Sheet#

Flexbox एक one-dimensional layout system है। यह row या column में items को align और distribute करने के लिए उपयोगी है।

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Important Flexbox Properties

Example: Center content

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

Example: Responsive navigation

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

याद रखें: justify-content main axis पर काम करता है। align-items cross axis पर काम करता है। flex-direction बदलने पर axes की direction भी बदलती है।

CSS Grid Cheat Sheet#

CSS Grid rows और columns दोनों के साथ two-dimensional layout बनाने के लिए उपयोगी है।

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

यह तीन equal-width columns बनाता है।

Responsive Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

इस layout में browser available space के अनुसार columns की संख्या adjust कर सकता है।

Useful Grid Properties

Flexbox छोटे one-dimensional layouts के लिए और Grid two-dimensional layouts के लिए अच्छा starting point है। जरूरत के अनुसार दोनों को साथ भी इस्तेमाल किया जा सकता है।

CSS Background और Border Properties#

.card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

Example: Background image

.hero {
  background-image: url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
}

opacity पूरे element और उसके descendants को visually transparent करता है। केवल background transparent करना हो, तो semi-transparent background color इस्तेमाल करें।

CSS Pseudo-Classes और Pseudo-Elements#

Pseudo-Classes

Pseudo-classes element की state या position को target करती हैं।

button:hover {
  background-color: #16325b;
  color: white;
}

input:focus {
  outline: 2px solid #2596be;
}

li:first-child {
  font-weight: bold;
}

li:nth-child(2) {
  color: teal;
}

Common pseudo-classes:

• :hover
• :focus
• :focus-visible
• :active
• :checked
• :disabled
• :first-child
• :last-child
• :nth-child()
• :not()

Pseudo-Elements

Pseudo-elements किसी element के specific part को style कर सकते हैं।

p::first-letter {
  font-size: 2rem;
}

.card::before {
  content: "";
  display: block;
  height: 4px;
  background: #2596be;
}

Common pseudo-elements:

• ::before
• ::after
• ::first-letter
• ::first-line
• ::placeholder
• ::selection

Decorative content के लिए ::before और ::after उपयोगी हैं। Important information को केवल generated content में रखना उचित नहीं है।

CSS Transitions और Transforms#

Transitions किसी property के बदलाव को smooth बना सकती हैं।

.button {
  background: #2596be;
  color: white;
  transition: background-color 0.2s ease;
}

.button:hover {
  background: #16325b;
}

Transforms element को move, rotate, scale या skew कर सकते हैं।

.card:hover {
  transform: translateY(-4px);
}

Common transform functions:

Animations और transitions में prefers-reduced-motion preference को ध्यान में रखना accessibility के लिए उपयोगी है।

CSS Responsive Design और Media Queries#

Responsive design का उद्देश्य webpage को अलग-अलग screen sizes पर usable बनाना है।

.container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

इस example में:

• बड़ी screens पर तीन columns।
• 768px या उससे कम viewport पर दो columns।
• 480px या उससे कम viewport पर एक column।

ये breakpoints केवल examples हैं। सही breakpoints content और design के हिसाब से चुनें।

Viewport Meta Tag

Responsive pages के लिए HTML में viewport meta tag होना चाहिए।

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile-Friendly CSS Tips

• Fixed widths की जगह flexible layouts का उपयोग करें।
• Images को container के अंदर fit होने दें।
• Text readable रखें।
• Buttons और links को touch करने योग्य size दें।
• Browser DevTools के responsive mode में test करें।

Example:

img {
  max-width: 100%;
  height: auto;
}

CSS Specificity और Cascade#

जब एक ही element पर multiple CSS rules लागू होते हैं, तो browser cascade, specificity और source order जैसे factors का उपयोग करके तय करता है कि कौन-सा declaration लागू होगा।

Example:

p {
  color: black;
}

.note {
  color: blue;
}

#intro {
  color: green;
}

अगर एक ही paragraph पर तीनों selectors match करते हैं और declarations समान origin, importance और layer में हैं, तो ID selector की specificity class और element selector से अधिक होती है।

सामान्य specificity order:

1. ID selectors
2. Class, attribute और pseudo-class selectors
3. Type और pseudo-element selectors

यह पूरी cascade का सिर्फ एक हिस्सा है। !important, cascade layers, origin और inheritance जैसे factors भी परिणाम को प्रभावित कर सकते हैं।

p {
  color: red !important;
}

!important को routine styling के लिए इस्तेमाल न करें। बेहतर है selectors और CSS architecture को साफ रखा जाए।

CSS Variables (Custom Properties)#

CSS custom properties reusable values define करने के लिए उपयोगी हैं।

:root {
  --primary: #2596be;
  --dark: #16325b;
  --radius: 10px;
  --spacing: 16px;
}

.button {
  background: var(--primary);
  border-radius: var(--radius);
  padding: var(--spacing);
  color: white;
}

.card {
  border: 1px solid var(--primary);
  border-radius: var(--radius);
}

अगर primary color बदलना हो, तो उसे हर जगह बदलने की जरूरत नहीं है — variable को update किया जा सकता है।

Fallback value भी दे सकते हैं:

.title {
  color: var(--heading-color, #16325b);
}

CSS Common Mistakes#

CSS Debugging with Browser DevTools#

CSS काम न करे, तो अनुमान लगाने की जगह browser DevTools इस्तेमाल करें।

1. Webpage पर right-click करके Inspect खोलें।
2. Elements panel में relevant element select करें।
3. Styles panel में matching CSS rules देखें।
4. Crossed-out declaration का मतलब हो सकता है कि कोई दूसरा declaration उसे override कर रहा है।
5. Computed panel में final computed values check करें।
6. Box Model section में margin, padding, border और dimensions देखें।
7. Responsive mode में layout test करें।

Common issues:

• Selector गलत होना।
• CSS file load न होना।
• Specificity conflict।
• Media query लागू न होना।
• गलत file path।
• Invalid property value।

CSS Quick Reference Cheat Sheet#

CSS Knowledge Check#

1. CSS का full form क्या है?
2. Inline, internal और external CSS में क्या अंतर है?
3. Class selector और ID selector कैसे लिखते हैं?
4. Box Model के चार parts कौन-से हैं?
5. margin और padding में क्या अंतर है?
6. Flexbox और Grid में क्या अंतर है?
7. position: absolute किस तरह काम करता है?
8. Media query क्यों इस्तेमाल की जाती है?
9. CSS specificity क्या है?
10. Browser DevTools में computed styles कहाँ देखेंगे?

Practical Exercises

Exercise 1: Profile Card

एक profile card बनाएँ जिसमें image, name, description और button हो। CSS से border, padding, background और shadow जोड़ें।

Exercise 2: Responsive Navigation

Flexbox से navigation bar बनाएँ और छोटी screen पर links को wrap होने दें।

Exercise 3: Responsive Course Grid

CSS Grid से तीन-column course layout बनाएँ और media queries से mobile पर एक column करें।

Exercise 4: Button Interaction

Button पर hover, focus और transition styles लगाएँ। Keyboard से focus करके भी test करें।

Exercise 5: Debugging Practice

जानबूझकर एक गलत selector और specificity conflict बनाएँ। Browser DevTools से कारण ढूँढें और fix करें।

Summary — CSS Cheat Sheet से क्या सीखा?#

इस CSS Cheat Sheet में आपने सीखा:

• CSS syntax और HTML में CSS जोड़ने के तरीके।
• Selectors, colors, fonts और units।
• Box Model, margin और padding।
• Display, positioning और Flexbox।
• CSS Grid और responsive layouts।
• Backgrounds, borders, pseudo-classes और transitions।
• Media queries, CSS variables और specificity।
• Common mistakes और Browser DevTools से debugging।

CSS में strong होने के लिए केवल properties याद करना काफी नहीं है। छोटे components बनाएँ, अलग-अलग screen sizes पर test करें और DevTools से layout issues debug करने की practice करें।

आगे क्या सीखें?#

Recommended learning path:

1. HTML Cheat Sheet
2. CSS Cheat Sheet
3. Next: JavaScript Cheat Sheet
4. DOM Manipulation और Browser Events
5. Node.js Cheat Sheet

Useful official references:

• MDN CSS First Steps
• MDN CSS Reference
• CSS Working Group Specifications