CSS चीट शीट

निःशुल्क

एक खोजने योग्य, प्रिंट करने योग्य CSS संदर्भ — सिलेक्टर, बॉक्स मॉडल, flexbox, grid, टाइपोग्राफी, ट्रांज़िशन और आधुनिक सुविधाएँ। मुफ्त।

Selectors

.class

Select all elements with the class

#id

Select the element with the id

a, b

Group: select a and b

a b

Descendant: b inside a

a > b

Direct child b of a

a + b

Adjacent sibling immediately after a

a ~ b

General sibling b after a

[type="text"]

Attribute selector

:hover :focus

Pseudo-classes for state

:nth-child(2n)

Every even child

::before ::after

Pseudo-elements (generated content)

:not(.x)

Negation: anything but .x

:is(h1, h2, h3)

Matches any selector in the list

Box model

box-sizing: border-box;

Include padding & border in width

margin: 0 auto;

Center a block horizontally

padding: 1rem 2rem;

Vertical 1rem, horizontal 2rem

border: 1px solid #ccc;

Width, style, color

border-radius: 8px;

Rounded corners

outline: 2px dashed red;

Outline (does not affect layout)

overflow: hidden;

Clip content that overflows

Flexbox

display: flex;

Create a flex container

flex-direction: row | column;

Main axis direction

justify-content: space-between;

Align along the main axis

align-items: center;

Align along the cross axis

flex-wrap: wrap;

Allow items to wrap

gap: 1rem;

Space between items

flex: 1;

Grow to fill space (1 1 0)

align-self: flex-end;

Override cross-axis for one item

Grid

display: grid;

Create a grid container

grid-template-columns: 1fr 1fr 1fr;

Three equal columns

repeat(3, 1fr)

Shorthand for repeated tracks

minmax(200px, 1fr)

Track between a min and max

grid-template-columns: repeat(auto-fill, minmax(200px,1fr));

Responsive auto columns

gap: 1rem;

Row and column gap

grid-column: 1 / 3;

Span from line 1 to 3

place-items: center;

Center items on both axes

Typography

font-family: system-ui, sans-serif;

Font stack

font-size: 1.125rem;

Relative font size

font-weight: 600;

Bold weight

line-height: 1.6;

Line spacing

letter-spacing: .02em;

Tracking

text-align: center;

Horizontal text alignment

text-transform: uppercase;

Change letter case

text-overflow: ellipsis;

Truncate with … (needs overflow+nowrap)

Colors & background

color: #1f2937;

Text color

background: rgb(0 0 0 / 50%);

Modern rgb with alpha

