ad

Thursday, 26 June 2014

C.S.S. for Text


C.S.S.  For Text

C.S.S. for text means how to design our text, what will be the color of text ,what will be the font , what will be the size of text.
                                             

                                                                  Text color

The color property is used to set the color of the text.
It can be done as
            body {
    color: blue;
          }

         h1 {
           color: #00ff00;
                }


The color can be specified by three ways 
With CSS, a color is most often specified by:
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)" here RGB means Red, Green, Blue
  • a color name - like "red"
                                                  

                                  Text Alignment

The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
            h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}
                                            

Text Decoration

The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
   a {
    text-decoration: none;
}


It can also be used to decorate text:-



h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.


p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text.
It can be done as 
p {
    text-indent: 50px;
}

No comments: