Scribd Logo
Upload

Welcome to Scribd!

  • 3CSS Propertiestext Controlling and Text Formatting

    Uploaded by

    Sathwik Reddy
    11 views5 pages
    This document discusses 8 CSS text formatting properties: letter-spacing, word-spacing, line-height, text-decoration, text-transform, text-align, text-indent, and white-space. Each property is defined and examples are provided to demonstrate how they can be used to style text through CSS.

    Original Description:

    Original Title

    3CSS propertiestext controlling and text formatting

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses 8 CSS text formatting properties: letter-spacing, word-spacing, line-height, text-decoration, text-transform, text-align, text-indent, and white-space. Each property is defined and examples are provided to demonstrate how they can be used to style text through CSS.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views5 pages

    3CSS Propertiestext Controlling and Text Formatting

    Uploaded by

    Sathwik Reddy
    This document discusses 8 CSS text formatting properties: letter-spacing, word-spacing, line-height, text-decoration, text-transform, text-align, text-indent, and white-space. Each property is defined and examples are provided to demonstrate how they can be used to style text through CSS.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    This property is used to change the style of text.

    CSS supports the following text formatting properties:

    1. letter-spacing
    This property sets the space between characters.

    The value for letter spacing:


     letter-spacing: 5px – Sets the spacing between letter of 5px.
     letter-spacing: -5px – Sets the spacing between letter of -5px.
    Example: Demonstration of letter spacing

    <html>
         <body>
              <p style="letter-spacing: 5px;">letter spacing 5px.</p>
              <p style="letter-spacing: -2px;">letter spacing -5px.</p>
         </body>
    </html>

    Output:

    2. Word-spacing
    This property sets the space between words.

    The values for word spacing can be:


     word-spacing: 4px – Sets the spacing between word of 4px.
     word-spacing: -4px – Sets the spacing between word of -4px.
    Example: Demonstration of word-spacing

    <html>
         <body>
              <p style="word-spacing: 13px;">word spacing 13px.</p>
              <p style="word-spacing: -8px;">word spacing -8px.</p>
         </body>
    </html>
    Output:

    3. Line-height
    This property is used to specify the space between two lines.

    The values for the property can be:


     Normal
     Numbers like 0.5, 1.3, 2 etc.
     Length like 22 px, etc.
     Percentage like 150%, etc.
    Example: Demonstration of Line-height

    <html>
         <head>
              <style>
                   p.small
                   {
                        line-height: 0.5;
                   }
                   p.big
                   {
                        line-height: 1.3;
                   }
              </style>
         </head>
         <body>
              <p> This paragraph has a standard line-height</p>
              <p class="big"> This paragraph has bigger line height 1.3.</p>
              <p class="small"> This paragraph has smaller line height 0.5</p>
         </body>
    </html>
    Output:

    4. Text-decoration
    This property is used to set or remove decorations from text.

    The possible values for this property are:


     none (default value)
     underline
     overline
     line-through
     blink
    Example: Demonstration of text-decoration

    <html>
         <body>
              <p style="text-decoration:underline;">
                   This text is underline.
              </p>
              <p style="text-decoration:line-through;">
                   This text is strike through.
              </p>
              <p style="text-decoration:overline;">
                   This text will appear overline.
              </p>
         </body>
    </html>
    Output:

    5. Text-transform
    This property is used to specify the text into uppercase, lowercase and
    capitalize the first letter of the word.

    The possible values for text-transform property are:


     none
     capitalize
     uppercase
     lowercase
    Example: Demonstration of text-transform

    <html>
         <body>
              <p style="text-transform:capitalize;">
                   This text will be capitalized.
              </p>
              <p style="text-transform:uppercase;">
                   This text will be in uppercase.
              </p>
              <p style="text-transform:lowercase;">
                   This text will be in lowercase.
              </p>
         </body>
    </html>

    Output:
    This Text Will Be Capitalized.
    THIS TEXT WILL BE IN UPPERCASE.
    this text will be in lowercase.

    6. Text-align
    The possible values for text align property are:
     left
     right
     center
     justify

    7. Text-indent
    This property is used to specify the indentation of the first line of the text of
    a block level element.

    The possible value for text-indent are:


     length like 1.7px, 50px, 1 cm etc.
     percentage like 10% , 25 %, etc.
    Example: Illustration of text-indent

    <html>
         <body>
              <p style="text-indent: 50px;">
                   This is the first line indented by 50px. <br> This line will remain at
    its actual position.
              </p>
         </body>
    </html>

    Output:

    8. White-space
    The white-space property is used to control the flow and formatting of the
    text.

    The possible values for white-space are:


     normal
     pre

    You might also like