Wednesday, September 23, 2015

CSS cheat sheet

Remove default bullets from unordered list
#notepad li { list-style: none; 
}

Text-Align



.panel{
   text-align: center;
}

Border Radius
border-radius: 14px;


Align table to center within a div (responsive)





table {
   margin:0 auto;
}

Adjust left and right margin



.panel{
   margin-right:auto;
   margin-left:auto;
}










Class with round edges

.mainBody{
 
    margin: 100px 250px;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 1303px;
    height: 703px;
   
}

Hover effect in table selection
.table>tbody>tr:hover {
        background: #99B2E6 !important;

    }

Specify font-awesome styles for specific div
#notepad li .fa-ban:before {
    color: #FA0A26;
    padding-right: 0px;
    margin-left: -41px;
}
Add vertical line

.vertical-line {
     border-left:1px solid #47473D;

 }








Add shadow box

Edit in plunker

div { width: 300px; height: 100px; 
        background-color: yellow; 
       box-shadow: 10px 10px 5px #888888; }

 Text Transform

.text-change
{
text-transform: none;
}
.text-change
{
text-transform: capitalize;
}
.text-change
{
text-transform: uppercase;
}
.text-change
{
text-transform: lowercase;
}



Pointed Cursur


<span style="cursor:pointer">pointer</span><br>




Specify styles to multiple tag


input[type=text],input[type=password],textarea
{ 
width:150px;
}

Display html as block 
span#mySpan {display:block; }

Borders for div
container{
    background-color:#ccc;
    height: 200px;
    width:200px;
     border-color: #000;
     border-style: solid
    }
Hide text overflow with ellipses

Borders for div

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}


No comments:

Post a Comment