CSS Styling

Make a box with rounded corners:
	You can see that the box has a rounded corner, which we can do by using the CSS code below. In this case, "box" is the class name for the div. .box { height: 120px; width: 120px; background-color: #06d590; color: black; border-radius: 15px; }

Create a box with a shadow effect using only CSS:
	You can see that the box has a shadow effect, which we can do by using the CSS code below. In this case, "boxShadow" is the class name for the div. .boxShadow { height: 120px; width: 120px; background-color: #cf6a22; color: black; box-shadow: 10px 10px 18px 0px #808080; }
	Box shadows take five values and are applied to the outside portion of tags by default. first value for the X index, second value for the Y index, third value for the blur option, fourth value for the spread, and last value for the shadow's color
Create a box with a Linear Gradient using only CSS:
	You can see that the box has a linear background color, which we can do by using the CSS code below. In this case, "boxLinearGradient" is the class name for the div. .boxLinearGradient { height: 120px; width: 120px; background:linear-gradient(blue, #cf6a22,green);// Default it put color from top to bottom background:linear-gradient(to right,blue, #cf6a22,green);// This will start color from right background:linear-gradient(to left,blue, #cf6a22,green);// This will start color from left background:linear-gradient(45deg,blue, #cf6a22,green);// This will rotate the color with 45deg color: black; }
	Multiple colors are added to the background using a linear gradient. By default, the order is top to bottom. We are also able to adjust the order to "left," "right," and "60 degrees."

Using text shadow in CSS, create a text shadow:
Text shadow effect	You can see that the text shadow effect , which we can do by using the CSS code below. In this case, "Shadoweffect"is the class name for the div. .Shadoweffect color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

Using loader in CSS, create a loader:
	You can see the loader , which we can do by using the CSS code below. In this case, "loader"is the class name for the div. .loader { width: 50px; height: 50px; border-radius: 50%; border: 10px solid white; border-top: 10px solid blue; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Using filter: drop-shadow in CSS, create a image shadow:
	You can see that the image shadow , which we can do by using the CSS code below. In this case, "image"is the class name. .image{ width: 100px; filter: drop-shadow(10px 10px 2px #1a1a1a)!important; } .image>img{ width: 100%; border: none; background:none; }

Using this code to ensure that the image size will always fit within the div even if the div size changes.
	You can see the image that we were able to create with the CSS code below."Photo" is the class name in this instance. .photo{ height: 100px; width: 150px; display: flex; justify-content: center; align-items: center; } .photo>img{ width: 100%; height: 100%; background: none; border: none; }

SPGrid View Styling

If we want to put our own Styling in SPGrid View then we need to change Corev4.css, and it is not good :(

So what should we do ?

Simple just put internal style sheet, but again what should we need to change. Bcz when i had started, it was too
struglling for me. But u dont worry :)
For you i have solutions.

Suppose you need to change Heading color,Background of heading then use this.

TH .ms-vb A{
color:#4b4b4b !important;
}

above style is for the heading of SPGridView text.


.ms-listviewtable .ms-vh2{
padding:0px !important;
background:#cdcdcd;
}

above style is for the background of heading


TD Table.ms-listviewtable
{
border-collapse:separate !important;
}
TH .ms-vb
{
    padding-top:5px !important;
}
.ms-vh2 Table.ms-selectedtitle
{
    background:#cdcdcd !important;
}

above code is for background setting of heading

TR.ms-viewheadertr > TH.ms-vh2:hover
{
  background:#cdcdcd !important;
}
TR.ms-viewheadertr > TH.ms-vh:hover
{
  background:#cdcdcd !important;
}



above code is for background setting of heading Hover


I will update next part sooon

How to change web parts Title Style

<style>

.ms-WPHeader TD[title^='Testing'] {
HEIGHT: 50px;
BACKGROUND: url(/HomePage-Images/announcements_1px.png);
}
.ms-WPHeader TD[title^='Testing'] SPAN:first-child {
PADDING-LEFT: 55px;
WIDTH: 65px;
PADDING-TOP: 0px;
}
.ms-WPHeader TD[title^='Testing'] H3 {
PADDING-BOTTOM: 0px;
 MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 7px;
HEIGHT: 55px;
COLOR: black;
FONT-SIZE: 1.2em;
PADDING-TOP:0px;
BACKGROUND: url(/HomePage-Images/announcements.png) no-repeat left top;
}
</style>

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.ms-WPHeader TD[title^='Testing']
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
By using -----TD[title^='Testing']------  i m trying to find web part whose Title is Testing . It may be your is different.
After that i m giving background image for title. You can give any color.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.ms-WPHeader TD[title^='Testing'] SPAN:first-child
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
This one i m using for putting style sheet for title(Testing" ). It may u need to set padding top for alignment.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ms-WPHeader TD[title^='Testing'] H3
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
I m using this for left side image