‫ور‬ ‫م ور‬ ‫م‬ ‫ا‬

‫ا وم ا دم م‬ ‫ل ن ود‬ ‫ل تا ر‬ ‫! ھدف‬
‫ ءت ! ره‬، css ! ‫" ا &ر‬ ‫ ل‬# ‫ھذا ا ف وھو وى‬
‫طو‬ ‫ا د ا &ر وا ث‬ ‫ا‬ ‫ھذا ا ب ن " ا ا‬
- ‫ل ا &ر طر‬ ‫ ا وم ھذا ا ب وف وى‬، ‫ا دھ‬
‫ ت ا و ب‬/& ‫ق‬ ‫ ھ‬css ‫ رف ھ‬. ‫و ن‬. ‫ط‬
‫دوات‬.‫ رھ ن ا‬3‫ ت و ق ا &وص وا ذاة و‬/ 1 ‫ ون وا‬.‫ا‬
: ‫ون‬ & 1 ‫ ل ل‬#‫ و‬. ‫ ت ا و ب‬/& ‫ا‬ ‫ا‬

‫وظ‬ ‫و‬ ‫ا وم ھو ر‬ ‫ر ھد‬ ‫رة ن دد ن ا‬ ‫ا‬

. ‫ل‬
:‫ر‬ ‫ا‬ !" ‫وى‬ ‫وف‬% " ‫ا !دول ا‬

element ‫ر‬ ‫ا‬ function ‫ا وظ‬ syntax ‫طر & ا‬

