More CSS

<link href = "f7/ename" type = "text/css" rel = "stylesheet"/>

HTML id attribute

• A unique ID for an element on a page ‫ • معرّ ف فريد لعنصر في الصفحة‬:Commented [s1]

• Each ID must be unique; can only be used once on the page ‫ • يجب أن يكون كل معرّ ف فريدًا ؛ يمكن‬:Commented [s2]
‫استخدامها مرة واحدة فقط في الصفحة‬

Linking to sections of a web page

• Link target can include an ID at the end, preceded by a # ‫ • يمكن أن يتضمن هدف االرتباط معرّ فًا في‬:Commented [s3]
# ‫ مسبوقًا بعالمة‬، ‫النهاية‬
• Browser will load that page and scroll to the element with the given ID ‫ • سيقوم المستعرض بتحميل تلك الصفحة‬:Commented [s4]
‫والتمرير إلى العنصر بالمعرف المحدد‬
CSS ID selectors
• Applies style only to the paragraph that has the ID of mission
HTML class attribute
• A way to group some elements and give a style to only that group
• Unlike an id, a class can be reused as much as you like on the page
CSS class selectors
‫ • يطبق النمط فقط على الفقرة التي تحتوي‬:Commented [s5]
‫على معرف المهمة‬
‫ • طريقة لتجميع بعض العناصر وإعطاء نمط‬:Commented [s6]
‫لتلك المجموعة فقط‬
‫ يمكن إعادة استخدام‬، ‫ • على عكس المعرف‬:Commented [s7]
‫فئة بقدر ما تريد على الصفحة‬
CSS ID selectors

Styling Page Sections

Why do we need page sections?
• Style individual elements, groups of elements, sections of text or the page ‫ ومجموعات العناصر‬، ‫ • نمط العناصر الفردية‬:Commented [s8]
‫ وأقسام النص أو الصفحة‬،
• Create complex page layouts ‫ • إنشاء تخطيطات صفحة معقدة‬:Commented [s9]
<div> tag
• The <div> tag defines a division or a section in an HTML document. ‫> قسمة أو قس ًما في‬div< ‫ • تحدد العالمة‬:Commented [s10]
.HTML ‫مستند‬
• The <div> tag is used as a container for HTML elements - which is then styled with CSS
or manipulated with JavaScript. ‫> كحاوية لعناصر‬div< ‫ • تُستخدم عالمة‬:Commented [s11]
‫ أو معالجتها‬CSS ‫ والتي يتم تنسيقها بعد ذلك باستخدام‬- HTML
• The <div> tag is easily styled by using the class or id attribute. .JavaScript ‫باستخدام‬
‫> بسهولة باستخدام‬div< ‫ • يتم تصميم عالمة‬:Commented [s12]
• Any sort of content can be put inside the <div> tag! .id ‫ أو‬class ‫سمة‬
‫ • يمكن وضع أي نوع من المحتوى داخل‬:Commented [s13]
!>div< ‫عالمة‬

Sections of a page <div>

• Tag used to indicate a logical section or area of a page ‫ • العالمة المستخدمة لإلشارة إلى قسم منطقي‬:Commented [s14]
‫أو منطقة من الصفحة‬
• Has no appearance by default, but you can apply styles to it ‫ ولكن يمكنك‬، ‫ • ليس له مظهر افتراضيًا‬:Commented [s15]
‫تطبيق األنماط عليه‬

Inline Sections <span>

Coding Horror! Coding Horror!

See our spectacular deal on Droids!
We'll beat any advertised price!
• has no onscreen appearance, but you can apply a style or ID to it, which will be applied ‫ ولكن يمكنك‬، ‫ • ليس له مظهر على الشاشة‬:Commented [s16]
to the text inside the span ‫ والذي سيتم تطبيقه على النص داخل‬، ‫تطبيق نمط أو معرف عليه‬
‫النطاق‬
CSS context selectors

• applies the given properties to selector2 only if it is inside a selector1 on the page selector2 ‫ • يطبق الخصائص المحددة على‬:Commented [s17]
‫ على الصفحة‬selector1 ‫فقط إذا كان داخل‬

• applies the given properties to selector2 only if it is directly inside a selector1 on the
page selector2 ‫ • يطبق الخصائص المحددة على‬:Commented [s18]
‫ مباشرة على الصفحة‬selector1 ‫فقط إذا كان داخل‬
Context selector example

CSS properties for borders

• Thickness: px, pt, em, or thin, medium, thick

• Style: none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid ، ‫ متقطع‬، ‫ منقط‬، ‫ مخفي‬، ‫ ال شيء‬:‫ • النمط‬:Commented [s19]
‫ صلبة‬، ‫ حافة‬، ‫ بداية‬، ‫ داخلي‬، ‫ أخدود‬، ‫مزدوج‬
• color
More border properties

Another border example

• each side's border properties can be set individually
• if you omit some properties, they receive default
CSS properties for padding
‫ • يمكن تعيين خصائص حدود كل جانب على‬:Commented [s20]
‫حدة‬
‫ فإنها تتلقى‬، ‫ • إذا حذفت بعض الخصائص‬:Commented [s21]
‫بشكل افتراضي‬
Padding example 1

Padding example 2

• each side's padding can be set individually ‫ • يمكن ضبط حشوة كل جانب على حدة‬:Commented [s22]

• notice that padding shares the background color of the element ‫ • الحظ أن الحشو يشترك في لون خلفية‬:Commented [s23]
‫العنصر‬
CSS properties for margins
Margin Example 1

• notice that margins are always transparent ‫ • الحظ أن الهوامش شفافة دائ ًما‬:Commented [s24]

Margin Example 2

• each side's margin can be set individually ‫ • يمكن تحديد هامش كل جانب على حدة‬:Commented [s25]

CSS properties for dimensions

Centering a block element: auto margins

• works best if the width is set (otherwise, may occupy the entire width of the page) ‫ • يعمل بشكل أفضل إذا تم تعيين العرض‬:Commented [s26]
)‫(وإال فقد يشغل عرض الصفحة بالكامل‬
• to center inline elements within a block element, use text-align: center; ‫ • لتوسيط العناصر المضمنة داخل عنصر‬:Commented [s27]
‫ مركز ؛‬:‫ استخدم محاذاة النص‬، ‫كتلة‬