IS231 — CSS Complete Study Guide

01

What is CSS & Why Do We Need It?

CSS Introduction · Inline Styles · 3 Ways to Add CSS

🎨 What is CSS? — ببساطة إيه ده؟

CSS = Cascading Style Sheets — هي اللغة اللي بتتحكم في شكل صفحات الويب. يعني لو الـ HTML هو "الهيكل العظمي" للصفحة، فالـ CSS هو "الملابس والديكور" اللي بيخليها تبان حلوة.

CSS SYNTAX

/* selector { property: value; } */

h1 {
  color: crimson;
  font-size: 2em;
  background: #f0f0f0;
}

p {
  font-family: Verdana, sans-serif;
  margin: 20px;
  line-height: 1.6;
}

💡 الـ 3 أسباب اللي بيذكرهم في الامتحان:

What is CSS? = اللغة اللي بتستخدم لعمل style للـ HTML documents — بتتحكم في colors, fonts, layouts

How does it work? = CSS rules بتستهدف HTML elements وبتحدد ازاي تتعرض

Why use CSS? = ملف CSS واحد بيتحكم في صفحات كتير → وفر وقت وثبات

🚨 Why CSS? — المشكلة اللي CSS حلّتها

المشكلة (قبل CSS):

❌ الطريقة القديمة — Messy HTML
كل page كان فيها style attributes في كل element → كود كتير جداً ومش منظم

<font color="red" size="3"> → كانوا بيحطوها في كل مكان!

HTML 3.2 — THE NIGHTMARE

<!-- كل صفحة كانت زي دي! -->
<h1><font color="red" size="6">Title</font></h1>
<p><font color="blue">Paragraph</font></p>
<!-- ×100 pages = nightmare! -->

الحل (CSS):

✅ الطريقة الصح — External CSS
W3C عملت CSS عشان تفصل الـ structure (HTML) عن الـ presentation (CSS)

mystyle.css — كتبته مرة واحدة!

h1 { color: red; font-size: 2em; }
p  { color: blue; }

/* غيّره مرة واحدة → اتغير للموقع كله! */

⚡ نقطة مهمة فالامتحان:
الـ W3C هي اللي صممت CSS عشان تحل مشكلة الـ formatting في HTML

✍️ Inline Style — الـ style attribute

بتحط الـ CSS مباشرة على الـ element نفسه. مش موصى بيها إلا لو عايز تعمل تغيير لعنصر واحد بس.

INLINE STYLE EXAMPLES — من السلايدز

Font Family Example:
<h1 style="font-family:verdana;">This is a heading</h1>
<p  style="font-family:courier;">This is a paragraph.</p>

Colors and Sizes:
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

Combined Styles:
<h1 style="color:blue;text-align:center;">Styled Heading</h1>

📌 مهم تعرف: الـ inline style بيستخدم الـ style attribute مباشرة على الـ HTML element. ممكن تحط فيه أي CSS property.

🔢 3 Ways to Add CSS — دي من أكتر الأسئلة اللي بتيجي!

1️⃣ Inline CSS

مباشرة على العنصر. بس لو عندك elements كتير ده بيكون مزعج.

INLINE

<p style="color:red;">
  Red text
</p>

