Use Full CSS | Important Use Full CSS supported in HTML5

The following is a basic and most common CSS properties how they are used to style the web pages.

CSS Transition Property:

.animation {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
or
.animation {
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}

AND
@include transition(all ease 250ms);

The appearance property defines how elements form controls are rendered.
The appearance property:

-webkit-apperance: none;
-moz-apperance: none;
appearance:none;

Example

select{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow:'';
  text-indent: 0.01px; /* Removes default arrow from firefox*/
  text-overflow: ""; /*Removes default arrow from firefox*/ }
  select::-ms-expand {
  display: none;
}

The box-shadow CSS property is used to add shadow effects around an element’s frame.
The box-shadow Property:

.shadow {
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}

Letter Spacing:

#Letter Spacing:
letter-spacing: 0.0px;
Or
letter-spacing: 1px;

Box Sizing:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Text Shadow:

text-shadow: 0px 1px 0px black;

Gradient Background CSS:

background: #e2e4e7;
background: -moz-linear-gradient(top, #e2e4e7 0%, #e0e2e5 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #e2e4e7), color-stop(100%, #e0e2e5));
background: -webkit-linear-gradient(top, #e2e4e7 0%, #e0e2e5 100%); background: -o-linear-gradient(top, #e2e4e7 0%, #e0e2e5 100%);
background: -ms-linear-gradient(top, #e2e4e7 0%, #e0e2e5 100%); background: linear-gradient(to bottom, #e2e4e7 0%, #e0e2e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e4e7', endColorstr='#e0e2e5', GradientType=0 );

Before/After – Font Awesome:

::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
}

::before {
  font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
}

::before {
  font-family: "Font Awesome 5 Brands"; content: "\f099";
}

Background Color:

background-color: rgba(0,0,0,0.2)

Calculate Height:

height: calc(100vh - 100px);

Calculate width:

width: calc(100% - 100px);

Custom Scrollbar:

#main::-webkit-scrollbar {
    width: 5px;
}

#main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
    border-radius: 0px;
}

#main::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,1);
}

 body { -ms-overflow-style: scrollbar;}

CSS Properties, Font Awesome, Gradient Background

In this tutorial we learn few important CSS which are used by styling the HTML structure. Like .animation CSS which is used by element animation or giving quick attention to user on a particular section.

Select tag arrow design, hide or change the down arrow of default arrow of select tag.

To to improve readability of text use letter-spacing, Letter Spacing CSS use to given a space between two character to beautify the text and give a nice look & feel, mostly use letter-spacing style to button to improve readability.

How to use Font Awesome Family in :after and :before to change the image instead of setting background image in URL.

box-shadow property gives outer shadow on elements to improve visibility, 3D effect to a perticular element. Using box-shadow property to set outer shadow for emboss effects. Currently all latest browser support box-shadow CSS.

You can customize this code further as per your requirement.