CSS چیٹ شیٹ

مفت

ایک قابلِ تلاش، قابلِ پرنٹ CSS حوالہ — selectors، box model، flexbox، grid، ٹائپوگرافی، transitions اور جدید خصوصیات۔ مفت۔

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 چیٹ شیٹ استعمال کرنے کا طریقہ

سیکشن کی فہرست پر ایک نظر ڈالیں — سلیکٹرز، باکس ماڈل، فلیکس باکس، گرڈ، ٹائپوگرافی اور مزید۔
grid، hover یا transition جیسی پراپرٹی یا تصور سرچ باکس میں ٹائپ کریں تاکہ ہر قطار فلٹر ہو جائے۔
اسٹکی ٹیبل آف کنٹینٹس کے ذریعے پوزیشننگ جیسے کسی سیکشن پر جائیں۔
CSS ڈیکلیریشن کاپی کرنے کے لیے کسی اسنیپٹ یا اس کے کاپی آئیکن پر کلک کریں۔
میز کے کنارے CSS حوالے کے لیے شیٹ پرنٹ کریں۔

اکثر پوچھے جانے والے سوالات

نو سیکشنز: سلیکٹرز، باکس ماڈل، فلیکس باکس، گرڈ، ٹائپوگرافی، رنگ اور بیک گراؤنڈز، پوزیشننگ، ٹرانزیشنز اور اینیمیشن، اور ریسپانسو نیز جدید CSS خصوصیات۔

جی ہاں — دونوں کے اپنے سیکشنز ہیں جن میں کنٹینر اور آئٹم پراپرٹیز، ایلائنمنٹ ویلیوز اور مختصر فارمز شامل ہیں، جو ڈیولپرز سب سے زیادہ تلاش کرتے ہیں۔

جی ہاں۔ دیرینہ بنیادی ڈھانچے کے علاوہ، ایک مخصوص ریسپانسو اور جدید سیکشن ان نئی خصوصیات کو کور کرتا ہے جو آپ موجودہ اسٹائل شیٹس میں دیکھتے ہیں، ساتھ ہی میڈیا کوئری پیٹرنز بھی۔

جی ہاں۔ کوڈ یا ہوور کاپی آئیکن پر کلک کریں اور ڈیکلیریشن آپ کے کلپ بورڈ پر آ جاتی ہے، ایک مختصر "کاپی ہو گیا!" پیغام کے ساتھ تصدیق شدہ۔

جی ہاں، مکمل طور پر مفت — لائیو سرچ والا ایک کلائنٹ سائیڈ صفحہ، بغیر لاگ اِن اور لامحدود استعمال کے۔

CSS چیٹ شیٹ

Selectors

Box model

Flexbox

Grid

Typography

Colors & background

Positioning

Transitions & animation

Responsive & modern

CSS چیٹ شیٹ کے بارے میں

CSS چیٹ شیٹ استعمال کرنے کا طریقہ

اکثر پوچھے جانے والے سوالات

شیٹ CSS کے کن شعبوں کو کور کرتی ہے؟

کیا اس میں فلیکس باکس اور گرڈ شامل ہیں؟

کیا یہ جدید CSS کے مطابق ہے؟

کیا میں ڈیکلیریشنز ایک کلک سے کاپی کر سکتا ہوں؟

کیا CSS چیٹ شیٹ مفت ہے؟

متعلقہ ٹولز

مقبول تلاشیں

یہ ٹول ایمبیڈ کریں