Background-color ‫( ون ا‬ Body{background-color:black;}

Background-image ‫ورة " ا‬ ( Body{background-iamge:url(1.png);}

Background-repeat :- "%‫ورة ا &" او رأ‬ ‫رار ا‬

Repeat-x "& *‫رار ا‬ Body{background-repeat:repeat-x;}

Repeat-y "%‫رار ا رأ‬ Body{background-repeat:repeat-y;}

By: eng. Abdelhakeem Qassem

 No-repeat ‫ورة‬ ‫ن م رار ا‬ Body{background-repeat:no-repeat;}

Background-attachment:- ‫ و‬+ ‫وى ام‬ ‫ا‬ ‫ركا‬

Scroll ‫وى‬ ‫ا‬ ‫رك ا‬ Body{background-attachment:scroll;}

Fixed + ‫ا‬ Body{background-attachment:fixed;}

Local ‫رھ‬ ‫وي‬ ‫رك ا‬ Body{background-attachment:local;}

Background-position:- ‫نا‬ ‫دد‬

Left top ‫ر‬% ‫ا "ا‬ ‫( ا‬ Body{background-position:left top;}

Left center ‫ ر‬% ‫ط ا‬%‫او‬ ‫( ا‬ Body{background-position:left center;}

Left bottom ‫ ر‬% ‫ ل ا‬%‫ا‬ ‫( ا‬ Body{background-position:left bottom;}

Right top ‫ن‬ ‫ا "ا‬ ‫( ا‬ Body{background-position:right top;}

Right center ‫ن‬ ‫ط ا‬%‫او‬ ‫( ا‬ Body{background-position:right center;}

Right bottom ‫ن‬ ‫ ل ا‬%‫ا‬ ‫( ا‬ Body{background-position:right bottom;}

Center top ‫ط‬%‫ا " ا و‬ ‫( ا‬ Body{background-position:center top;}

Center center ‫ط‬%‫ط ا و‬%‫او‬ ‫( ا‬ Body{background-position:center center;}

Center bottom ‫ط‬%‫ ل ا و‬%‫ا‬ ‫( ا‬ Body{background-position:center

By: eng. Abdelhakeem Qassem

 bottom;}

X% y% ‫ا‬ (‫و‬ ‫و‬. ‫ ا‬% ‫د د ا‬ Body{background-posi'on:50% 50%;}

"%‫ن ا* &" وا رأ‬

X px y px px ‫ن طر ق‬ ‫ا‬ (‫د د و‬ Body{background-posi'on:50 px 50 px;}

Text:- ‫وص‬ ‫قا‬% " ‫م‬ ‫ا‬

color ‫ر ون ا ط‬ P{color:#ffff;}

Direction:- ‫ددا!ها‬

ltr ‫ن‬ ‫را"ا‬% ‫نا‬ ‫ا!ها‬ Body{direction:ltr;}

rtl ‫ر‬% ‫نا"ا‬ ‫نا‬ ‫ا!ها‬ Body{direction:rtl;}

Letter-spacing:- ‫ ت ن ا روف‬3‫ز دة او & ل ا را‬

normal ‫ ت ن ا روف‬3‫* و!د را‬ H1{le1er-spacing:normal;}

length ‫ ب او ا و!ب‬% ‫ا راغ‬ 7‫دد‬ H1{le1er-spacing:-3px;}

Line-height:- ‫د د ار ع ا ط‬

normal (‫ا* را‬ & ‫دى ا‬ ‫ا*ر ع‬ H1{le1er-height:normal;}

number ‫م * !م ا ط ا*ن‬7‫ا*ر ع =ا ر‬ 7 H1{le1er-height:0.5;}

By: eng. Abdelhakeem Qassem

 lenght ‫ م‬7‫ دام ار‬%9 ‫( ا*ر ع‬ H1{le1er-height:30px;}

% ‫د د ا*ر ع‬ ‫و‬. ‫ ا‬% ‫ دم ا‬%‫ا‬ H1{le1er-height:10%;}

Text-align:- &‫نا صا‬ ‫دد‬

left ‫ر‬% ‫ون ا ص‬ H1{text-align:left;}

right ‫ن‬ ‫ون ا ص‬ H1{text-align:right;}

center ‫ط‬%‫و‬ ‫ون ا ص‬ H1{text-align:center;}

justify ‫ث ون ل‬ ‫طور‬% ‫دد ا‬ H1{text-align:justify;}

‫ وى‬% ‫رض‬

Text-decoration:- ‫ددا زنا (فا"ا ص‬

none ‫سھ ك ز ن (فا"ا ص‬ H1{text-decoration:none;}

underline ‫تا ص‬ ‫ط‬ (‫ا‬ H1{text-decoration:underline;}

overline ‫ا ط وق ا ص‬ H1{text-decoration:overline;}

linethrough "‫" طب‬ ‫"ا‬ ‫ا ط‬ H1{text-decoration:linethrough;}

Line-indent:- ‫طر " ا &رة‬% ‫ ل اول‬7 % (‫ا‬

lenght ‫ م‬7‫*ر‬ % ‫ا‬ 7 (‫ا‬ p{line-indent:30px;}

By: eng. Abdelhakeem Qassem

 % ‫و‬. ‫ ا‬% % ‫ا‬ (‫ا‬ p{line-indent:30%;}

Text-shadow:- ‫ظل ص‬ (‫ا‬

none ‫* و!د ظل‬

h-shadow ‫ا ظل * ! ه ا* &"" !ب‬ 7 p{text-shadow:30px 40px;}

"= (‫ا‬

v-shadow ‫"" !ب‬%‫ا ظل * ! ه ا را‬ 7 p{text-shadow:30px 40px;}

"= (‫ا‬

Blur-raduis "‫رى‬ ‫طر ا ظل "ا‬7 p{text-shadow:30px 40px 5px;}

color " ‫رى‬ ‫ون ا ظل " ا‬ p{text-shadow:30px 40px 5px #ffff;}

Text-transform:- ‫رة " ا* ! ز‬ ‫ر ا روف ا‬

none ‫ر‬ * p{text-transformation:none;}

Capitalize ‫رة‬ "‫ا‬ ‫و ل اول رف " ا‬ p{text-transformation:capitalize;}

Uppercase ‫رة‬ "‫ا‬ ‫و ل ا روف‬ p{text-transformation:uppercase;}

lowercase ‫رة‬ "‫ا‬ ‫و ل ا روف‬ p{text-transformation:lowercase;}

Unicode-bidi :- ‫ ب ا ! ه ا روف‬7

By: eng. Abdelhakeem Qassem

 Normal ‫ھو‬ ‫دد‬ ‫&" ا* ! ه ا‬ p{unicode-bidi:normal;}

Bidi-override ‫ب ا* ! ه‬% ‫ ب ا روف‬7 ‫ط ق‬ p{unicode-bidi:bidi-override;}

Vertical-align:- ‫ن‬ ‫ص‬ %‫ذاة ا رأ‬ ‫ا‬

baseline = ‫طر ا‬% ‫ذاة ا‬ ‫ون ا ص‬ p{vetical-align:baseline;}

top ‫ر‬ " ‫ون ھ ا " ن ا‬ p{vetical-align:top;}

‫طر‬%

sub = ‫ ل ا ص و‬%‫ون ا ص ا‬ p{vetical-align:sub;}

super ‫طر‬% ‫ر‬ " ‫ا صا " نا‬ p{vetical-align:super;}

% ‫ن ار ع‬ % ‫او ز ل ا ص‬ ‫ر‬ p{vetical-align: -20%;}

‫ ب او‬% line heigh ‫طر‬% ‫ا‬

‫و!ب‬

lenght ‫طر‬% ‫ ل ا‬%‫ ب ا‬% ‫و‬% ‫ا‬ (‫ا‬ p{vetical-align:-20px;}

‫طر‬% ‫و!ب ا " ا‬ ‫او‬

Text-top " ‫ر‬ " ‫ا‬ ‫و ا " ا ص‬% p{vetical-align:text-top;}

‫طر‬% ‫ا‬

middle % ‫فا‬ " ‫و( ا ص‬ p{vetical-align:middle;}

By: eng. Abdelhakeem Qassem

 Text-bottom ‫طر‬% ‫ ل ا‬%‫ا‬ ‫ ل ا ص‬%‫و ا‬% p{vetical-align:text-bottom;}

White-spacing:- ‫ن‬ ‫ر‬ ‫ا ( ء دا ل‬ % ‫ا‬

normal ‫ل‬ ‫طر !د د ن ا‬% " ‫ا‬ ‫&ل ا‬ p{white-spacing:normal;}

‫طر‬% ‫ا‬

nowrap (‫ ل ا‬7 ‫طر !د د‬% " ‫&ل ا دا ا‬ * p{white-spacing:nowrap;}

% ‫< ا‬/br>

Pre-line ‫د‬ ‫طر !د د‬% " ‫ا‬ ‫&ل ا‬ p{white-spacing:pre-line;}

breaks ‫ ت‬% ‫زم ا* ر و د ا‬

Pre-wrap (‫ر‬ % ‫وف ون ھ ك‬% p{white-spacing:pre-wrap;}

"‫ا‬ ‫ ل ا &رة و &ل ا‬7 @ ‫ا‬

‫زم ا* ر‬ ‫د‬ ‫طر !د د‬%

breaks‫او‬

Word-spacing:- ‫ت‬ ‫نا‬ % ‫ز دة او ا & ص ا‬

normal (‫ا* را‬ &‫ا‬ p{word-spacing:normal;}

lenght ‫ م‬7‫*ر‬ 7 (‫ا‬ p{word-spacing:5px;}

Font:- ‫ص ا ط‬. ‫ن‬

By: eng. Abdelhakeem Qassem

 Font-family geogria A+ ‫طوط‬ . (‫ا‬ p{font-family:georgia;}

‫ث ن ا طوط ھ‬ ‫كا‬

Font-size ‫!م ا ط‬ p{font-size:30px;}

p{font-size:30%;}

Font-style:- ‫طا ط‬

normal ‫ل ا دى‬ ‫@ رض ا‬ ‫ا‬ p{font-style:normal;}

Italic ‫ل‬. ‫ا ط ا‬ p{font-style:italic;}

Font-variant:- small-caps ‫! ل ا طوط‬

normal ‫ا ط ا دى‬ p{font-variant:normal;}

Small-caps small caps ‫! ل ا طوط‬ p{font-variant:small-caps;}

Font-weight:- " ‫وزن ا ط " ر ز ا‬

bold ‫روف‬ ‫& ل ا‬+ ‫ا ط ا‬ p{font-weight:bold;}

value 700 ‫ف وال‬ ‫ا‬400 7 (‫ا‬ p{font-weight:400;} = "light"

‫& ل‬+ ‫ا‬

p{font-weight:700;} = "bold"

Links :- "........، ، ‫ ق ا روا ط " ط‬%

By: eng. Abdelhakeem Qassem

 visited ‫ ق ا روا ط ا " م ز ر‬% A{ color:green;}

a:visited{color:red;}

hover ‫" ا را ط‬ ‫وس‬ ‫وف‬7‫ ق ا و‬% a:hover{color:red;}

active ‫" ا را ط‬ ‫ظ ا( ط‬ ‫ق‬% ‫ا‬ a:active{color:red;}

borders:- ‫ & و ط ق‬% ‫ا دود و‬ (‫ا‬ P{border-top: 5px red dotted;}

5px A+ ! ‫دد‬ ‫ا دود !ب‬

" ‫ د ن ا‬border-top
-: ‫ل ا دود ا‬ ‫م ا د ا‬+ ‫وو‬

‫ ل‬%‫ د ن ا‬border-bottom

‫ل‬ ‫ د ن ا‬border-left

‫ن‬ ‫ د ن ا‬border-right

dotted ................ ‫ل ا دود ا &ط‬ P{border-top: 5px red do1ed;}

dashed ---------------------- ‫ل ا &ط‬ P{border-bo1om: 5px red dashed;}

solid ‫ل ــــــــــــــــــــــــــــــــــــ‬ ‫لا‬ P{border-leE: 5px red solid;}

groove ‫ب ا ون‬% ‫" ا* د‬+A+ ‫ل‬ P{border-right: 5px red groove;}

ridge ‫ب ا ون‬% ‫" ا* د‬+A+ ‫ل‬ P{border-top: 5px red ridge;}

inset ‫ب ا ون‬% ‫" ا* د دا ل‬+A+ ‫ل‬ P{border-leE: 5px red inset;}

By: eng. Abdelhakeem Qassem

 outset ‫ب ا ون‬% ‫" ا* د دا ل‬+A+ ‫ل‬ P{ border-right: 5px red outset; }

Margin:- ‫ن‬ ‫ر ن ا رج ن ا‬ ‫ذاه ا‬

‫ ل‬%*‫ ر او ا* " او ا‬% ‫او ا‬

" *‫ذاة ن ا‬ Margin-top

‫ ل‬%‫ذاة ا‬ Margin-bottom

‫ن‬ ‫ذاة ن‬ Marign-right

‫ ر‬% ‫ذاة‬ Marign-left

auto (‫ا را‬ 7@ ‫( ا‬ P{ margin:auto; }

lenght A+ px ‫ب‬ 7 ( P{ margin-leE:5px; }

% ‫و‬. ‫ ا‬% 7 ( P { margin-right:5%; }

Padding:- ‫ر ن ا دا ل اى ن‬ ‫ذاة‬ ‫ل‬

‫ر‬ ‫ا‬ & " ‫دا ل دود ا‬

‫ن‬ ‫ذاة‬ Padding-right

‫ ر‬% ‫ذاة‬ Padding-left

" ‫ذاة ا‬ Padding-top

‫ ل‬%‫ذاة ا‬ Padding-bottom

lenght px ‫ب‬ 7 ( P{padding-leE:5px;}

By: eng. Abdelhakeem Qassem

 % ‫و‬. ‫ ا‬% 7 ( P{padding-leE:5px;}

Dimentions:- ‫ن‬ ‫ر‬ ‫ م ا د‬7 (‫و‬

height ‫ر‬ ‫طول ا‬ B{ height:10px; }

Max-height ‫ر‬ ‫طول‬ 7 " 7‫ا‬ B{max-height:10px;}

Min-height ‫ر‬ ‫طول‬ 7 ‫ل‬7‫ا‬ B{min-height:10px;}

width ‫ر‬ ‫رض ا‬ B{width:10px;}

Max-width ‫ر‬ ‫ " رض‬7‫ا‬ B{max-width:10px;}

Min-width ‫ر‬ ‫ل رض‬7‫ا‬ B{min-width:10px;}

Display:- ‫ر‬ ‫ م رض ا‬% ‫ن‬ ‫و(@ اذا‬

‫ون‬ (‫و ف م ذ ك وا & م ا* را‬

block ‫ او‬inline

inline ( ‫ر ! ب‬ ‫م رض ا‬ Li{display:inline;}

block ( ‫ت‬ ‫ر‬ ‫م رض ا‬ Li{display: inline;}

none ‫ر‬ ‫ءا‬ * Li{display: none;}

Visibility: hidden; (‫را‬ ‫ءا‬ * Li{visibility: hidden;}

By: eng. Abdelhakeem Qassem

 Position:- ‫ر‬ ‫م " و( ا‬ ‫ا‬

static ‫ن & ا‬ ‫ھو س‬ (‫و‬ Div{position:static;}

relative ‫ر " ا و( ا دى‬ ‫ون ا‬ Div{position:relative;}

absolute ‫دد‬ (‫رب د = و‬79 ‫ق‬ ‫ون‬ Div{position:absolute;}

fixed ‫د‬ " ‫ن‬ ‫ر " سا‬ ‫&" ا‬ Div{position:fixed;}

‫ركا‬

Float:- ‫ن‬ ‫ا"ا‬ ‫ر‬ ‫ما &لا‬ Div{float:left;}

"‫را‬ ‫&ل ا‬ left A+ ‫ا ط وب‬

Div2{float:right;}
‫ن وھ ذا‬ ‫ ا " ا‬right ‫ ر‬% ‫ا‬

Clear:- ‫ر‬ float " ‫م‬ Div2{ float:both; }

Div2{ float:left; }

Div2{ float:right; }

5‫د‬ ‫م‬
-: ‫ب‬ ‫ا وا&ل " ا‬
Abdelhakeem2020@outlook.com
. ☺ ‫! ود‬ ‫در ☺ &د را‬ ‫ر دون ذ ر ا‬ ‫وع ا &ل او ا‬

By: eng. Abdelhakeem Qassem

By: eng. Abdelhakeem Qassem