Style Rules List

  1. background: red;
  2. background: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)), url("https://www.abc.com/img1.jpg") no-repeat;
  3. background-color: red;
  4. background-image: url("https://www.abc.com/image.jpeg");
  5. background-repeat: no-repeat;
  6. background-size: contain;
  7. border: solid red;
  8. border: 1px solid blue;
  9. border-bottom: 1px solid red;
  10. border-radius: 5px;
  11. border-radius: 25%;
  12. box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.50);
  13. box-sizing: border-box;
  14. clear: left; // element cannot have anything left of it
  15. clear: right; // element cannot have anything right of it
  16. color: red;
  17. color: #FF0000;
  18. color: rgba(224, 224, 224, 0.5); // light gray with 50% "see-through"
  19. cursor: default; // arrow
  20. cursor: pointer; // hand
  21. display: block; // causes element to take entire width. can set height and/or width
  22. display: grid; // need (grid-template-columns, width) and/or (grid-template-rows, height)
  23. display: inline; // causes element not to take entire width. can't set height or width
  24. display: inline-block; // like inline, but can set height and/or width
  25. display: none;
  26. grid-template: 200px 300px / 20% 10% 70%; // rows "/" columns
  27. grid-template: 40% 50% 50px / 3fr 50% 1fr; // "fr" is "fractions" unit
  28. grid-template: repeat(3, 1fr) / 3fr 50% 1fr;
  29. grid-template-columns: 100px 50% 200px; // used with display: grid; and width: 800px;
  30. grid-template-rows: 40% 50% 50px; // used with display: grid; and height: 1000px;
  31. float: both;
  32. float: left;
  33. float: none;
  34. float: right; // puts element at right and allows subsequent text to display to the left of this element
  35. font-family: Arial;
  36. font-family: cursive;
  37. font-family: "Times New Roman", Times, serif;
  38. font-size: 20px;
  39. font-size: 2em;
  40. font-weight: bold;
  41. font-weight: 125;
  42. height: 100px;
  43. letter-spacing: 8px;
  44. line-height: 24px;
  45. line-height: 1.3em;
  46. list-style: none; // with ol and ul
  47. list-style: square; // with ol and ul
  48. margin: 0;
  49. margin: 10px 20px;
  50. margin: 0 auto;
  51. margin: 10px 20px 30px;
  52. margin: 10px 20px 30px 40px;
  53. margin-top: 100px;
  54. max-height: 200px;
  55. max-width: 600px;
  56. min-height: 150px;
  57. min-width: 450px;
  58. opacity: 0.5;
  59. overflow: hidden;
  60. overflow: scroll;
  61. overflow: visible;
  62. padding: 0;
  63. padding: 10px 20px; // top, bottom: 10px, left, right 20px
  64. padding: 10px 20px 30px;
  65. padding: 10px 20px 30px 40px; // top 10px, right 20px, bottom 30px, left 40px
  66. padding-top: 100px;
  67. position: absolute; // also need (top or bottom) and/or (right or left)
  68. position: fixed;
  69. position: relative; // also need (top or bottom) and/or (right or left)
  70. position: static; // default
  71. text-align: center;
  72. text-align: left;
  73. text-align: right;
  74. text-decoration: none;
  75. text-decoration: bold;
  76. text-decoration: line-through overline underline;
  77. text-transform: capitalize;
  78. text-transform: uppercase;
  79. transition: background .5s; // with :hover selector
  80. visibility: hidden;
  81. visibility: visible;
  82. width: 750px;
  83. width: 100%;
  84. z-index: 10; // larger values "on top of" smaller values

Prev -- Up