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

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%;

Set height and width of an image with CSS and element properties

The CSS height and width properties are used to set the height and width of an html element.

Following are some height and width properties values:

  • Percentage (%) :  Percent of width height of parent container or containing block  i.e. 50%
  • Length(px, cm) : height in pixel or centimeter i.e. 150px, 5cm etc
  • Initial : Sets the height/width to its default value
  • Inherit  : The height/width will be inherited from its parent value
  • Auto: Default browser value

Code example

Width and height with image tag properties

<img src="hero_image.jpg" alt=""
           width="450px" height="450px">

Image width and height with CSS

img{
    width:450px;
    height:450px;
}
 
.hero-image{
    width:45%;
    height:45%;