background: linear-gradient(90deg,#f06,#48f);

Linear gradient

opacity: .5;

Element transparency

box-shadow: 0 4px 12px rgb(0 0 0 / .15);

Drop shadow

background-size: cover;

Scale image to cover

color-mix(in srgb, red 40%, blue);

Mix two colors

Positioning

position: relative;

Offset from normal position

position: absolute;

Relative to nearest positioned ancestor

position: fixed;

Relative to the viewport

position: sticky; top: 0;

Sticks when scrolling past

inset: 0;

top/right/bottom/left = 0

z-index: 10;

Stacking order

Transitions & animation

transition: all .2s ease;

Animate property changes

transform: translateY(-4px) scale(1.05);

Move, scale, rotate

@keyframes spin { to { transform: rotate(360deg); } }

Define an animation

animation: spin 1s linear infinite;

Run a keyframe animation

will-change: transform;

Hint the browser to optimize

Responsive & modern

@media (max-width: 768px) { ... }

Media query breakpoint

clamp(1rem, 2vw, 2rem)

Fluid value with min/max

aspect-ratio: 16 / 9;

Maintain an aspect ratio

var(--brand)

Use a custom property

:root { --brand: #4f46e5; }

Define a custom property

container-type: inline-size;

Enable container queries

@container (min-width: 400px) {…}

Container query

कोई प्रविष्टि “:q” से मेल नहीं खाती।

CSS चीट शीट के बारे में

यह CSS चीट शीट आपके रोज इस्तेमाल होने वाले प्रॉपर्टीज़ को एक सर्च करने योग्य पेज में समेटती है: सिलेक्टर, बॉक्स मॉडल, फ्लेक्सबॉक्स, ग्रिड, टाइपोग्राफी, कलर और बैकग्राउंड, पोजिशनिंग, ट्रांजिशन और एनिमेशन, और रिस्पॉन्सिव व मॉडर्न CSS पर एक सेक्शन।

इसे इस तरह व्यवस्थित किया गया है कि "वह प्रॉपर्टी क्या कहलाती थी?" का जवाब बस एक सर्च दूर है — खासकर फ्लेक्सबॉक्स और ग्रिड सेक्शन एलाइनमेंट और लेआउट प्रॉपर्टीज़ को उन वैल्यूज़ के साथ लिस्ट करते हैं जिन्हें आप सीधे स्टाइलशीट में कॉपी कर सकते हैं, और मॉडर्न सेक्शन नए फीचर्स को हाथ में रखता है।

यह शीट फ्री है, क्लाइंट-साइड लोड होती है, टाइप करते ही लाइव फिल्टर होती है, और आपको एक क्लिक से किसी भी डिक्लेरेशन को कॉपी करने देती है। स्टिकी टेबल ऑफ कंटेंट्स सेक्शनों के बीच जंप करता है और प्रिंट बटन एक साफ-सुथरा पेपर रेफरेंस बनाता है।

CSS चीट शीट का उपयोग कैसे करें

सेक्शन लिस्ट देखें — Selectors, Box model, Flexbox, Grid, Typography और अधिक।
grid, hover या transition जैसा कोई प्रॉपर्टी या कॉन्सेप्ट सर्च बॉक्स में टाइप करें ताकि हर रो फिल्टर हो जाए।
स्टिकी टेबल ऑफ कंटेंट्स के जरिए Positioning जैसे किसी सेक्शन पर जंप करें।
CSS डिक्लेरेशन कॉपी करने के लिए किसी स्निपेट या उसके कॉपी आइकन पर क्लिक करें।
डेस्क-साइड CSS रेफरेंस के लिए शीट प्रिंट करें।

अक्सर पूछे जाने वाले प्रश्न

नौ सेक्शन: सिलेक्टर, बॉक्स मॉडल, फ्लेक्सबॉक्स, ग्रिड, टाइपोग्राफी, कलर और बैकग्राउंड, पोजिशनिंग, ट्रांजिशन और एनिमेशन, और रिस्पॉन्सिव के साथ मॉडर्न CSS फीचर्स।

हां — दोनों को अपने खुद के सेक्शन मिलते हैं जिसमें कंटेनर और आइटम प्रॉपर्टीज़, एलाइनमेंट वैल्यूज़ और शॉर्टहैंड फॉर्म शामिल हैं, जो डेवलपर्स सबसे ज्यादा खोजते हैं।

हां। लंबे समय से चले आ रहे कोर के अलावा, एक समर्पित रिस्पॉन्सिव और मॉडर्न सेक्शन उन नए फीचर्स को कवर करता है जो आप वर्तमान स्टाइलशीट में देखते हैं, साथ ही मीडिया-क्वेरी पैटर्न भी।

हां। कोड या होवर कॉपी आइकन पर क्लिक करें और डिक्लेरेशन आपके क्लिपबोर्ड पर आ जाएगा, जिसकी पुष्टि एक संक्षिप्त "Copied!" मैसेज से होती है।

हां, पूरी तरह मुफ्त — लाइव सर्च, बिना लॉगिन और असीमित उपयोग वाला क्लाइंट-साइड पेज।

CSS चीट शीट

Selectors

Box model

Flexbox

Grid

Typography

Colors & background

Positioning

Transitions & animation

Responsive & modern

CSS चीट शीट के बारे में

CSS चीट शीट का उपयोग कैसे करें

अक्सर पूछे जाने वाले प्रश्न

यह शीट CSS के किन क्षेत्रों को कवर करती है?

क्या इसमें फ्लेक्सबॉक्स और ग्रिड शामिल हैं?

क्या यह मॉडर्न CSS के साथ अपडेट है?

क्या मैं एक क्लिक से डिक्लेरेशन कॉपी कर सकता हूं?

क्या CSS चीट शीट फ्री है?

संबंधित टूल

लोकप्रिय खोजें

इस टूल को एम्बेड करें