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

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

[ ITGS226 ]

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

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

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

2025 ربيع

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

CSS - Cascading Style Sheets

CSS TEXT

Example

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

CSS TEXT

- The Color property is defined by the CSS color property.
    body {color: #434343;}

- The Text Alignment property is used to set the horizontal alignment of the text. Text can be aligned in four ways: left, right, center or justify (straight left and right margins).
    h1 { text-align: center; }
    p  { text-align: justify; }

- The Text Direction property is used to change the text direction of an element.
    p { direction: rtl; }   /* rtl or ltr */

1

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

CSS TEXT

- The Text Vertical Alignment property sets the vertical alignment of an element. It has the values: baseline, length, sub, super, top, text-top, middle, bottom or text-bottom

<p>
top:          <img style="vertical-align: top" src="star.png" alt="star"/>
middle:       <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom:       <img style="vertical-align: bottom" src="star.png" alt="star"/>
super:        <img style="vertical-align: super" src="star.png" alt="star"/>
sub:          <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>

<p>
text-top:     <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom:  <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em:        <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em:         <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%:          <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%:        <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>

top:     middle:     bottom:     super:     sub:
text-top:     text-bottom:     0.2em:     -1em:     20%:     -100%:
2

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

CSS TEXT

• Text decoration: the text-decoration property is used to set or remove decorations from text.

   • The text-decoration-line property This used to add a decoration line to text. It typically accepts the values: underline, overline, line-through or none.

   • The text-decoration-color property is used to set the color of the decoration line.

   • The text-decoration-style property is used to set the style of the decoration line with the values: solid, double, dotted, dashed or wavy.

   • The text-decoration-thickness is used to set the thickness of the decoration line with length or % or auto.

   • The text-decoration shorthand property with the previous order above.

3

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

Basic example

HTML
<p class="wavy">Here’s some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>

CSS
.wavy {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}

.both {
    text-decoration-line: underline overline;
}

Here’s some text with wavy red underline!
This text has lines both above and below it.

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

HTML

<p>This text contains a <span class="spelling">speling</span> mistake.</p>
<p class="grammar">This text contain grammatical errors.</p>

CSS

.spelling {
  text-decoration-line: spelling-error;
}

.grammar {
  text-decoration-line: grammar-error;
}

This text contains a speling mistake.

This text contain grammatical errors.

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

CSS TEXT

- The Text Transform property is used to set the cases for a text. Using this property you can change an element's text content into uppercase or lowercase letters, or capitalize the first letter of each word without modifying the original text. Its values are: none, capitalize, uppercase or lowercase.

<p>
  text-transform: capitalize
  <strong>
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    >
  </strong>
</p>

CSS

span {
  text-transform: capitalize;
}

text-transform: capitalize            Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit…

6

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

</p>
<p>
  text-transform: uppercase
  <strong>
    <span>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span>
  </strong>
</p>

CSS

span {
  text-transform: uppercase;
}

text-transform: uppercase
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT…

7

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

CSS TEXT

• The text-indent property is used to specify the indentation of the first line of a text.

    div { text-indent: 130px }   /* You can use negative value */

    Lorem ipsum dolor sit.

• The letter-spacing property is used to specify the space between the characters in a text. Its values are normal or length.

    div { letter-spacing: 5px }   /* You can use negative value EX: '-2px' */

    L o r e m  i p s u m  d o l o r  s i t .

8

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

CSS TEXT

- The line-height property is used to specify the space between lines.

  div { line-height: 1.6 } /* Default: normal , px , em , % , num EX: 1.5 */

- The word-spacing property is used to specify the space between the words in a text.

  div { word-spacing: 10px } /* Default: normal , px , rem , % , ch */

9

-------- Page 12 (Lecture #11-12.jpg) ---------
Example 1 :  INTERNAL STYLE SHEETS  -  CSS TEXT

<html lang="ar">
  <head>
    <title> صفحة اختبار لخصائص النص </title>
    <meta charset='utf-8'>
    <style type="text/css">
      p {
        text-align:justify;
        color:#ff0000;
        text-decoration:underline;
        direction:rtl;
      }
    </style>
  </head>
  <body>
    <p>
      إن هذه الصفحة إختبار لخصائص مظهر النص في أوراق الأنماط الإنسيابية وقد تعمدنا إطالة 
      النص الموجود بين وسمي بداية ونهاية هذه الفقرة ليظهر عمل خاصية المحاذاة جهتي ,
      في لقطة الشاشة التي سوف نعرضها لهذه الصفحة.
    </p>
  </body>
</html>

10

-------- Page 13 (Lecture #11-13.jpg) ---------
( program#54.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
program#54.html

# style.css

OUTLINE
TIMELINE

program#54.html  html  head  style  p

program#54.html

<html lang="ar">
  <head>
    <title> صفحة اختبار لخصائص النص </title>
    <meta charset="utf-8">
    <style type="text/css">
      p {
        text-align:justify;
        color:#ff0000;
        text-decoration:underline;
        direction:rtl;
      }
    </style>
  </head>
  <body>
    <p>
      ظهر النص في أوراق الأنماط الانسيابية, وقد تعمدنا إطالة
      حدود بين وسمي بداية ونهاية هذه الفقرة, ويظهر عمل خاصية المحاذاة
      في لقطه الشاشة التي سوف نعرضها لهذه الصفحة
    </p>
  </body>
</html>

HTML language

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

11

-------- Page 14 (Lecture #11-14.jpg) ---------
عملي ( program#54.html )

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

إن هذه الصفحة إختبار لخصائص النص في أوراق الأنماط الإنسيابية،قد تعمدنا لجلب هذا النص الموجود بين وسمي بداية ونهاية هذه الفقرةلإظهار عمل خاصية المحاذاة في أنماط التنسيقات التي سنفرضاها لهذه الصفحة.

-------- Page 15 (Lecture #11-15.jpg) ---------
Thank you