Lesson 2 / الدرس 2

Syntax: selector, property, value / الصياغة: المُحدِّد والخاصية والقيمة

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 نفس الشكل: مُحدِّد يقول أي العناصر يستهدف، وإعلان واحد أو أكثر — كل إعلان خاصية مقترنة بقيمة — يقول كيف يجب أن تبدو.

Every rule you will ever write in CSS, simple or complicated, has exactly the same shape. Learn to name its pieces once, and every stylesheet you read afterward — yours or anyone else's — becomes readable.

p {
    color: navy;
}

Look closely at this one small rule — every term you learn in this lesson points at a piece of it.

The selector: which elements

p is the selector. It picks which elements the rule applies to — here, every <p> on the page. There are many kinds of selector, and a bare tag name like this is the simplest one there is.

p هنا هو المُحدِّد. وهو يحدد العناصر التي تنطبق عليها القاعدة؛ وهنا كل <p> في الصفحة. وستقابل أنواعًا كثيرة من المُحدِّدات لاحقًا، وأبسطها هو اسم وسم مجرّد كهذا.

The declaration: property + value

Between the braces sits color: navy; — one declaration. Split it in two: color is the property, the aspect of the element you are changing, and navy is the value, the setting you are giving it. A colon separates them, and a semicolon ends the declaration. A rule can hold as many declarations as it needs, one after another.

بين القوسين يقع color: navy; — وهذا إعلان واحد. اقسمه إلى جزأين: color هي الخاصية، أي جانب العنصر الذي تغيّره، و navy هي القيمة، أي الإعداد الذي تعطيه له. وتفصل بينهما نقطتان رأسيتان، وينتهي الإعلان بفاصلة منقوطة. وتستطيع القاعدة أن تحمل عدد الإعلانات الذي تحتاجه، واحدًا تلو الآخر.

p {
    color: navy;
    font-size: 1.2rem;
    text-align: center;
}

Three declarations in one rule, each ending in its own semicolon. Add a fourth the same way: property, colon, value, semicolon.

Term	Example	Meaning
Selector	p	Which elements the rule applies to
Property	color	The aspect being changed
Value	navy	The setting given to the property
Declaration	color: navy;	One property + one value together
Rule	p { color: navy; }	A selector plus its declarations

Every term from this lesson, side by side.

Try it live / جرّب بنفسك

<h2>Sale ends Friday</h2>
<p>All prices include tax.</p>

/* write your h2 rule here */


/* write your p rule here */

Preview / المعاينة

Check yourself / اختبر نفسك

1. In h1 { color: navy; }, which word is the property?

في h1 { color: navy; } أي كلمة هي الخاصية؟

2. Which word in that same rule is the selector?

3. color: navy; together — what is this called?

color: navy; معًا — ماذا يُسمّى هذا؟

Your task / مهمتك

Write a rule that targets every <h2> and gives it two declarations: a color and a font-size. Then write a second rule for every <p> with at least one declaration of your choice.

اكتب قاعدة تستهدف كل <h2> وتمنحها إعلانين: color و font-size. ثم اكتب قاعدة ثانية لكل <p> بإعلان واحد على الأقل من اختيارك.

A rule with the selector h2 قاعدة بالمُحدِّد h2
The h2 rule has at least two declarations, each ending with a semicolon قاعدة h2 فيها إعلانان على الأقل، كل واحد ينتهي بفاصلة منقوطة
A separate rule targets p قاعدة مستقلة تستهدف p