CSS – Most common CSS properties Part-2

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.

Example

<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

Some another text sentence in blue 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.

Example

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:

The text content is center aligned.

The text content is left aligned.

The text content is right aligned.

The demo is to show text-align css property value ‘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.

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:

ValuesDescription
noneNo decoration will be added to the inline text content.
underline An underline will be drawn to the inline text content.
overline An overline will be drawn to the inline text content.
line-through A line will be drawn through the middle of the inline text content.

Example

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

This is a link with no decoration

Text Transformation

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

ValuesDescription
uppercaseSet each letter of the sentence in the capital letter.
lowercaseSet each letter of the sentence in the small letter.
capitalizeSet the first letter of each word in the capital letter in a sentence.

Example

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;

Example

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.

Example

#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.

Example

#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:

ValuesDescription
visibleIt is a default value. Overflowing content should be displayed.
hidden Overflowing content should not be displayed.
scroll Overflowing content should not be displayed, but a scrollbar is added to see the hidden content.
auto Similar to scroll, but it adds scrollbars only when necessary.

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.

Example

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:

The value ‘visible’ for the overflow property is used to display entire content irrespective of container element area. Means, it display the overflowing content also.




The value ‘hidden’ for the overflow property is used to hide the extra content of container element area. Means, it hides the overflowing content.

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.

Example

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:

The value ‘scroll’ for the overflow property is used to see the content through scrollbar. Means, it provides a scrollbar to the user to see the hidden content by scrroling the bar.

The value ‘auto’ for the overflow property is also providing the similar feature of scroll but it show the scrollbar only when it required.

The value ‘auto’ for the overflow property is also providing the similar feature of scroll but it show the scrollbar only when it required.

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.

Example

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

OUTPUT:

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

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.

Example

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:

Share with friends

Leave a Comment

Your email address will not be published.