CSSسي إس إس

HTML describes structure; CSS decides how that structure looks. You can add CSS to a page three ways — inline with the style attribute, inside a <style> block, or in a separate .css file linked with <link> — and only the last one is what real projects use.

HTML تصف الهيكل، و CSS تقرر شكل ذلك الهيكل. ويمكنك إضافة CSS إلى الصفحة بثلاث طرق: مباشرة عبر سمة style، أو داخل كتلة <style>، أو في ملف .css منفصل مربوط عبر <link> — والطريقة الأخيرة وحدها هي ما تستعملها المشاريع الحقيقية.

Every CSS rule has the same shape: a selector says which elements it targets, and one or more declarations — each a property paired with a value — say how they should look.

لكل قاعدة CSS نفس الشكل: مُحدِّد يقول أي العناصر يستهدف، وإعلان واحد أو أكثر — كل إعلان خاصية مقترنة بقيمة — يقول كيف يجب أن تبدو.

CSS comments (/* … */) let you leave notes for later or switch a rule off while testing. Steady formatting — one declaration per line, consistent indentation — is what keeps a stylesheet readable once it grows past a handful of rules.

تعليقات CSS (/* … */) تتيح لك ترك ملاحظات لاحقًا أو تعطيل قاعدة مؤقتًا أثناء التجربة. والتنسيق الثابت — إعلان واحد في كل سطر، ومسافات بادئة متسقة — هو ما يبقي ورقة التنسيق مقروءة بعد أن تكبر عن حفنة قواعد.

The simplest selector is a bare tag name: write p and the rule reaches every <p> on the page at once — one rule, as many elements as the page happens to have.

أبسط مُحدِّد هو اسم وسم مجرّد: اكتب p فتصل القاعدة إلى كل <p> في الصفحة دفعة واحدة — قاعدة واحدة، بعدد ما تملكه الصفحة من عناصر.

Select elements by their class or id attribute: .card for anything sharing a class, #header for the one element with that id.

اختر العناصر بسمة class أو id: .card لكل ما يشترك في صنف واحد، و #header للعنصر الوحيد الذي يحمل هذا المعرّف.

Style several selectors at once with a comma, or reach every element on the page with * — and know when each is the right tool.

نسّق عدة مُحدِّدات دفعة واحدة بفاصلة، أو صِل إلى كل عنصر في الصفحة بـ * — واعرف متى يكون كل منهما الأداة الصحيحة.

Combine two selectors to target elements by their position in the HTML: A B reaches anywhere inside, A > B reaches only a direct child, and A + B / A ~ B reach siblings.

اجمع بين مُحدِّدين لتستهدف العناصر حسب موقعها داخل HTML: A B يصل إلى أي مكان بالداخل، و A > B يصل فقط إلى ابن مباشر، بينما A + B و A ~ B يصلان إلى الأشقاء.

Select elements by the HTML attributes they carry, and even by part of an attribute value: [type="email"], [href^="https"], [class*="btn"].

اختر العناصر حسب السمات التي تحملها في HTML، بل وحسب جزء من قيمة السمة: [type="email"] و [href^="https"] و [class*="btn"].

Style an element by its current state — being hovered, focused, pressed or already visited — with a pseudo-class.

الصنف الزائف يتيح لك تنسيق العنصر بحسب حالته الحالية — أثناء المرور عليه، أو التركيز عليه، أو ضغطه، أو كونه رابطًا زُرته من قبل.

Select an element by its position among its siblings — first, last, or a repeating pattern — instead of its tag, class or id.

اختر عنصرًا بحسب موضعه بين إخوته — الأول، أو الأخير، أو نمط متكرر — بدل الاعتماد على الوسم أو الصنف أو الـ id.

Generate extra content that is not in the HTML using ::before and ::after, and style part of an element's text with ::first-line.

أضف محتوى إضافيًا غير موجود في HTML باستخدام ::before و ::after، ونسّق جزءًا من نص العنصر باستخدام ::first-line.

Four selectors that shorten what you already know: :not() excludes, :is() groups, :where() groups without weight, and :has() lets a parent react to its children.

أربعة مُحدِّدات تختصر ما تعرفه أصلًا: :not() يستثني، و:is() يجمّع، و:where() يجمّع بلا وزن، و:has() يجعل العنصر الأب يتفاعل مع أبنائه.

A form control changes as it is used — checked, disabled, focused, invalid, still empty. CSS can see every one of those states, so the form can answer the visitor without a line of JavaScript.

يتغير عنصر التحكم في النموذج أثناء استخدامه — مُعلَّم، معطّل، مركَّز عليه، غير صالح، ما زال فارغًا. وتستطيع CSS رؤية كل واحدة من هذه الحالات، فيجيب النموذج الزائر دون سطر واحد من JavaScript.

You now have five ways to select the same element. When two rules conflict, specificity, the cascade and inheritance decide, together, which one wins.

أصبح لديك الآن خمس طرق لاختيار العنصر نفسه. وحين تتعارض قاعدتان، تقرر الأولوية والتتالي والوراثة معًا أيهما تفوز.

