Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Set color and direction of text with CSS properties

Following CSS text formatting properties are used to set color and direction of text

Text color

Text-color property is used to set the color of the text.

Code example

/*color hex value(white)*/
.btn-custom {
    color: #fff;
}
/*color name value(green)*/
.btn-success{
    color:green;
}

Text direction

Text direction property is used to set the direction of the text.

Following are text direction CSS values

Ltr :Text direction goes from left-to-right, this is default value.          
Rtl :Text direction goes from right-to-left
Initial:Sets this property to its default value. Read about initial         
Inherit: Inherits this property from its parent element. Read about inherit

Code example

/*Set the text direction to "right-to-left":*/ 
div.right-to-left {
    direction: rtl;
}  

How to Indent the text of a paragraph and align the text of a document

Following CSS text formatting properties are used to Indent the text of html element and align the text of document.

Text indentation property

Text indentation property is used to indent the first line of the paragraph.

Note: The size can be in px, cm, percentage

Code example for text inside paragraph and div

p.title {
    text-indent: -2em;
}
 
p.a {
    text-indent: 25px;
}
 
div.left-section {
    text-indent: 12%;
}

Text alignment property

Text alignment property is used to set the horizontal alignment of the text.

These CSS values can be used to set Left, right, left, right, centered, and justified alignment.

Syntax:

CSS-selector {
    text-align: alignment type;
}

Code example:

/*Text alignment centered for button element*/ 
button
{
    text-align:center;
}
 
/*Text alignment left for main content section*/
.main-containt
{
    text-align:left;

Set margin for html element using CSS

The margin is a shorthand for margin-top, margin-right, margin-bottom, and margin-left in CSS.

Code example,

.nav-menu {
    /*set margin top 10px , margin right 5px,
      margin bottom 2px, margin left 5px */
    margin: 10px  5px 2px 5px;
}


The CSS margin-top property sets the top margin of an element.

Margin top example

.about-content {
    Margin-top: 10px;
}

 The CSS margin-bottom property sets the bottom margin of an element.

Margin bottom example

.footer-content {
    Margin-bottom: -5px;
}


The CSS margin-right property sets the right margin of an element.

Margin right example

 .left-menu{
    margin-right:2em;
}


The CSS margin-left property sets the left margin of an element.

Margin left example  

.right-content{
    margin-left:2%;