أعلى أولوية (Priority #1)

2️⃣ Internal CSS

جوا الـ <head> في <style> tag. كويس لو الصفحة دي ليها style مختلف.

INTERNAL

<head>
<style>
p { color: red; }
</style>
</head>

Priority #2

3️⃣ External CSS

ملف .css منفصل. الأفضل لمواقع فيها صفحات كتير — غيّر ملف واحد يتغير كل حاجة!

EXTERNAL

<head>
<link rel="stylesheet"
      type="text/css"
      href="style.css">
</head>

Priority #3 (Lowest after browser default)

🚨 مهم جداً من الامتحانات:
• الـ External CSS file مش المفروض يحتوي على HTML tags — CSS فقط!
• الـ link element بيتحط في الـ <head> section
• الـ type="text/css" هو نوع الـ MIME للـ CSS files

02

CSS Syntax & Cascading Order

Rule Anatomy · Priority · Multiple Stylesheets · Comments

🔬 CSS Rule Anatomy — تشريح الـ CSS Rule

h1 { color: blue; font-size: 12px; }

Selector

h1

Property

color

Value

blue

Declaration

color:blue

📌 التعريفات — محفوظة للامتحان:

Selector = بيحدد أنهي HTML element هتطبق عليه الـ style

Declaration Block = كل حاجة جوا الـ { } — ممكن يكون فيها declarations كتير

Property = اسم الـ style اللي عايز تغيره (color, font-size, ...)

Value = القيمة بتاعة الـ property (red, 12px, ...)

Declaration = property + value مع بعض زي "color:red"

⚡ من final-2024:
"color:red" can be called = Declaration (مش Selector ومش Value)

⚡ Cascading Order — مين بيتغلب على مين؟

لما يبقى في conflict بين rules — أنهي rule يتطبق؟ في ترتيب محدد للـ priority:

1

Inline Style

style="color:red;" على الـ element نفسه

↓ لو مفيش inline

2

Internal CSS

↓ لو مفيش internal (أو External جاي بعدها)

3

External CSS

ملف .css منفصل

↓ لو مفيش CSS خالص

4

Browser Default

الـ default styling بتاع الـ browser

CASCADING ORDER EXAMPLE

/* External file: mystyle.css */
h1 { color: navy; }   ← Priority 3

/* Internal: inside <style> in <head> */
h1 { color: orange; } ← Priority 2 (wins over external!)

/* Inline on element */
<h1 style="color:pink">  ← Priority 1 (WINS everything!)

/* Multiple stylesheets — last one wins! */
<link href="mystyle.css">   ← h1: color blue
<link href="mystyle2.css">  ← h1: color red → هذا يفوز!

🚨 External CSS has the highest priority? → FALSE!
Inline style هو الأعلى دايماً. External هو قبل browser default بس.

💬 CSS Comments — المهم تعرف الـ Syntax

CSS COMMENTS

/* Single-line comment */
p { color: red; }

/* This is
   a multi-line
   comment */
p { color: red; }

/* Temporarily disabled:
p { color: blue; }
*/

💡 Comments في CSS:

• بتبدأ بـ /* وبتخلص بـ */
• الـ browser بيتجاهلها خالص
• ممكن تكون single-line أو multi-line
• بنستخدمها لشرح الكود أو لـ disable مؤقت لـ rules

⚠️ مفيش // comments في CSS زي JavaScript!

🎯

Quiz — CSS Foundations

أسئلة حقيقية من امتحانات mid-2022 / mid-2023 / final-2024 / final-2025

Q1 mid-2022

One of the uses of Cascading Style is to ________

A Identify how elements will be displayed on paper

B Identify how elements will be saved to the server

C Identify how elements will be sent to the client

D None of the answers!

✅ CSS بتحدد كيفية عرض الـ HTML elements — سواء على الشاشة أو على الورق (print). الإجابة A لأن الـ CSS بتحدد presentation بما فيه "on paper".

Q2 mid-2022

(Multiple answers): CSS can be defined ________

A Internally inside the HTML by adding the styles in the <style> element

B Externally in a separate file

C Inline inside an HTML element using the "style" attribute

D كل ما سبق (A + B + C)

✅ الـ CSS ممكن تتحط بـ 3 طرق: Internal (<style>)، External (ملف منفصل)، Inline (style attribute). كل الإجابات صح.

Q3 mid-2022

A Internal CSS

B External CSS

C Inline CSS

D None of the answers!

✅ الـ <link href="style.css"> ده بيربط ملف CSS منفصل — يعني External CSS. Internal بيبقى <style> جوا الـ <head>.

Q4 mid-2023

Which of the following CSS styles has the HIGHEST priority?

A External style

B Internal style

C Inline style

D Browser default

✅ Inline → Internal → External → Browser default. الـ Inline style دايماً أعلى priority لأنه أكثر specific.

Q5 final-2024

External CSS style has the highest priority. True or False?

A True

B False

✅ FALSE! الـ Inline style هو الأعلى priority — مش الـ External. External له أدنى priority من Inline وInternal.

Q6 final-2024

In CSS, "color:red" can be called as:

A Selector

B Declaration

C Rule

D Value

✅ Declaration = property + value مع بعض. "color:red" هو declaration واحد. الـ Rule = selector + { declarations }. الـ Value وحده = "red" بس.

Q7 mid-2023

Which of the following is the correct way to apply CSS Styles?

A Inside an HTML element (inline)

B Inside the <head> section of an HTML page

C In an external CSS file

D All of the mentioned

✅ كل الطرق الثلاث صح! Inline, Internal, External — كلها طرق valid لإضافة CSS.

Q8 final-2025

CSS can be defined externally in a separate file by adding the <style> element inside the <head>. True or False?

A False

B True

✅ FALSE! الـ External CSS بيتربط بـ <link> tag مش <style>. الـ <style> tag هو Internal CSS.

03

Simple CSS Selectors

Element · Class · ID · Universal · Grouping

🎯 5 نوع من الـ Simple Selectors

Selector	Syntax	بيستهدف إيه؟	مثال
Element	`p { }`	كل <p> elements في الصفحة	p { color: red; }
Class	`.center { }`	كل elements عندها class="center"	.center { text-align: center; }
ID	`#para1 { }`	element واحد فقط بـ id="para1"	#para1 { color: blue; }
Universal	`* { }`	كل الـ elements في الصفحة	* { margin: 0; }
Grouping	`h1, h2, p { }`	مجموعة selectors مع بعض	h1,h2,p { color: navy; }

📝 Element Selector

CSS

p {
  text-align: center;
  color: red;
}
/* كل <p> في الصفحة بتتأثر */

<h1>Heading</h1>
<p>Styled!</p>
<div>Not styled</div>
<p>Also Styled!</p>

#️⃣ ID Selector

CSS

#para1 {
  text-align: center;
  color: red;
}
/* element واحد بس بـ id="para1" */

<p id="para1">Styled! (only this)</p>
<p id="para2">Not styled</p>

⚠️ Note: CSS selectors مش بتبدأ بـ digit. #1para ✗ — #para1 ✓

🏷️ Class Selector — الأكثر استخداماً!

CSS — 3 طرق لاستخدام Class

/* 1. كل elements بالـ class */
.center { text-align: center; }

/* 2. نوع محدد بالـ class فقط */
p.center { text-align: center; }
/* بس <p> elements مع class="center" */

/* 3. Element بـ classes كتير */
<p class="center large">Two classes!</p>

<h1 class="center">Styled by .center</h1>
<p class="center">Styled by p.center</p>
<div>Not styled</div>

⭐ Universal & Grouping

CSS

/* Universal — كل حاجة في الصفحة */
* {
  text-align: center;
  color: blue;
}

/* Grouping — بدل ما تكرر */
/* قبل: */
h1 { text-align: center; color: red; }
h2 { text-align: center; color: red; }
p  { text-align: center; color: red; }

/* بعد — بالـ Grouping: */
h1, h2, p {
  text-align: center;
  color: red;
}

💡 Universal Selector (*) ≠ Styling all <p> elements
الـ Universal بيستهدف كل الـ elements مش بس الـ p. عايز كل الـ p بس؟ استخدم element selector: p { }

