element (or paragraph) in the document and color it blue, regardless of their position in the document tree. 11 -------- Page 15 (Lecture #10-15.jpg) --------- CSS - Cascading Style Sheets CSS SELECTORS 3. Id Selectors • The id selector is used to define style rules for a single or unique element. • The id selector is defined with a hash sign (#) immediately followed by the id value. #error { color: red; } • This style rule renders the text of an element in red, whose id attribute is set to error. 4. Class Selectors • The class selectors can be used to select any HTML element that has a class attribute. All the elements having that class will be formatted according to the defined rule. • The class selector is defined with a period sign (.) immediately followed by the class value. .blue { color: blue; } • The above style rules renders the text in blue of every element in the document that has class attribute set to blue. p.blue { color: blue; } • The style rule inside the selector p.blue renders the text in blue of only those
elements that has class attribute set to blue, and has no effect on other paragraphs. -------- Page 16 (Lecture #10-16.jpg) --------- CSS - Cascading Style Sheets CSS SELECTORS 5. Grouping Selectors • Often several selectors in a style sheet share the same style rules declarations. You can group them into a comma-separated list to minimize the code in your style sheet. It also prevents you from repeating the same style rules over and over again. h1, h2, h3 { font-weight: normal; } • The same style rule font-weight: normal; is shared by the selectors h1, h2 and h3, so it can be grouped in a comma-separated list. 13 -------- Page 17 (Lecture #10-17.jpg) --------- CSS - Cascading Style Sheets CSS COLOR - The color property defines the text color of an element. - Colors in CSS most often specified in the following formats: • a color keyword - like "red", "green", "blue", "transparent", etc. h1 { color: red; } • a HEX value - like "#ff0000", "#00ff00", etc. p { color: #00ff00; } • an RGB value - like "rgb(255, 0, 0) " h1 { color: rgb(255, 165, 0); } - The color names are case-insensitive. - The color property normally inherits the color value from their parent element, - rgb(255, 255, 255) ----- the color would be white. - rgb(0, 0, 0) ----- the color would be black. 14 -------- Page 18 (Lecture #10-18.jpg) --------- CSS - Cascading Style Sheets CSS BACKGROUND • CSS provide several properties for styling the background of an element. • The background-color property is used to set the background color of an element ( + opacity property). background-color:#CF1A11; • The background-image property set an image as a background of an HTML element. By default browser repeats the background image both horizontally and vertically to fill the entire area of an element. background-image:url(‘image.jpg’); • The background-repeat property allows you to control how a background image is repeated in the background of an element. The background image can be repeated horizontally (x-axis) using repeat-x or vertically (y-axis) using repeat-y preventing the repetition using no-repeat. Space and round are other values to specify repetition. background-repeat:no-repeat; background-repeat:repeat; background-repeat:repeat-x; background-repeat:repeat-y; 15 -------- Page 19 (Lecture #10-19.jpg) --------- CSS - Cascading Style Sheets CSS BACKGROUND • The background-position property is used to specify the position of the background image. background-position:center center; background-position:center top; background-position:center bottom; background-position:left top; background-position:left center; background-position:left bottom; background-position:right top; background-position:right center; background-position:right bottom; top left top center top right center left center center center right bottom left bottom center bottom right • The background-clip property defines how far the background (color or image) should extend within an element. It has the values: border-box, padding-box or content-box. • The background-origin property specifies the origin position (the background positioning area) of a background image. It has the same values of the clip property. 16 -------- Page 20 (Lecture #10-20.jpg) --------- CSS - Cascading Style Sheets CSS BACKGROUND • The background-size property Specifies the size of the background image(s). It has four values: auto (original size), cover (resize to cover the container), contain (fully visible), length (width and height) or percentage (% of the parent). div { background-size: cover; /* default value: auto */ background-size: contain; } background-size: auto; 50% 100%; cover; contain; -------- Page 21 (Lecture #10-21.jpg) --------- CSS - Cascading Style Sheets CSS BACKGROUND • The background-shorthand property to specify all the background properties in one single property. When using the shorthand property the order of the property values is: background-color, background-image, background-repeat, background-attachment then background-position. • The background-attachment property specifies whether the background image should scroll or be fixed. div { background-attachment: fixed; /* default value: scroll */ } 18 -------- Page 22 (Lecture #10-22.jpg) --------- CSS - Cascading Style Sheets CSS BACKGROUND NOTES • By default, a background-image is placed at the top-left corner of an element. Other values such as Left top, right center and center bottom. If you only specify one keyword, the other value will be “center“. The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value when using percentage is: 0% 0% • If two values are specified for the background-position property, the first value represents the horizontal position, and the second represents the vertical position. If only one value is specified, the second value is assumed to be center. • It does not matter if one of the property values is missing in the background shorthand, as long as the other ones are in this order. 19 -------- Page 23 (Lecture #10-23.jpg) --------- Example 1 : INTERNAL STYLE SHEETS - Class Selectors - Element Type Selectors
العنصر الأول سيبدو بخلفية سوداء ولون نص أبيض
العنصر الثاني سيبدو بخلفية صورية ولونها
العنصر الثاني سيبدو بخلفية صورية ولونها
المساحة الكافية لعرض صورة الخلفية
العنصر الأول سيبدو بخلفية سوداء، ولون نص أبيض
-------- Page 25 (Lecture #10-25.jpg) --------- ( program#49.html ) عملي صفحة اختبار لخصائص الخلف العنصر الاول سندر بخلفية سوداء وبلون نص أبيض العنصر الثاني سندر بخلفية صورة ولونها العنصر الثاني سندر بخلفية صورة ولونها المساحة الكافية لعرض صورة الخلفية 22 -------- Page 26 (Lecture #10-26.jpg) --------- Example 2 : INLINE STYLESThis is a paragraph.
12 This is a paragraph. 13
14 15This is a paragraph.
26 -------- Page 30 (Lecture #10-30.jpg) --------- ( program#51.html ) عملي EXPLORER HTML LANGUAGE program#38.html program#39.html program#40.html program#41.html program#42.html program#43.html program#44.html program#45.html program#46.html program#47.html program#48.html program#49.html program#50.html program#51.html OUTLINE TIMELINE program#51.html html > body > p#test2This is a paragraph.
Ln 19, Col 16 Spaces: 4 UTF-8 CRLF HTML 27 -------- Page 31 (Lecture #10-31.jpg) --------- ( program#51.html ) عملي This is a heading This is a paragraph. -------- Page 32 (Lecture #10-32.jpg) --------- Example 4 : EXTERNAL STYLE SHEETSI ♥ CSS
Style.css h1 { color: green; text-decoration: underline; } p { font-size: 25px; font-family: 'Trebuchet MS', sans-serif; } -------- Page 33 (Lecture #10-33.jpg) --------- ( program#52.html ) عملي EXPLORER HTML LANGUAGE program#39.html program#40.html program#41.html program#42.html program#43.html program#44.html program#45.html program#46.html program#47.html program#48.html program#49.html program#50.html program#51.html program#52.html style.css HTML language program#52.html style.css program#52.html > html > body 1 2 3I ♥ CSS
10 11 OUTLINE TIMELINE Ln 8, Col 1 Spaces: 4 UTF-8 CRLF HTML 30 -------- Page 34 (Lecture #10-34.jpg) --------- ( style.css ) عملي EXPLORER HTML LANGUAGE program#39.html program#40.html program#41.html program#42.html program#43.html program#44.html program#45.html program#46.html program#47.html program#48.html program#49.html program#50.html program#51.html program#52.html style.css program#52.html x style.css x style.css > h1 h1 { color: green; text-decoration: underline; } p { font-size: 25px; font-family: 'Trebuchet MS', sans-serif; } OUTLINE TIMELINE Ln 1, Col 1 (142 selected) Spaces: 4 UTF-8 CRLF CSS -------- Page 35 (Lecture #10-35.jpg) --------- ( program#52.html ) عملي EXTERNAL STYLE SHEETS Hello world! I ♥ CSS -------- Page 36 (Lecture #10-36.jpg) --------- Example 5 : INTERNAL STYLE SHEETSI ♥ CSS
33 -------- Page 37 (Lecture #10-37.jpg) --------- ( program#53.html ) عملي EXPLORER HTML LANGUAGE program#41.html program#42.html program#43.html program#44.html program#45.html program#46.html program#47.html program#48.html program#49.html program#50.html program#51.html program#52.html program#53.html style.css OUTLINE TIMELINE program#53.html program#53.html html head style 1 2 3I ♥ CSS
20 21 Ln 5, Col 22 Spaces: 4 UTF-8 CRLF HTML 34 -------- Page 38 (Lecture #10-38.jpg) --------- ( program#53.html ) عملي INTERNAL STYLE SHEETS Hello world! I ♥ CSS 35 -------- Page 39 (Lecture #10-39.jpg) --------- Thank you