Set text and background colors with names, hex, rgb() and hsl() — plus currentColor, transparent, and how to check a color pair is actually readable.

اضبط ألوان النص والخلفية بالأسماء و hex و rgb() و hsl() — إضافة إلى currentColor و transparent، وكيف تتحقق أن ألوانك مقروءة فعلاً.

Every size in CSS needs a unit. px is fixed, while rem, em, % and vw all measure against something else.

كل قياس في CSS يحتاج وحدة. الوحدة px ثابتة، أما rem وem و% وvw فتقيس كل واحدة منها بالنسبة إلى شيء آخر.

Four functions that do arithmetic in CSS. They let one declaration cover every screen, so a heading can grow with the window and still refuse to become absurd at either end.

أربع دوال تُجري حسابات داخل CSS. تتيح لإعلان واحد أن يغطي كل الشاشات، فيكبر العنوان مع النافذة ويرفض أن يصبح سخيفًا عند أي من الطرفين.

Choose a typeface with font-family, then set its size, weight and style — and always give the browser a fallback.

اختر نوع الخط بـ font-family، ثم اضبط حجمه ووزنه ونمطه — وأعطِ المتصفح خطًا بديلًا دائمًا.

Align it, underline it, space it out — and give it a line-height, which is the cheapest readability win in CSS.

حاذِ النص، وضع تحته خطًا، وباعِد بين حروفه — وأعطه line-height، فهي أرخص مكسب للقراءة في CSS كلها.

Ship a font with your page using @font-face — and choose one that actually contains Arabic letters, because most do not.

أرسِل الخط مع صفحتك باستخدام @font-face — واختر خطًا يحتوي فعلًا على حروف عربية، فأغلب الخطوط لا تحتويها.

Every element is a rectangular box made of four layers: content, padding, border and margin. This lesson makes the difference between them unmistakable.

كل عنصر هو صندوق مستطيل مكوّن من أربع طبقات: المحتوى، والحشو، والحدود، والهامش. هذا الدرس يجعل الفرق بينها واضحًا تمامًا.

width and height set the size of an element's content — until padding and border push it wider. box-sizing: border-box fixes that by counting them inward instead of adding them on top.

تحددان width و height حجم محتوى العنصر — إلى أن يوسّعاه الحشو والحدود. وتُصلح box-sizing: border-box ذلك بحساب الحشو والحدود ضمن الحجم نفسه بدل إضافتهما فوقه.

A border needs three things to appear: a width, a style and a color. Then border-radius rounds its corners, all the way to a circle.

تحتاج الحدود إلى ثلاثة أشياء حتى تظهر: عرض ونمط ولون. ثم تُقوّس border-radius زواياها، وصولًا إلى دائرة كاملة.

Write start and end instead of left and right, and one stylesheet serves an Arabic page and an English one correctly — without a second rule for either.

اكتب البداية والنهاية بدل اليسار واليمين، فيخدم ملف أنماط واحد صفحة عربية وأخرى إنجليزية بشكل صحيح — دون قاعدة ثانية لأي منهما.

Put a picture behind an element with background-image, control how it repeats, sits and scales, or skip the file entirely and paint a linear-gradient() instead.

ضع صورة خلف عنصر باستخدام background-image، وتحكّم بتكرارها وموضعها وحجمها، أو تجاوز الملف كليًا وارسم linear-gradient() بدلًا منه.

Two properties that solve the oldest problem in web layout: photos arrive at sizes you did not choose. aspect-ratio reserves a shape, and object-fit decides how the picture fills it.

خاصيتان تحلان أقدم مشكلة في تخطيط الويب: الصور تصل بأحجام لم تخترها أنت. تحجز aspect-ratio شكلًا، وتقرر object-fit كيف تملأ الصورة ذلك الشكل.

box-shadow adds depth around a whole box; text-shadow adds it just behind the letters. A soft, low-opacity shadow almost always reads better than a hard, solid one.

تضيف box-shadow عمقًا حول الصندوق كله، بينما تضيفه text-shadow خلف الحروف فقط. والظل الناعم منخفض الشفافية يبدو دائمًا تقريبًا أفضل من ظل حاد وصلب.

The display property decides how an element's box behaves in the page's flow: whether it starts a new line, sits inside one, accepts a size — or disappears from the page entirely.

خاصية display تقرر كيف يتصرف صندوق العنصر داخل تدفق الصفحة: هل يبدأ سطرًا جديدًا، أم يجلس داخل سطر، أم يقبل تحديد حجمه — أم يختفي من الصفحة تمامًا.

What happens when content is bigger than its box, the four overflow values, and why visibility: hidden leaves a gap while display: none does not.

ماذا يحدث عندما يكون المحتوى أكبر من صندوقه، وقيم overflow الأربع، ولماذا تترك visibility: hidden فجوة بينما لا تفعل display: none ذلك.

static, relative, absolute, fixed and sticky — what each one positions an element against, and how z-index decides which one sits on top when they overlap.

static و relative و absolute و fixed و sticky — بالنسبة لماذا يتموضع كل عنصر، وكيف تقرر z-index أيها يجلس فوق الآخر عند التداخل.