04

Combinator Selectors — النوع الأصعب!

Descendant · Child · Adjacent Sibling · General Sibling

🔗 الـ 4 Combinators — جدول المقارنة

Combinator	Symbol	المعنى	مثال
Descendant	space	كل F جوا E بأي مستوى	`div p`
Child	>	F اللي هو direct child لـ E فقط	`div > p`
Adjacent Sibling	+	أول F مباشرة بعد E (نفس الـ parent)	`div + p`
General Sibling	~	كل F بعد E (نفس الـ parent)	`div ~ p`

🚨 الـ HTML الأساسي اللي الامتحانات بتسأل عليه!

دي الـ HTML اللي بتيجي في كل الامتحانات. لازم تحفظها وتعرف تحللها:

EXAM HTML — mid-2023 / final-2024 / final-2025

<h2 id="id1">Hello World</h2>
<p>Welcome</p>                        ← p قبل الـ div
<div>
  <p>Paragraph 1.</p>             ← direct child of div ✓
  <p>Paragraph 2.</p>             ← direct child of div ✓
  <section>
    <p>Paragraph 3.</p>           ← inside section, NOT direct child ✗
  </section>
</div>
<p>Paragraph 4.</p>                ← sibling after div ✓
<p>Paragraph 5.</p>                ← sibling after div ✓

div p { } — Descendant

P1, P2, P3 → 3 elements
كل <p> جوا الـ div بأي مستوى
P3 جوا section جوا div → تحت.

div > p { } — Child

P1, P2 فقط → 2 elements
P3 جوا <section> — مش direct child
∴ مش بتتأثر!

div + p { } — Adjacent

P4 فقط → 1 element
أول <p> مباشرة بعد <div>
P5 مش immediately after.

div ~ p { } — General Sibling

P4, P5 → 2 elements — كل <p> siblings بعد الـ div. "Welcome" قبل الـ div ✗ — مش بيتأثر!

🚨 اللي بيغلط فيها الجميع:
• div > p = 2 (مش 3!) — P3 جوا section
• div ~ p = 2 (مش 3!) — P قبل div مش بيتحسب
• div + p = 1 — الأولانية بس immediately بعد div

📦 Child Selector — div > p

CSS

div > p {
  background-color: yellow;
}
/* فقط <p> direct children of <div> */

<div>
<p>✓ Direct child</p>
<span><p>✗ Grandchild</p></span>
</div>

🔄 General Sibling — div ~ p

CSS

div ~ p {
  background-color: yellow;
}
/* كل <p> siblings بعد <div> */

<p>✗ Before div</p>
<div></div>
<p>✓ After div</p>
<p>✓ Also after div</p>

05

CSS Pseudo-classes

:hover · :first-child · :empty · :focus · Anchor States

🔮 ما هي الـ Pseudo-class؟

الـ Pseudo-class بتحدد حالة خاصة للـ element — زي لما الماوس عليه، أو أول element في الـ parent. Syntax: selector:pseudo-class { property: value; }

PSEUDO-CLASS EXAMPLES

a:hover        { color: hotpink; }    /* hover state */
input:focus    { border-color: blue; } /* focused input */
li:first-child { font-weight: bold; }  /* first in list */
p:empty        { display: none; }      /* p with no children */
input:enabled  { color: green; }      /* enabled input */
input:disabled { color: gray; }       /* disabled input */

🔗 Anchor Pseudo-classes — Link States

الـ links ليها 4 states ممكن تستايلها:

CSS — LINK STATES

