Chat-ipad

Sleeping

File size: 24,122 Bytes

b5d0134


-------- Page 1 (Lecture #10-01.jpg) ---------
Faculty of Information Technology – Tripoli University

مقدمة في برمجة الإنترنت
Introduction to Internet Programming
[ ITGS226 ]

المحاضرة العاشرة

أستاذة المادة
أ. وفاء حسين المصباحي

HTML5
JS
Cloud
XML
CSS3
flat
PHP
header
.com
footer
.net

2025 ربيع

-------- Page 2 (Lecture #10-02.jpg) ---------
المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الانترنت
Introduction to Internet Programming
المحاضرة العاشرة

CSS - Cascading Style Sheets

1
WHAT IS CSS?

WHAT CAN DO WITH CSS?

INCLUDING CSS

INLINE STYLES

INTERNAL STYLE SHEETS

EXTERNAL STYLE SHEETS

-------- Page 3 (Lecture #10-03.jpg) ---------
CSS SYNTAX

COMMENTS IN CSS

CASE SENSITIVITY IN CSS

CSS SELECTORS

CSS COLOR

CSS BACKGROUND

Examples

-------- Page 4 (Lecture #10-04.jpg) ---------
CSS - Cascading Style Sheets

WHAT IS CSS?

• CSS is the key presentational technology that is used in website design.
• CSS stands for Cascading Style Sheets.
• CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages.
• CSS was designed to enable the separation of presentation and content.
• CSS3 is the latest version of the CSS specification.
• CSS3 adds several new styling features and improvements to enhance the web presentation capabilities.

1

-------- Page 5 (Lecture #10-05.jpg) ---------
CSS - Cascading Style Sheets

WHAT CAN DO WITH CSS?

• Easily apply same style rules on multiple elements.

• Control the presentation of multiple pages of a website with a single style sheet.

• Change the position of an element on a web page without changing the markup.

• Alter the display of existing HTML elements.

• Create animations and transitions effects without using any JavaScript.

• Create print friendly version of your web pages.

2

-------- Page 6 (Lecture #10-06.jpg) ---------
CSS - Cascading Style Sheets

INCLUDING CSS

• CSS can either be attached as a separate document or embedded in the HTML document itself.

• There are three methods of including CSS in an HTML document:

  ○ Inline styles — Using the style attribute in the HTML start tag.

  ○ Embedded styles — Using the <style> element in the head section of a document.

  ○ External style sheets — Using the <link> element, pointing to an external CSS file.

Note:

- The inline styles have the highest priority, and the external style sheets have the lowest.

- Among all the three methods, using external style sheet is the best method for defining and applying styles to the HTML documents

3

-------- Page 7 (Lecture #10-07.jpg) ---------
CSS - Cascading Style Sheets

INLINE STYLES

- Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag.

- It can be attached to an element using the style attribute.

<h1 style="color:red; font-size:30px;">
    This is a heading
</h1>

<p style="color:green; font-size:22px;">
    This is a paragraph.
</p>

<div style="color:blue; font-size:14px;">
    This is some text content.
</div>

- Using the inline styles are generally considered as a bad practice. As it causes the presentation to become mixed with the content of the document; which negates the purpose of using CSS.

4

-------- Page 8 (Lecture #10-08.jpg) ---------
CSS - Cascading Style Sheets

INTERNAL STYLE SHEETS

• Embedded style sheets are defined in the <head> section of an HTML document using the <style> element.

<head>
…………

<title>My HTML Document</title>

<style>
  body { background-color: YellowGreen; }
  p    { color: #fff; }
</style>

…………

</head>

5

-------- Page 9 (Lecture #10-09.jpg) ---------
CSS - Cascading Style Sheets

EXTERNAL STYLE SHEETS

• An external style sheet is ideal when the style is applied to many pages of the website.

• An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site.

• External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file.

• An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section.


<head>
............
    <title>My HTML Document</title>

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

............
</head>

6

-------- Page 10 (Lecture #10-10.jpg) ---------
CSS - Cascading Style Sheets

CSS SYNTAX

• A CSS rule have two main parts, a selector and one or more declarations:

selector {
    property:value;
    property:value;
    property:value;
    …
}

h1 { color: blue; text-align: center; }

• The selector specifies which element or elements in the HTML page the CSS rule applies to.

• The declarations within the block determines how the elements are formatted on a webpage.

• Each declaration consists of a property and a value separated by a colon (:) and ending with a semicolon (;), and the declaration groups are surrounded by curly braces {}.

7

-------- Page 11 (Lecture #10-11.jpg) ---------
CSS - Cascading Style Sheets

CSS SYNTAX

- The property is the style attribute you want to change; they could be font, color, background, etc.

- Each property has a value, for example color property can have value either blue or #0000FF etc.

    h1 {color:blue; text-align:center;}

- h1 is a selector, color and text-align are the CSS properties, and the given blue and center are the corresponding values of these properties.

- A CSS declaration always ends with a semicolon ";", and the declaration groups are always surrounded by the curly brackets "{}".

-------- Page 12 (Lecture #10-12.jpg) ---------
CSS - Cascading Style Sheets

COMMENTS IN CSS

- A CSS comment begins with /*, and ends with */

- Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the CSS.

- Comments are significant to programmers but ignored by browsers.

div {
    background-attachment: fixed;      /* default value: scroll */
}

-------- Page 13 (Lecture #10-13.jpg) ---------
CSS - Cascading Style Sheets

CASE SENSITIVITY IN CSS

• CSS property names and many values are not case-sensitive.

• Whereas, CSS selectors are usually case-sensitive.

• Therefore, to be on safer side, you should assume that all components of CSS rules are case-sensitive.

10

-------- Page 14 (Lecture #10-14.jpg) ---------
CSS - Cascading Style Sheets

CSS SELECTORS

- Selectors are one of the most important aspects of CSS as they allow you to target specific elements on your web page in various ways so that they can be styled.

- Several types of selectors are available in CSS:

1. Universal Selector

• The universal selector, denoted by an asterisk (*), matches every single element on the page.

    * { margin: 0; padding: 0; }

• The style rules inside the * selector will be applied to every element in a document.

• It is recommended not to use the universal selector (*) too often, Use element type or class selector instead.

2. Element Type Selectors

    p { color: blue; }

• The style rules inside the p selector will be applied on every <p> 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 <p> 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

<html lang="en">
    <head>
        <title> صفحة اختبار لخصائص الخلفية </title>
        <meta charset='utf-8'>
        <style type="text/css">
            .firstP{
                background-color:black;
                color:white;
            }
            .secondP{
                background-image:url('myPic.jpg');
                background-repeat:no-repeat;
                background-positive:center center;
            }
            p{direction:rtl;}
        </style>
    </head>
    <body>
        <p class="firstP">
            العنصر الأول سيبدو بخلفية سوداء ولون نص أبيض
        </p>
        <p class="secondP">
            العنصر الثاني سيبدو بخلفية صورية ولونها <br/><br/>
            العنصر الثاني سيبدو بخلفية صورية ولونها <br/><br/>
            <br/>
            المساحة الكافية لعرض صورة الخلفية
        </p>
    </body>
</html>

20

-------- Page 24 (Lecture #10-24.jpg) ---------
( program#49.html ) عملي

EXPLORER
HTML LANGUAGE
program#36.html
program#37.html
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#49.html 1
program#49.html
html
head
style

<html lang="en">
  <head>
    <title> صفحة اختبار لخصائص الخلفية </title>
    <meta charset='utf-8'>
    <style type="text/css">
      .firstP{
        background-color:black;
        color:white;
      }
      .secondP{
        background-image:url('myPic.jpg');
        background-repeat:no-repeat;
        background-position:center center;
      }
      p{direction:rtl;}
    </style>
  </head>
  <body>
    <p class="firstP">
      العنصر الأول سيبدو بخلفية سوداء، ولون نص أبيض
    </p>

-------- Page 25 (Lecture #10-25.jpg) ---------
( program#49.html ) عملي

صفحة اختبار لخصائص الخلف

العنصر الاول سندر بخلفية سوداء وبلون نص أبيض

العنصر الثاني سندر بخلفية صورة ولونها

العنصر الثاني سندر بخلفية صورة ولونها

المساحة الكافية لعرض صورة الخلفية

22

-------- Page 26 (Lecture #10-26.jpg) ---------
Example 2 :  INLINE STYLES

<html lang="en">
  <head>
    <title>  صفحة اختبار  </title>
    <meta charset='utf-8'>
  </head>
  <body>

    <h1 style="color:red; font-size:30px;">
      This is a heading
    </h1>

    <p style="color:green; font-size:22px;">
      This is a paragraph.
    </p>

    <div style="color:blue; font-size:14px;">
      This is some text content.
    </div>

  </body>
</html>

23

-------- Page 27 (Lecture #10-27.jpg) ---------
( program#50.html ) عملي

EXPLORER
HTML LANGUAGE
program#36.html
program#37.html
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

OUTLINE
TIMELINE

program#50.html  x

program#50.html  html  HTML

1  <html lang="en">
2  <head>
3      <title> صفحة اختبار </title>
4      <meta charset='utf-8'>
5  </head>
6  <body>
7      <h1 style="color: red; font-size:30px;">
8          This is a heading
9      </h1>
10 
11     <p style="color: green; font-size:22px;">
12         This is a paragraph.
13     </p>
14 
15     <div style="color: blue; font-size:14px;">
16         This is some text content.
17     </div>
18 
19 </body>
20 </html>

File  Edit  Selection  …
HTML language

Ln 2, Col 11     Spaces: 4     UTF-8     CRLF     HTML

24
0  0  0

-------- Page 28 (Lecture #10-28.jpg) ---------
( program#50.html ) عملي

This is a heading
This is a paragraph.
This is some text content.

-------- Page 29 (Lecture #10-29.jpg) ---------
Example 3 : INTERNAL STYLE SHEETS - Id Selectors

<html lang="en">
    <head>
        <title> صفحة اختبار </title>
        <meta charset=‘utf-8’>
        <style type="text/css">
            #test1{
                background-color:green;
                font-size:30px;
                color:white;
            }
            #test2{
                color:red;
                font-size:22px;
            }
        </style>
    </head>
    <body>
        <h1 id="test1">This is a heading</h1>
        <p id="test2">This is a paragraph.</p>
    </body>
</html>

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#test2
<html lang="en">
  <head>
    <title> صفحة اختبار </title>
    <meta charset='utf-8'>
    <style type="text/css">
      #test1{
        background-color: green;
        font-size:30px;
        color: white;
      }

      #test2{
        color: red;
        font-size:22px;
      }
    </style>
  </head>
  <body>
    <h1 id="test1">This is a heading</h1>
    <p id="test2">This is a paragraph.</p>
  </body>
</html>

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 SHEETS

<html lang="en">
  <head>
    <title> EXTERNAL STYLE SHEETS </title>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Hello world!</h1>
    <p>I ♥ CSS</p>
  </body>
</html>

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  <html lang="en">
2  <head>
3      <title> EXTERNAL STYLE SHEETS </title>
4      <meta charset='utf-8'>
5      <link rel="stylesheet" type="text/css" href="style.css">
6  </head>
7  <body>
8      <h1>Hello world!</h1>
9      <p>I ♥ CSS</p>
10 </body>
11 </html>

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 SHEETS

<html lang="en">
  <head>
    <title> INTERNAL STYLE SHEETS </title>
    <meta charset='utf-8'>
    <style type="text/css">
      h1 {
        color: green;
        text-decoration: underline;
      }

      p {
        font-size: 25px;
        font-family: 'Trebuchet MS', sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Hello world!</h1>
    <p>I ♥ CSS</p>
  </body>
</html>

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  <html lang="en">
2  <head>
3      <title> INTERNAL STYLE SHEETS </title>
4      <meta charset='utf-8'>
5      <style type="text/css">
6          h1 {
7              color: green;
8              text-decoration: underline;
9          }
10
11         p {
12             font-size: 25px;
13             font-family: 'Trebuchet MS', sans-serif;
14         }
15      </style>
16  </head>
17  <body>
18      <h1>Hello world!</h1>
19      <p>I ♥ CSS</p>
20  </body>
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