CSS چیٹ شیٹ
ایک قابلِ تلاش، قابلِ پرنٹ CSS حوالہ — selectors، box model، flexbox، grid، ٹائپوگرافی، transitions اور جدید خصوصیات۔ مفت۔
Selectors
13.class
class والے تمام elements منتخب کریں
#id
id والا element منتخب کریں
a, b
گروپ: a اور b منتخب کریں
a b
Descendant: a کے اندر b
a > b
a کا براہ راست child b
a + b
a کے فوراً بعد متصل sibling
a ~ b
a کے بعد عام sibling b
[type="text"]
Attribute selector
:hover :focus
حالت کے لیے Pseudo-classes
:nth-child(2n)
ہر زوجی child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: .x کے سوا کچھ بھی
:is(h1, h2, h3)
فہرست میں کسی بھی selector سے میچ
Box model
7box-sizing: border-box;
width میں padding اور border شامل کریں
margin: 0 auto;
block کو افقی طور پر سینٹر کریں
padding: 1rem 2rem;
عمودی 1rem، افقی 2rem
border: 1px solid #ccc;
Width، style، رنگ
border-radius: 8px;
گول کونے
outline: 2px dashed red;
Outline (layout پر اثر نہیں)
overflow: hidden;
overflow ہونے والا مواد clip کریں
Flexbox
8display: flex;
flex container بنائیں
flex-direction: row | column;
مین axis سمت
justify-content: space-between;
مین axis کے ساتھ align کریں
align-items: center;
cross axis کے ساتھ align کریں
flex-wrap: wrap;
items کو wrap ہونے دیں
gap: 1rem;
items کے درمیان جگہ
flex: 1;
جگہ بھرنے کے لیے grow کریں (1 1 0)
align-self: flex-end;
ایک item کے لیے cross-axis override کریں
Grid
8display: grid;
grid container بنائیں
grid-template-columns: 1fr 1fr 1fr;
تین برابر کالم
repeat(3, 1fr)
دہرائے tracks کے لیے shorthand
minmax(200px, 1fr)
min اور max کے درمیان track
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive خودکار کالم
gap: 1rem;
Row اور column gap
grid-column: 1 / 3;
لائن 1 سے 3 تک span
place-items: center;
items دونوں axes پر سینٹر کریں
Typography
8font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
نسبتی font size
font-weight: 600;
Bold وزن
line-height: 1.6;
لائن اسپیسنگ
letter-spacing: .02em;
Tracking
text-align: center;
افقی متن alignment
text-transform: uppercase;
حرف کا case تبدیل کریں
text-overflow: ellipsis;
… سے truncate کریں (overflow+nowrap درکار)
رنگ اور بیک گراؤنڈ
7color: #1f2937;
متن کا رنگ
background: rgb(0 0 0 / 50%);
جدید rgb بمع alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element شفافیت
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
تصویر کو cover تک scale کریں
color-mix(in srgb, red 40%, blue);
دو رنگ ملائیں
Positioning
6position: relative;
عام پوزیشن سے offset
position: absolute;
قریب ترین positioned ancestor کی نسبت
position: fixed;
viewport کی نسبت
position: sticky; top: 0;
اسکرول کرنے پر چپک جاتا ہے
inset: 0;
top\/right\/bottom\/left = 0
z-index: 10;
Stacking order
Transitions اور animation
5transition: all .2s ease;
property تبدیلیوں کو animate کریں
transform: translateY(-4px) scale(1.05);
منتقل، scale، گھمائیں
@keyframes spin { to { transform: rotate(360deg); } }
animation متعین کریں
animation: spin 1s linear infinite;
keyframe animation چلائیں
will-change: transform;
براؤزر کو optimize کرنے کا hint دیں
Responsive اور جدید
7@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
min\/max کے ساتھ fluid ویلیو
aspect-ratio: 16 / 9;
aspect ratio برقرار رکھیں
var(--brand)
کسٹم property استعمال کریں
:root { --brand: #4f46e5; }
کسٹم property متعین کریں
container-type: inline-size;
container queries فعال کریں
@container (min-width: 400px) {…}
Container query
کوئی اندراج “:q” سے میل نہیں کھاتا۔
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