In this article of most common CSS properties Part-2, you will see the commonly used properties such as Text, Fonts, Overflow, Align, and Display.

CSS Text

In CSS, the text properties are used to manipulate the text of an HTML element. Followings are few most common CSS text properties:

• color
• text-align
• text-decoration
• text-transform
• text-shadow

Text Color

The color property is used to set the color of the text of an HTML element. The value for this property either a color name or a color code.

<p style="color:red;">This is a sample text sentence in red color</p>
<p style="color:green;">This is a sample text sentence in green color</p>
<div style="color:blue;">Some another text sentence in blue color</div>

OUTPUT:

This is a sample text sentence in red color

This is a sample text sentence in green color

Text Alignment

The text-align property is used to set the horizontal alignment of a text. The possible values for this property are left, right, center, and justify.

The value justify is used to stretched each line so that every line will be of equal width, and the left and right margins are straight like in newspapers.

h1{
   text-align:center;
}

h2{
   text-align:left;
}

h3{
   text-align:right;
}

div{
   height:200px;
   width:300px;
   padding:10px;
   margin:20px;
   font-size:16px;
   border:1px solid #ddd;
   text-align:justify;
}

OUTPUT:

Text Decoration

The text-decoration property is used to specify the decoration to the inline text content. The values for this property are as follow:

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: overline;
}

a{
  text-decoration: none;
}

OUTPUT:

This is an heading with underline

This is an heading with line-through

This is an heading with overline

Text Transformation

The text-transform property is used to do the capitalization of text. The values for this property are as follow:

h2 {
  text-transform: uppercase;
}

h3 {
  text-transform: lowercase;
}

h4 {
  text-transform: capitalize;
}

OUTPUT:

This is an heading with uppercase letter

This is an heading with lowercase letter

This is an heading with capitalize letter

Text Shadow

The text-shadow property is used to add shadow to text.

Syntax:

 text-shadow :  horizontal-shadow vertical-shadow blur-radius color;

h1 {
  text-shadow: 2px -3px red;
}

h2 {
  text-shadow: 5px 5px 5px gray;
}

OUTPUT:

This is heading 1

This is heading 2

CSS Fonts

In CSS, the font properties are used to set size, style, etc. to the text of an HTML element. Followings are some common CSS font properties:

• font-size
• font-family

CSS Font Size

The font-size property is used to set the size of the text. The value for this property either in percentage, px, or in pre-defined size name.

#example1{
    font-size: 200%;
}

#example2{
    font-size: 20px;
}

#example3{
    font-size: small;
}

OUTPUT:

Sample paragraph with font size 200%

Sample paragraph with font size 20px

Sample paragraph with font size small

CSS Font Family

The font-family property is used to specify the font of a text. The font-family property takes list of font families names with comma-separated.

#example1 {
  font-family: "Times New Roman", serif;
}

#example2 {
  font-family: Arial, Helvetica, sans-serif;
}

OUTPUT:

This is a sample paragraph in the Times New Roman font.

This is a sample paragraph in the Arial font.

CSS Overflow

The overflow property is used to determine how content should be display when it overflows its element’s content area. The overflow property only works for block elements with a specified height.

The possible values for this property are as follow:

Overflow Visible & Hidden

The overflow:visible property is used to display the overflowing content whereas overflow:hidden property is used to hide the overflowing content.

The visible is the default value for the overflow property.

div.example1{
    overflow:visible;
    height:50px;
    width:250px;
    background-color: #ddd;
    border:1px solid #000;
}

div.example2{
    overflow:hidden;
    height:50px;
    width:250px;
    background-color: #ddd;
    border:1px solid #000;
}

OUTPUT:

Overflow Scroll & Auto

The overflow:scroll property is used to see the overflowing content through the scrollbar. The overflow:auto property is similar to scroll, but it show the scrollbar when it required.

div.example1{
    overflow:scroll;
    height:80px;
    width:250px;
    background-color: #ddd;
    border:1px solid #000;
}

div.example2{
    overflow:auto;
    height:60px;
    width:250px;
    background-color: #ddd;
    border:1px solid #000;
}
div.example3{
    overflow:auto;
    height:150px;
    width:250px;
    background-color: #ddd;
    border:1px solid #000;
}

OUTPUT:

CSS overflow-x & overflow-y

The overflow-x and overflow-y properties are used to determine whether to change the overflow of content just horizontally or vertically.

div{
    overflow-x:hidden;
    overflow-y:scroll;
    height:80px;
    width:250px;
    background-color: #ddd;
    border:1px solid #000;
}

OUTPUT:

CSS Display

The display property is used to control the layout of HTML page. It is the most commonly used CSS property.

Followings are some common values used in display property:

• none 
• block 
• inline 

Depending on the type of element, each HTML element has a default display value. Most of the HTML elements has default display value either block or inline.

Display block & none

The display:block property is used to show the HTML element from the hidden state.

The display:none property is used to hide the element instead of removing the element.

h1{
    display:none;
}

h2{
    display:block;
}

p.a{
    display:none;
}

p.b{
    display:block;
}

OUTPUT:

This is a heading with display:none property

This is a heading with display:block property

This is a sample paragraph with display:none property

This is a sample paragraph with display:block property

NOTE: The element witch is specified with display:none CSS proprty is not visible.

Conclusion

In this article of most common CSS properties part-2, you have seen how to use some frequently used CSS properties such as Text, Fonts, Overflow, and Display.

Related Article:

• CSS – Introduction
• CSS – Types of CSS
• CSS – Priority of CSS
• CSS – Color Names and Color Codes
• CSS – Most common CSS properties Part-1