a:link    { color: #FF0000; } /* unvisited link — لم يزر بعد */
a:visited { color: #00FF00; } /* visited link — زاره */
a:hover   { color: #FF00FF; } /* mouse over — ماوس فوقه */
a:active  { color: #0000FF; } /* selected link — لما بيكليك عليه */

⚡ من الامتحان:
• a:hover = لما الماوس فوق الـ link (mouse over)
• a:link = الـ link اللي مزاروش
• a:active = وقت الـ click
• a::hover بـ double colon → WRONG! — Pseudo-class بـ single colon

⚠️ :first-child — الفخ الأكبر في الامتحانات!

p:first-child بتستهدف <p> element بس لو ده أول child بتاع الـ parent بتاعه.

EXAM HTML — CSS Selector Section

<body>
  <h2>CSS Selector</h2>   ← أول child!
  <p>Hello I am Here:</p>  ← 2nd child
  <p>Paragraph 2</p>        ← 3rd child
  <p>Hello P3</p>          ← 4th child
</body>

p:first-child { color: red; }

🚨 النتيجة = 0 elements!

p:first-child تعني:
"أي <p> هو أول child لـ parent بتاعه"

في الـ body، أول child = <h2> مش <p>
∴ مفيش <p> هو first-child → 0 styled!

لو كان في div جوا الـ body:
<div><p>first</p></div>
هنا الـ p ده first-child ✓

💡 انتبه!
h2:first-child بيتطبق لأن h2 هو أول child لـ body. = 1 element ✓

✅ :enabled Selector

CSS

:enabled  { color: green; }
:disabled { color: gray; }
:checked  { accent-color: blue; }

/* مش ::enabled (double colon) */
/* Pseudo-class = single colon : */

⚠️ من mid-2023:
سألوا "Which CSS selector selects the elements that are enabled?"

الإجابة الصح = :enabled (single colon)
::enabled = WRONG (double colon للـ pseudo-elements مش pseudo-classes)

06

CSS Pseudo-elements

::first-line · ::first-letter · ::before · ::after · ::selection

✨ Pseudo-elements — بتستهدف جزء من الـ element

الـ Pseudo-element بتستايل جزء معين من الـ element — زي أول حرف أو أول سطر. Syntax: selector::pseudo-element { }

⚡ الفرق المهم:
Pseudo-class = : (single) — state بتاع الـ element
Pseudo-element = :: (double) — جزء من الـ element

ALL PSEUDO-ELEMENTS

p::first-letter { font-size: 200%; } ← Drop cap
p::first-line   { color: #0000FF; } ← أول سطر
h1::before      { content: "★ "; }  ← قبل
h2::after       { content: " ★"; }  ← بعد
::marker        { color: red; }      ← list bullet
::selection     { background: yellow; } ← selected text

Pseudo-element	بيعمل إيه؟
`::first-line`	بيستايل أول سطر في الـ text block — الـ browser بيحدد هو أول سطر إيه بناءً على عرض الـ viewport
`::first-letter`	بيستايل أول حرف — زي الـ Drop Cap في الجرايد
`::before`	بيضيف content قبل الـ element content — محتاج `content` property
`::after`	بيضيف content بعد الـ element content
`::marker`	بيستايل bullet أو number الـ list item
`::selection`	بيستايل الـ text اللي المستخدم بيسيلكته بالماوس

07

CSS Attribute Selectors

[attr] · [attr=val] · [attr^=val] · [attr$=val] · [attr*=val]

🏷️ Attribute Selectors — بتستهدف بـ Attribute

Selector	المعنى	مثال
`[attr]`	كل elements عندها الـ attribute ده (بأي قيمة)	`a[target]`
`[attr=v]`	attribute بقيمة معينة exactly	`a[target="_blank"]`
`[attr~=v]`	attribute value فيها الـ word ده	`[class~="note"]`
`[attr\|=v]`	attribute يساوي v أو يبدأ بـ v- (للغات)	`[lang\|="en"]`
`[attr^=v]`	attribute يبدأ بـ v	`a[href^="https"]`
`[attr$=v]`	attribute ينتهي بـ v	`a[href$=".pdf"]`
`[attr*=v]`	attribute يحتوي على v في أي مكان	`[class*="card"]`

EXAM EXAMPLES

/* كل <a> عندها target attribute */
a[target]          { background-color: yellow; }

/* فقط target="_blank" */
a[target="_blank"] { background-color: green; }

/* type="text" inputs */
input[type="text"] { border: 2px solid blue; }

🧪 من الامتحانات — تحليل:

الـ HTML: <a href="w3schools">, <a href="disney" target="_blank">, <a href="wiki" target="_top">

a[target=_blank] → disney فقط = 1 element
a[target] → disney + wiki = 2 elements (أي target attr)
a { } → كل الـ 3 links = 3 elements

[target=_blank] = اسمه Attribute Selector (مش anchor selector)

🎯

Quiz — CSS Selectors

أصعب جزء في الامتحانات — تمرن كويس!

Q1 mid-2023 / final-2024

By using this CSS selector div > p { color: red }, how many p elements will be styled from the exam HTML?

A 3

B 2

C 5

D 6

✅ div > p = direct children فقط. P1 وP2 هم direct children. P3 جوا <section> مش direct child. الإجابة = 2.

Q2 mid-2023 / final-2024

By using this CSS selector div ~ p {color: blue}, the number of p elements that will be styled is:

A 3

B 2

C 5

D 6

✅ div ~ p = كل <p> siblings بعد الـ div. P4 وP5 جايين بعد div. "Welcome" قبل div ✗. الإجابة = 2.

Q3 final-2025

By using this CSS selector div + p { color: red}, how many p elements will be styled from the exam HTML?

A 1

B 2

C 4

D 3

✅ div + p = أول <p> immediately بعد الـ div فقط. P4 هو الأولانية — P5 مش immediately. الإجابة = 1.

Q4 mid-2023 / final-2024

In "a[target=_blank]", the [target=_blank] is called:

A Attribute selector

B Anchor selector

C Pseudo element selector

D None of the above

✅ [target=_blank] = Attribute Selector — بيستهدف elements اللي عندها attribute بقيمة محددة.

Q5 mid-2023 / final-2024 / final-2025

By using p:first-child {color:red;} on the CSS Selector exam HTML, how many elements will be styled?

A 0 (None)

B 1

C 3

D 2

✅ p:first-child بتستهدف <p> اللي هو أول child لـ parent بتاعه. في body، أول child = <h2> مش <p>. ∴ مفيش p يتستايل = 0.

Q6 mid-2023

To change the background color of ALL <a> elements to be yellow, you can use:

A a[target] {background-color: yellow;}

B a.all{background-color: yellow;}

C a[target=_blank target=_top] {background-color: yellow;}

D a{background-color: yellow;}

✅ عايز كل الـ <a> → استخدم element selector: a { }. الـ a[target] بيستهدف بس اللي عندها target attribute مش كلها.

Q7 mid-2023 / final-2024

To change the color of <a> elements to yellow when the mouse moves over it, you can use:

A a::hover {background-color: yellow;}

B a:hover {background-color: yellow;}

C a:link {background-color: yellow;}

D a:active {background-color: yellow;}

✅ :hover = pseudo-class بـ single colon للـ hover state. ::hover مش موجود (double colon للـ pseudo-elements). :link = unvisited. :active = while clicking.

Q8 mid-2023

Which of the following CSS selector selects the elements that are enabled?

A E ~ F

B ::enabled

C :enabled

D b and c are correct

✅ :enabled = pseudo-class بـ single colon. ::enabled بـ double colon = WRONG! Pseudo-classes دايماً single colon.

Q9 final-2024

Which of the following selectors selects elements of type E with a particular class value?

B E.class

A E~F

C E#class

D Class(E)

✅ E.class = p.center مثلاً — بيستهدف <p> elements اللي عندها class="center" فقط. E~F = General sibling. E#class = element بـ id.

Q10 final-2024 / final-2025

Which of the following selectors selects an element that has NO children?

B :empty

A :nochild

C :no-child

D None

✅ :empty = بيستهدف elements مفيهاش أي children (حتى text nodes). :nochild و:no-child مش موجودين في CSS.

Q11 final-2024

Which of the following selectors selects all elements of E that have the attribute (attr) that ends with a given (value)?

A E[attr$=value]

B E[attr^=value]

C E[attr~=value]

D None

✅ $= ends with (فلوس في الآخر زي "end"). ^= starts with. ~= word in list. *=contains.

Q12 final-2025

By using this CSS selector p.center {color: blue;} on the final-2025 exam HTML (which has <p class="center"> and <h1 class="center">), the number of elements that will be styled is:

A 1

B 2

C 3

D 0

✅ p.center = فقط <p> elements عندها class="center". الـ <h1 class="center"> مش بيتأثر لأن الـ selector بيحدد p بالتحديد. = 1 element.

Q13 mid-2023

href is a/an ________ while "_blank" is a ________

A value, attribute

B link, value

C value, attribute

D attribute, value

✅ href = attribute (اسم الـ attribute). "_blank" = value (قيمة الـ target attribute). <a href="url" target="_blank">

08

CSS Colors

Named · HEX · RGB · HSL · RGBA · HSLA

🎨 4 طرق لتحديد الـ Color في CSS

نوع الـ Color	مثال	Note
Named	`color: Tomato;`	اسم باللون الإنجليزي
HEX	`color: #FF6347;`	#rrggbb
RGB	`color: rgb(255,99,71);`	0–255 لكل channel
HSL	`color: hsl(9,100%,64%);`	Hue+Saturation+Lightness
RGBA	`color: rgba(255,99,71,0.5);`	+ Opacity (0–1)
HSLA	`color: hsla(9,100%,64%,0.5);`	+ Opacity (0–1)

⚡ من الامتحان:
Valid color: #000000 (6 digits hex) ✓
Invalid: #00000000 (8 digits) ✗
color: red = color: #ff0000 — نفس الشيء!

#ff6347
Tomato

#1e90ff
DodgerBlue

#ee82ee
Violet

#ff0000
Red

#00ff00
Lime

#0000ff
Blue

#000000
Black

#ffffff
White

🔴🟢🔵 RGB Colors

RGB — 0 to 255

rgb(255, 0,   0)   /* Red   🔴 */
rgb(0,   128, 0)   /* Green 🟢 */
rgb(0,   0,   255) /* Blue  🔵 */
rgb(0,   0,   0)   /* Black ⚫ */
rgb(255, 255, 255) /* White ⚪ */
rgb(128, 128, 128) /* Gray  🩶 */

💡 RGB Rules:

• كل قيمة من 0 لـ 255
• 0,0,0 = Black (كل الألوان absent)
• 255,255,255 = White (كل الألوان full)
• 128,128,128 = Gray (كل الألوان متساوية)
• RGBA = نفس RGB + alpha (opacity) من 0 لـ 1

#️⃣ HEX Colors — #rrggbb

HEX — 00 to ff

#ff0000  /* Red   */
#00ff00  /* Lime  */
#0000ff  /* Blue  */
#000000  /* Black */
#ffffff  /* White */

/* Shorthand — لو الـ pairs متشابهة: */
#f00  /* = #ff0000 */
#fff  /* = #ffffff */
#000  /* = #000000 */

💡 HEX Rules:

• 6 digits: #rrggbb (الصح)
• #00000000 → WRONG (8 digits)
• #0000000000 → WRONG (10 digits)
• Shorthand: #fff بدل #ffffff
• #ff0000 = red = rgb(255,0,0) = "red" — كلهم نفس اللون!

🌈 HSL Colors — Hue · Saturation · Lightness

HSL — hue(0-360) sat% light%

hsl(0,   100%, 50%) /* Red */
hsl(120, 100%, 50%) /* Lime */
hsl(240, 100%, 50%) /* Blue */
hsl(39,  100%, 50%) /* Orange */
hsl(0,   0%,   50%) /* Gray */
hsl(0,   0%,   0%)  /* Black */
hsl(0,   0%,   100%) /* White */

💡 HSL Reference:

Hue (0–360°):
0 = Red, 120 = Green, 240 = Blue

Saturation (%):
0% = gray, 100% = full color

Lightness (%):
0% = black, 50% = normal, 100% = white

09

CSS Backgrounds & Borders

background-color · background-image · background-attachment · Borders

🖼️ CSS Background Properties

CSS BACKGROUNDS

body {
  /* لون الخلفية */
  background-color: lightblue;

  /* صورة خلفية — بتتكرر by default */
  background-image: url('bg.jpg');

  /* إيه اللي بيحصل لو المسافة خلصت */
  background-repeat: no-repeat;

  /* موقع الصورة */
  background-position: center top;

  /* الصورة ثابتة ولا بتتحرك مع الـ scroll؟ */
  background-attachment: fixed;
}

/* Shorthand */
body {
  background: lightblue url('bg.jpg') no-repeat center;
}

⚡ مهم من final-2025:
background-attachment: fixed = الصورة بتفضل في مكانها حتى لو الصفحة اتـscrolled
background-attachment: scroll = بتتحرك مع الـ scroll

📦 CSS Borders

CSS BORDERS

p {
  border-style: solid;
  border-width: 3px;
  border-color: tomato;
}

/* Shorthand: width style color */
p { border: 3px solid tomato; }

/* Per-side control */
p {
  border-top: 2px dotted blue;
  border-right: 2px solid red;
  border-bottom: 2px dashed green;
  border-left: 2px double violet;
}

💡 Border Styles:
dotted, dashed, solid, double, groove, ridge, none, hidden

10

CSS Margin & Padding — Box Model

Margin (outside) · Padding (inside) · Shorthand

📦 CSS Box Model — الـ Visual

← MARGIN (outside) →

← BORDER →

← PADDING (inside) →

CONTENT

🚨 الفرق الأساسي:
Margin = مسافة من بره العنصر (بين العنصر وجيرانه)
Padding = مسافة من جوا العنصر (بين الـ content والـ border)

💡 من الامتحان:
"generate space around p element content, inside of any defined borders" → CSS Padding

"space between element and its neighboring element" → CSS Margin

📐 CSS Margin

MARGIN

/* Per side */
p {
  margin-top: 100px;
  margin-right: 150px;
  margin-bottom: 100px;
  margin-left: 80px;
}

/* Shorthand: top right bottom left */
p { margin: 100px 150px 100px 80px; }

/* Center horizontally */
div { width: 300px; margin: 0 auto; }

📏 CSS Padding

PADDING

/* Per side */
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

/* Shorthand: top right bottom left */
div { padding: 50px 30px 50px 80px; }

/* Best practice: */
* { box-sizing: border-box; }

🎯

Quiz — CSS Visual Properties

Colors, Backgrounds, Borders, Box Model

Q1 mid-2022

Which of the following is a valid colour code?

A #000000

B #00000000

C #0000000000

D #000000000000

✅ الـ HEX color code بيكون 6 digits فقط (#rrggbb). #000000 = 6 digits ✓. الباقيين كلهم invalid.

Q2 mid-2022

Which of the following is used to increase the width WITHIN an element (between content and border)?

A Cellspacing

B Padding

C Row span

D Margin

✅ Padding = المسافة جوا العنصر (بين الـ content والـ border). Margin = خارج العنصر. Cellspacing = HTML table attribute قديم.

Q3 mid-2023 / final-2025

To generate space around p element content, INSIDE of any defined borders:

A CSS margin

B CSS border

C CSS padding

D CSS Grid

✅ "inside of any defined borders" = Padding. Margin = خارج البorder.

Q4 final-2024

The _______ property is used in the positioning of the background image.

A background-image

B background-position

C padding

D All of the above

✅ background-position = بتحدد موقع الصورة (center, top, left, 50% 50%, إلخ). background-image = بتحدد الصورة نفسها.

Q5 final-2025

The CSS property background-attachment is used to specify whether the image should scroll or be fixed. True or False?

A True

B False

✅ TRUE! background-attachment: fixed = الصورة تفضل ثابتة. background-attachment: scroll = بتتحرك مع الـ scroll.

Q6 final-2024

Which is the correct HTML statement to define the red color of the paragraph text?

A <p style="color: #ff0000;">

B <p style="color: red;">

C Both A and B

D None

✅ #ff0000 و "red" — كلاهما يمثل نفس اللون الأحمر. كلاهما صح!

Q7 final-2025

If an element has margin: 10px; and padding: 20px;, what is the space between the element and its neighboring element?

A 20px

B 10px

C 30px

D 40px

✅ المسافة بين العنصر وجيرانه = Margin = 10px. الـ Padding = المسافة جوا العنصر (بين الـ content والـ border).

Q8 final-2024

Can we use class name with multiple HTML elements?

A Yes

B No

✅ Yes! الـ class ممكن تتستخدم على elements كتير — ده الفرق بينها وبين الـ id اللي لازم يكون unique.

11

Responsive CSS & CSS Grid

Media Queries · Mobile-First · Grid System

📱 Responsive Design — @media Queries

الـ Responsive design بيخلي الموقع يشتغل كويس على أي حجم شاشة — desktop, tablet, mobile.

CSS MEDIA QUERIES — Mobile-First

/* Base styles — for mobile first */
.container { width: 100%; padding: 10px; }

/* Tablet and above */
@media (min-width: 768px) {
  .container { max-width: 720px; margin: 0 auto; }
}

/* Desktop and above */
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

💡 Mobile-First Strategy:
بتكتب الـ styles الأساسية للـ mobile أولاً، وبعدين بـ @media بتضيف styles للـ tablet والـ desktop. ده أفضل للـ performance.

🔲 CSS Grid — نظام المسافات ثنائي الأبعاد

CSS GRID

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* fr = fractional unit */
/* 3 equal columns */

/* Mix with other units: */
grid-template-columns: 60% 1fr 2fr;

💡 Grid Concepts:

Grid Container: display: grid (parent)
Grid Items: كل direct children
fr unit: fractional unit — بيقسم المساحة المتاحة
gap: المسافة بين الـ cells

1fr 2fr 1fr = الـ middle column ضعف الباقيين

Grid vs Flexbox:
Grid = 2D (rows + columns)
Flexbox = 1D (row OR column)

CSS Grid Preview — 60% 1fr 2fr

Block 1 (60%)

Block 2 (1fr)

Block 3 (2fr)

Block 4 (60%)

Block 5 (1fr)

Block 6 (2fr)

12

Modern CSS — Variables & Flexbox

Custom Properties · CSS Variables · Flexbox · Transitions

🔧 CSS Custom Properties (Variables)

CSS VARIABLES

/* Define in :root — global scope */
:root {
  --brand-color: #00AD72;
  --font-size-base: 16px;
  --spacing-md: 1.5rem;
}

/* Use with var() */
h1 { color: var(--brand-color); }
p  { margin-bottom: var(--spacing-md); }

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  :root { --brand-color: #00FF99; }
}

/* Shorter version: */
:root { --primary: #007BC4; --gap: 1rem; }
p     { color: var(--primary); margin: var(--gap); }

💡 فايدة CSS Variables:

• بتعرّف القيمة مرة واحدة وبتستخدمها في أي مكان
• لو غيرت الـ variable، كل حاجة بتستخدمها بتتغير
• مناسبة للـ theming (light/dark mode)
• أسهل من Sass/Less في المشاريع الجديدة

:root = أعلى element في الـ document (زي <html>)

📐 CSS Flexbox

FLEXBOX

.container {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;           /* vertical */
}

/* Transitions */
button {
  transition: background-color 0.3s ease;
}
button:hover { background: navy; }

💡 Grid vs Flexbox:
Use Grid for 2D layouts (rows AND columns at the same time)
Use Flexbox for 1D layouts (either row OR column)

13

CSS Specificity — Why Your Styles Get Overridden!

Specificity Score · !important · Best Practices

⚖️ CSS Specificity — الـ Score System

لما في تعارض بين rules، الـ browser بيحسب "specificity score" ويطبق الـ rule اللي عنده أعلى score.

0-0-1

Element
p{}

0-1-0

Class
.card{}

1-0-0

ID
#hdr{}

∞

Inline
style=""

SPECIFICITY EXAMPLES

p           { color: red; }  /* 0-0-1 LOSES */
.text       { color: blue; } /* 0-1-0 */
#content p  { color: green;} /* 1-0-1 WINS vs above */

/* Inline style ALWAYS wins (except !important) */
<p style="color:pink">

/* !important overrides everything (last resort!) */
p { color: red !important; }

/* Best Practice Order: */
/* Inline > ID > Class > Element */

🚨 CSS Specificity — Common Mistakes:
• استخدم .class للـ styling مش #id (ID specificity عالي جداً وصعب تـoverride)
• ماتعمقش أكتر من 3 levels (div > ul > li > a > span — هيبقى صعب تتحكم فيه)
• !important = آخر حل مش الحل الأول!

🐛 CSS Syntax Errors — اللي بيغلط فيها الكل

COMMON CSS ERRORS

❌ WRONG — Missing colon in declaration
.class { color: blue; font-weight; bold; }
                          ^ هنا missing : 

✅ CORRECT
.class { color: blue; font-weight: bold; }

❌ WRONG — CSS ID starting with digit
#1para { color: red; }

✅ CORRECT
#para1 { color: red; }

💡 Why might CSS not apply?

من الأسباب الشائعة اللي الـ CSS مش بتشتغل:

1. More specific rule overriding it
2. Syntax error (missing : أو ;)
3. CSS file not linked properly
4. Typo in selector name
5. Property not supported in browser

🎯

Quiz — Modern CSS & Specificity

Responsive, Grid, Variables, Specificity — أسئلة من final-2025

Q1 final-2025

Identify the error in this CSS code: .class { color: blue; font-weight; bold; }

A Missing class name

B Syntax error in property declaration

C Incorrect property value

D No error

✅ الـ error = مفيش : بين font-weight وbold. الصح: font-weight: bold; — Syntax error in property declaration.

Q2 final-2025

Why might the CSS rule .container p {color: green;} not apply to a paragraph inside a div with class "container"?

A The div does not have the "container" class

B The paragraph is not a direct child

C There is a more specific rule overriding this

D The CSS file is not linked properly

✅ .container p هو descendant selector — بيستهدف كل <p> جوا .container على أي مستوى. السبب الأرجح = more specific rule overriding. A مش صح لأن السؤال بيقول "with class container".

Q3 mid-2023

By using this CSS selector p:empty {width: 100px; height: 20px; background: red;}, the number of elements that will be styled from the exam HTML (3 visible p tags, no empty ones) is:

A 3

B 0

C 1

D None — 0 is correct

✅ p:empty بيستهدف <p> elements مفيهاش أي children (حتى text). كل الـ p elements في الـ exam HTML عندها text → 0 elements متاثرة.

Q4 final-2025

In the following Python Statements (about CSS analogy), by using this CSS selector p:empty {color:red;}, how many elements will be styled from the final-2025 exam HTML?

A 0 (None — no empty p elements)

B 3

C 2

D 7

✅ كل الـ p elements في الـ exam HTML عندها text content → مش empty → 0 elements يتستايلوا.

Q5 mid-2022

(Multiple answers): A CSS rule-set consists of ________ and ________

A+B Selector + multiple declarations

B Selector, declaration

C Selector, value

D Selector, property

✅ CSS rule-set = Selector + Declaration Block (اللي ممكن يحتوي على declarations كتير). h1 { color: red; font-size: 2em; } — selector واحد وdeclarations كتير.

Q6 final-2025

By using this CSS selector p:first-child { color: blue;} on the final-2025 exam HTML that starts with <h2>, how many elements will be styled?

A 5

B 1 (the p inside div is first-child of div)

C 6

D None of the previous

✅ في الـ final-2025 HTML: <div><p>Paragraph 1</p>... — الـ p الأولاني جوا الـ div هو first-child لـ div. = 1 element. أما في body، أول child = h2 مش p.

📋

CSS Cheat Sheet — ملخص نهائي شامل

احفظ الصفحة دي قبل الامتحان!

🎨 CSS Basics

What is CSS

Cascading Style Sheets — بتتحكم في colors, fonts, layouts, spacing بتاعة HTML elements

CSS Rule Anatomy

selector { property: value; } — الـ "property: value" اسمه Declaration

Inline CSS

<p style="color:red;"> — أعلى priority

Internal CSS

External CSS

Browser Default

أدنى priority — بيتطبق لو مفيش CSS

Priority Order

Inline > Internal > External > Browser Default

CSS Comments

/* comment */ — مفيش // في CSS!

External file rules

مش المفروض يحتوي على HTML tags — CSS فقط!

🎯 CSS Selectors — Simple

p { }

Element selector — كل <p> elements

.center { }

Class selector — كل elements بـ class="center"

#para1 { }

ID selector — element واحد بـ id="para1"

* { }

Universal selector — كل الـ elements

h1, h2, p { }

Grouping selector — group selectors بفاصلة

p.center { }

E.class — بس <p> عندها class="center"

🔗 CSS Combinators — الأهم في الامتحانات!

div p { }

Descendant (space) — كل <p> جوا <div> بأي مستوى

div > p { }

Child (>) — فقط direct children. P3 جوا section ✗

div + p { }

Adjacent (+) — الـ <p> الأولانية immediately بعد div. = 1

div ~ p { }

General Sibling (~) — كل <p> siblings بعد div. قبل div ✗

من الامتحان (exam HTML)

div>p = 2 | div~p = 2 | div+p = 1 | div p = 3

🔮 Pseudo-classes

:hover

Mouse over element. Single colon! ::hover = WRONG

:first-child

⚠️ Element لو هو first-child لـ parent بتاعه. p:first-child = 0 لو h2 جاي قبله!

:empty

Element مفيهوش children. :nochild مش موجود!

:enabled / :disabled

Single colon. ::enabled = WRONG

a:link

Unvisited link (لم يزر بعد)

a:visited

Visited link

a:hover

Mouse over link

a:active

Being clicked

✨ Pseudo-elements

::first-line

أول سطر في text block

::first-letter

أول حرف (drop cap)

::before

محتوى قبل الـ element (محتاج content property)

::after

محتوى بعد الـ element

::selection

الـ text اللي المستخدم بيسيلكته

Pseudo-class vs element

Pseudo-class = : (single) — Pseudo-element = :: (double)

🏷️ Attribute Selectors

[attr]

Has attribute (any value)

[attr=val]

Exactly equals val

[attr^=val]

Starts with val (^ = start)

[attr$=val]

Ends with val ($ = end)

[attr*=val]

Contains val anywhere

[target=_blank]

اسمه Attribute Selector (مش anchor selector)

🎨 CSS Colors

Named

color: red; — color: Tomato;

HEX

#rrggbb — 6 digits فقط. #ff0000 = red. #fff = #ffffff (shorthand)

RGB

rgb(255,0,0) = red. 0,0,0 = black. 255,255,255 = white

HSL

hsl(0,100%,50%) = red. Hue: 0=Red, 120=Green, 240=Blue

RGBA / HSLA

+ alpha (opacity) 0–1

color:red = color:#ff0000

نفس الشيء! كلاهما صح في الامتحان

Valid HEX

#000000 ✓ — #00000000 ✗ — #0000000000 ✗

📦 Box Model

Content

النص والصور جوا الـ element

Padding

المسافة INSIDE (بين content والـ border) — "inside of defined borders"

Border

الـ border حول الـ padding والـ content

Margin

المسافة OUTSIDE — بين العنصر وجيرانه

margin: 10px;

المسافة بين العنصر وجيرانه = 10px

background-position

بتحدد موقع الصورة

background-attachment: fixed

الصورة ثابتة حتى لو الصفحة اتـscrolled

🚨 Common Exam Traps — الفخاخ!

::hover

WRONG! يبقى :hover (single colon). :: للـ pseudo-elements مش pseudo-classes

p:first-child

⚠️ فقط لو p هو first-child! لو h2 جاي قبله → 0 elements

div ~ p = 3?

WRONG! = 2. الـ p قبل div مش بيتحسب!

div > p = 3?

WRONG! = 2. P3 جوا section مش direct child

External CSS = highest?

FALSE! Inline = highest priority

::enabled

WRONG! يبقى :enabled (single colon)

#00000000

WRONG HEX! يبقى #000000 (6 digits فقط)

color:red ≠ color:#ff0000

WRONG! هما نفس الشيء — كلاهما أحمر

p:empty = has children?

WRONG! :empty = مفيهوش أي children (حتى text nodes)

ده External CSS — مش Internal. Internal بيبقى <style>

⚡ CSS Specificity Quick Reference

Element (0-0-1)

p { } — أدنى specificity

Class (0-1-0)

.card { } — Medium

ID (1-0-0)

#header { } — High — avoid for styling!

Inline (∞)

style="" — الأعلى (بعده !important)

!important

Overrides everything — آخر حل!

Best Practice

Use .class مش #id — ماتعمقش أكتر من 3 levels

Cascading Style SheetsCSS — المنهج كامل

What is CSS & Why Do We Need It?

CSS Syntax & Cascading Order

Quiz — CSS Foundations

Simple CSS Selectors

Combinator Selectors — النوع الأصعب!

CSS Pseudo-classes

CSS Pseudo-elements

CSS Attribute Selectors

Quiz — CSS Selectors

CSS Colors

CSS Backgrounds & Borders

CSS Margin & Padding — Box Model

Quiz — CSS Visual Properties

Responsive CSS & CSS Grid

Modern CSS — Variables & Flexbox

CSS Specificity — Why Your Styles Get Overridden!

Quiz — Modern CSS & Specificity

CSS Cheat Sheet — ملخص نهائي شامل

🎨 CSS Basics

🎯 CSS Selectors — Simple

🔗 CSS Combinators — الأهم في الامتحانات!

🔮 Pseudo-classes

✨ Pseudo-elements

🏷️ Attribute Selectors

🎨 CSS Colors

📦 Box Model

🚨 Common Exam Traps — الفخاخ!

⚡ CSS Specificity Quick Reference

Cascading Style Sheets
CSS — المنهج كامل