CSS Text

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 2

perty is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.


text-align: center;
2. The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from links:
text-decoration: none;
overline, underline, line-through, none
3. The text-transform property is used to specify uppercase and lowercase letters in a text.
uppercase or lowercase letters, or capitalize the first letter of each word
: uppercase;
4. The text-indent property is used to specify the indentation of the first line of a text:
text-indent: 50px;
5. The letter-spacing property is used to specify the space between the characters in a text.
letter-spacing: 3px;
letter-spacing: -3px;
6. The line-height property is used to specify the space between lines:
line-height: 0.8;
7. The direction property is used to change the text direction of an element:

from Mangayarkarasi to everyone:

direction: rtl;
<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>
8. The word-spacing property is used to specify the space between the words in a text.
word-spacing: 10px; word-spacing: -5px;
9. The text-shadow property adds shadow to text.
The following example specifies the position of the horizontal shadow (3px), the position of the vertical
shadow (2px) and the color of the shadow (red):
text-shadow: 3px 2px red;

CSS Border Properties


1. border-style property specifies what kind of border to display.
border-style property can have from one to four values (for the top border, right border, bottom border,
and the left border).
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}

from Mangayarkarasi to everyone:

hidden;}
p.mix {border-style: dotted dashed solid double;}
2. The border-width property can have from one to four values (for the top border, right border,
bottom border, and the left border).
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
values: thin, medium, or thick.
border-width: 5px; border-width: medium; border-width: 2px 10px 4px 20px;
3. border-color property is used to set the color of the four borders.
border-color is not set, it inherits the color of the element.
border-style: solid;
border-color: red green blue yellow;
4. Border – individual sides
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
or
border-style: dotted solid;or border: 5px solid red; (combined style short hand property) or border-left:
6px solid red;
5. border-radius property is used to add rounded borders to an element
border-radius: 12px;

You might also like