Floating an image so text wraps around it, using clear to stop the wrap, the collapsed-parent problem — and an honest look at why float is no longer how pages are laid out.

جعل صورة عائمة ليلتف النص حولها، واستخدام clear لإيقاف الالتفاف، ومشكلة انهيار العنصر الأب — ونظرة صادقة إلى سبب أن float لم تعد الطريقة التي تُبنى بها الصفحات.

Turn any element into a flex container with display: flex, then arrange its children along two axes with flex-direction, justify-content, align-items, flex-wrap and gap.

حوّل أي عنصر إلى حاوية Flexbox بخاصية display: flex، ثم رتّب عناصره الفرعية على محورين بخصائص flex-direction و justify-content و align-items و flex-wrap و gap.

Control one flex item at a time with flex-grow, flex-shrink, flex-basis and the flex shorthand, override its alignment with align-self, reorder it with order — then build a real nav bar and a row of cards.

تحكّم بعنصر Flexbox واحد في كل مرة بخصائص flex-grow و flex-shrink و flex-basis واختصار flex، وتجاوز محاذاته بـ align-self، وأعد ترتيبه بـ order — ثم ابنِ شريط تنقّل حقيقيًا وصف بطاقات.

Turn any element into a grid with display: grid, size its columns and rows with grid-template-columns/grid-template-rows, the fr unit and repeat(), and space cells apart with gap.

حوّل أي عنصر إلى شبكة بخاصية display: grid، وحدد أحجام أعمدتها وصفوفها بـ grid-template-columns و grid-template-rows ووحدة fr ودالة repeat()، وباعد بين خلاياها بـ gap.

Name whole regions with grid-template-areas, make one item span extra cells with grid-column/grid-row, and build a grid that reflows on its own with minmax() and auto-fit — no media query needed.

سمِّ مناطق كاملة بـ grid-template-areas، واجعل عنصرًا واحدًا يمتد عبر خلايا إضافية بـ grid-column و grid-row، وابنِ شبكة تعيد ترتيب نفسها تلقائيًا بـ minmax() و auto-fit — دون أي استعلام وسائط.

Adapt your CSS to the screen it is shown on with @media, min-width and max-width, and the viewport tag that makes any of it work on a phone.

كيّف CSS الخاص بك مع الشاشة المعروضة عليها باستخدام @media و min-width و max-width، ووسم viewport الذي يجعل كل ذلك يعمل فعليًا على الجوال.

Store a value once with a --name on :root, reuse it everywhere with var(), and change your whole site's colors from one place instead of forty.

خزّن قيمة مرة واحدة بـ --name على :root، وأعد استخدامها في كل مكان عبر var()، وغيّر ألوان موقعك كله من مكان واحد بدل أربعين مكانًا.

Visitors tell their device whether they want light or dark, and the browser passes that on. With the variables from last lesson, honouring it costs one media query and a second set of values.

يخبر الزوار أجهزتهم إن كانوا يريدون الفاتح أم الداكن، وينقل المتصفح ذلك إليك. ومع المتغيّرات من الدرس الماضي، لا يكلّفك احترام ذلك إلا استعلام وسائط واحدًا ومجموعة قيم ثانية.

Make a property change smoothly instead of snapping instantly, with transition-property, -duration, -timing-function, -delay, and the shorthand that combines them.

اجعل تغيّر خاصية ما تدريجيًا بدل أن يقفز فجأة، عبر transition-property و -duration و -timing-function و -delay، والاختزال الذي يجمعها معًا.

Move, rotate and scale an element with transform without disturbing the layout around it, then build a looping animation with @keyframes.

حرّك عنصرًا ودوّره وكبّره أو صغّره باستخدام transform دون أن تُخل بالتخطيط من حوله، ثم ابنِ حركة متكررة بواسطة @keyframes.

Take the three-page personal site you already built and give it a real stylesheet: variables, readable type, a Flexbox or Grid layout, a media query, and a hover state.

خذ موقعك الشخصي الثلاثي الصفحات الذي بنيته بالفعل، وأعطه ملف تنسيق حقيقيًا: متغيّرات، ونصًا مقروءًا، وتخطيط Flexbox أو الشبكة، واستعلام وسائط، وحالة hover.

A method for the moment the page does not look how you expected: check the markup, read the computed styles, and find the rule that actually won — instead of guessing and changing things.

طريقة منهجية للحظة التي لا تبدو فيها الصفحة كما توقعت: افحص الترميز، واقرأ الأنماط المحسوبة، وابحث عن القاعدة التي فازت فعلًا — بدل التخمين وتغيير الأشياء عشوائيًا.

The last step: a folder on your computer becomes an address anyone can open. What a host actually does, how to get the files there, and the handful of things to check once it is live.

الخطوة الأخيرة: مجلد على حاسوبك يصبح عنوانًا يستطيع أي أحد فتحه. ما الذي تفعله الاستضافة فعلًا، وكيف تُوصل الملفات إلى هناك، والأمور القليلة التي تتفقّدها بعد أن يصبح الموقع حيًّا.