CSS for Styling

Cascading Style Sheets (CSS)

• Describes the appearance, layout, and presentation of information on a web page ‫ • يصف مظهر المعلومات وتخطيطها وتقديمها‬:Commented [s1]
‫على صفحة الويب‬
- HTML describes the content of the page

• Describes how information is to be displayed, not what is being displayed ‫ وليس ما‬، ‫ • يصف كيفية عرض المعلومات‬:Commented [s2]
‫يتم عرضه‬
• Can be embedded in an HTML document or placed into a separate .css file ‫ أو وضعها‬HTML ‫ • يمكن تضمينها في مستند‬:Commented [s3]
‫ منفصل‬css. ‫في ملف‬
Basic CSS rule syntax

• A CSS file consists of one or more rules ‫ من قاعدة واحدة أو أكثر‬CSS ‫ • يتكون ملف‬:Commented [s4]

• Each rule starts with a selector ‫ • كل قاعدة تبدأ بمحدد‬:Commented [s5]

• A selector specifies an HTML element(s) and then applies style properties to them ‫ ثم‬HTML )‫ • يحدد المحدد عنصر (عناصر‬:Commented [s6]
‫يطبق خصائص النمط عليها‬
- a selector of * selects all elements
Attaching a CSS file <link>

• A page can link to multiple style sheet files ‫ • يمكن أن ترتبط الصفحة بملفات متعددة لورقة‬:Commented [s7]
‫األنماط‬
- In case of a conflict (two sheets define a style for the same HTML element), the properties of the
latter sheets will be used ً ‫ في حالة وجود تعارض (تحدد ورقتان نم‬- :Commented [s8]
‫طا‬
‫ سيتم استخدام خصائص األوراق األخيرة‬، )HTML ‫لنفس عنصر‬
Embedding style sheets: <style>
• CSS code can be embedded within the head of an HTML page
• Bad style and should be avoided
Inline styles: the style attribute
• Higher precedence than embedded or linked styles
• Used for one-time overrides and styling a particular element
• Bad style and should be avoided
CSS properties for colors
‫ داخل رأس صفحة‬CSS ‫ • يمكن تضمين كود‬:Commented [s9]
HTML
‫ • أسلوب سيء ويجب تجنبه‬:Commented [s10]
‫ • أسبقية أعلى من األنماط المضمنة أو‬:Commented [s11]
‫المرتبطة‬
‫ • تستخدم لمرة واحدة للتخطي وتصميم‬:Commented [s12]
‫عنصر معين‬
‫ • أسلوب سيء ويجب تجنبه‬:Commented [s13]
Specifying colors

• color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white (white), yellow ، ‫ أزرق‬، ‫ أسود‬، ‫ أكوا‬:‫ • أسماء األلوان‬:Commented [s14]
، ‫ زيتوني‬، ‫ بحري‬، ‫ كستنائي‬، ‫ ليموني‬، ‫ أخضر‬، ‫ رمادي‬، ‫فوشيا‬
• RGB codes: red, green, and blue values from O (none) to 255 (full) ‫ أصفر‬، )‫ أبيض (أبيض‬، ‫ أزرق مخضر‬، ‫ فضي‬، ‫ أحمر‬، ‫أرجواني‬
‫ قيم حمراء وخضراء وزرقاء‬:RGB ‫ • رموز‬:Commented [s15]
• hex codes: RGB values in base-16 from OO (0, none) to FF (255, full) )‫ (ممتلئ‬255 ‫ (بال) إلى‬O ‫من‬
16 ‫ في األساس‬RGB ‫ قيم‬:‫ • الرموز السداسية‬:Commented [s16]
)‫ ممتلئ‬، 255( FF ‫ ال شيء) إلى‬، 0( OO ‫من‬

Grouping styles

• A style can select multiple elements separated by commas ‫ • يمكن للنمط تحديد عدة عناصر مفصولة‬:Commented [s17]
‫بفواصل‬
• The individual elements can also have their own styles ‫ • يمكن أن يكون للعناصر الفردية أيضًا‬:Commented [s18]
‫أنماطها الخاصة‬
CSS comments /*...*/

• CSS (like HTML) is usually not commented as rigorously as programming languages such
as Java
• The // single-line comment style is NOT supported in CSS
• The <!-- ... --> HTML comment style is also NOT supported in CSS
)HTML ‫ (مثل‬CSS ‫ • ال يتم عادة ً التعليق على‬:Commented [s19]
Java ‫بشكل صارم مثل لغات البرمجة مثل‬
‫ نمط التعليق أحادي السطر في‬// ‫ • ال يتم دعم‬:Commented [s20]
CSS
‫ غير‬HTML >- ... - !< ‫ • نمط التعليق‬:Commented [s21]
CSS ‫مدعوم أيضًا في‬

CSS properties for fonts

Complete list of font properties “W3Schools”

font-family

• Enclose multi-word font names in quotes ‫ • إحاطة أسماء الخطوط متعددة الكلمات بين‬:Commented [s22]
‫عالمتي اقتباس‬
More about font-family
• We can specify multiple fonts from highest to lowest priority
• Generic font names:
- serif, sans-serif, cursive, FANTASY, monospace
• If the first font is not found on the user's computer, the next is tried
• Placing a generic font name at the end of your font-family value ensures that every
computer will use a valid font
font-size
• units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
• percentage font sizes, e.g.: 90%, 120%
- pt specifies the number of points, where a point is 1/72 of an inch onscreen
- px specifies the number of pixels on the screen
font-weight, font-style
• Either of the above can be set to normal to turn them off (e.g. headings)
‫ • يمكننا تحديد خطوط متعددة من أعلى إلى‬:Commented [s23]
‫أدنى أولوية‬
‫ • إذا لم يتم العثور على الخط األول على‬:Commented [s24]
‫ تتم تجربة الخط التالي‬، ‫كمبيوتر المستخدم‬
‫ • يضمن وضع اسم خط عام في نهاية قيمة‬:Commented [s25]
ً ‫مجموعة الخطوط أن يستخدم كل جهاز كمبيوتر خ‬
‫طا صالحًا‬
‫ على سبيل‬، ‫ • أحجام الخطوط بالنسبة المئوية‬:Commented [s26]
٪120 ، ٪90 :‫المثال‬
‫ حيث تكون النقطة‬، ‫ عدد النقاط‬pt ‫ يحدد‬:Commented [s27]
‫ من البوصة على الشاشة‬72/1
‫ عدد البكسل على الشاشة‬px ‫ يحدد‬:Commented [s28]
‫ • يمكن ضبط أي مما سبق على الوضع‬:Commented [s29]
)‫ العناوين‬، ‫العادي إليقاف تشغيلهما (على سبيل المثال‬
CSS properties for text

Complete list of text properties (W3schools)

text-align

• text-align can be left, right, center, or justify ‫ • يمكن محاذاة النص إلى اليسار أو اليمين أو‬:Commented [s30]
‫الوسط أو ضبط‬

text-decoration

• can also be overline, line-through, blink, or none

• effects can be combined:
text-decoration: overline underline.
The list-style-type property

• Possible values:
i. none: No marker
ii, disc (default), circle, square
ili, Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. Lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. Lower alpha: a, b, c, d, e, etc.
viii. upper alpha: A, B, C, D, E, etc.
x. lower-Greek: alpha, beta, gamma, etc.
others: Hebrew, Armenian, Georgian, cik-ideographic, hiragana...

Body styles

• Applies a style to the entire body of your page ‫ • تطبيق نمط على النص األساسي لصفحتك‬:Commented [s31]
‫بالكامل‬
• Saves you from manually applying a style to each element ‫ • يحميك من تطبيق نمط يدويًا على كل‬:Commented [s32]
‫عنصر‬

Inheriting styles

• when multiple styles apply to an element, they are inherited ‫ • عندما يتم تطبيق أنماط متعددة على عنصر‬:Commented [s33]
‫ فإنها موروثة‬،
• a more tightly matching rule can override a more general inherited rule ‫ • يمكن أن تتجاوز قاعدة المطابقة األكثر‬:Commented [s34]
‫إحكا ًما قاعدة موروثة أكثر عمومية‬
Styles that conflict

• when two styles set conflicting values for the same property, the latter style takes
precedence ‫ • عندما يعين نمطين قي ًما متعارضة لنفس‬:Commented [s35]
‫ يكون للنمط األخير األسبقية‬، ‫الخاصية‬

CSS properties for backgrounds

background-image

• background image/color fills the element's content area ‫ لون يمأل منطقة محتوى‬/ ‫ • صورة الخلفية‬:Commented [s36]
‫العنصر‬
background-repeat
• can be repeat (default), repeat-x, repeat-y, or no-repeat
background-position
• value consists of two tokens, each of which can be top, left, right, bottom, center, a
percentage, or a length value in px, pt, etc.
• value can be negative to shift left/up by a given amount
، x ‫ تكرار‬، )‫ • يمكن التكرار (افتراضي‬:Commented [s37]
‫ أو عدم التكرار‬، y ‫تكرار‬
‫ يمكن أن‬، ‫ • تتكون القيمة من رمزين مميزين‬:Commented [s38]
‫ أو‬، ‫ أو مركز‬، ‫ أو أسفل‬، ‫ أو يمين‬، ‫ أو يسار‬، ‫يكون كل منهما أعلى‬
.‫ وما إلى ذلك‬، ‫ أو نقطة‬، ‫ أو قيمة طول بوحدة بكسل‬، ‫نسبة مئوية‬
‫ • يمكن أن تكون القيمة سالبة لإلزاحة لليسار‬:Commented [s39]
‫ ألعلى بمقدار معين‬/
Aside: Favorites icon (“favicon”}

• The link tag, placed in the HTML page's head section, can specify an icon ‫ • يمكن أن تحدد عالمة االرتباط الموضوعة‬:Commented [s40]
‫ رمزً ا‬HTML ‫في قسم رأس صفحة‬
- this icon will be placed in the browser title bar and bookmark /favorite ‫ سيتم وضع هذا الرمز في شريط عنوان‬- :Commented [s41]
‫ المفضلة‬/ ‫المتصفح واإلشارة المرجعية‬