Page 206 - Webapplication11_C11_Flipbook
P. 206

Property                    Usage                                   Example
               font-size               Sets text/font size           h1 {

                                                                       font-size: 20px;
                                                                     }
               font-variant            Denotes whether a text should  p {
                                       be displayed in a small-caps font    font-variant: small-caps;
                                       or not.
                                                                     }
               font-weight             Indicates how thick  or thin  p {
                                       characters  in  text  should  be     font-weight: bold;
                                       displayed.
                                                                     }
                                                                     h1 {
                                                                       font-weight: normal;
                                                                     }
               font                    It  is  also  feasible  to  declare  all  .para2 {
                                       of the individual font properties     font: italic small-caps 35px Consolas,
                                       in one property to simplify the   serif;
                                       code.
                                                                     }
                 2.25 TEXT MANIPULATION USING CSS

              CSS has various properties for formatting text. You can set the following text properties of an element:
                       Property                    Usage                                  Example

               1.2 mm                  Sets the colour of the text.  h2 {
                                                                       color: green;
                                                                     }
               text-align              Sets the horizontal alignment of  h2 {
                                       text.                           text-align: center;

                                                                     }
               direction               Sets  the  text  direction  of  an  p {
                                       element  (ltr  (default):  left  to    direction: rtl;
                                       right, rtl: right to left)
                                                                     }
               letter-spacing          Used to indicate  the space  h2 {
                                       between  the  characters  in  a    letter-spacing: 7px;
                                       text.
                                                                     }
               word-spacing            Sets  the  space  between  the  p {
                                       words in a text                 word-spacing: 5px;
                                                                     }
               text-transform          Can  be  used  to  convert  p.1 {
                                       entire  text  into  uppercase  or   text-transform: uppercase;
                                       lowercase, or capitalize the first   }
                                       letter of each word
                                                                     p.2 {
                                                                       text-transform: capitalize;

                                                                     }
                204     Touchpad Web Applications-XI
   201   202   203   204   205   206   207   208   209   210   211