1. Font

    There are many properties related to the font, such as the face, weight, style, etc. These properties allow you to change the style or complete look of your text.

    Font-Family 
    
font-family: 'Segeo UI', Tahoma, Geneva, Verdana, sans-serif;

  2. Font-Style 
    
font-style: italic;

  3. Font-Variant 
    
font-variant: small-caps;

  4. Font-Weight 
    
font-weight: bold;

  5. Font-Size 
    
font-size: larger;

  6. Font 
    
font: style variant weight size family;

  7. Text

    Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the dcoument.

    Text-Align 
    
text-align: justify;

  8. Letter-Spacing 
    
letter-Spacing: .15em;

  9. Text-Decoration 
    
text-decoration: underline;

  10. Word-Spacing 
    
word-spacing: 0.25em;

  11. Text-Transform 
    
text-transform: uppercase;

  12. Text-Indent 
    
texr-indent: 0.5cm;

  13. Line-Height 
    
line-height: normal;

  14. Background

    As the name suggests, these properties are related to background, i.e., you can change the color, image, position, size, etc., of the document.

    Background-Image 
    
background-image: url("Path");

  15. Background-Position 
    
background-position: right top;

  16. Background-Size 
    
background-size: cover;

  17. Background-Repeat 
    
background-repeat: no-repeat;

  18. Background-Attachment 
    
background-attachment: scroll;

  19. Background-Color 
    
background-color: fuchsia;

  20. Background 
    
background: color image repeat attachment position;

  21. Border

    Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.

    Border-Width 
    
border-width: 5px;

  22. Border-Style 
    
border-style: solid;

  23. Border-Color 
    
border-color: aqua;

  24. Border-Radius 
    
border-radius: 15px;

  25. Border 
    
border: width style color;

  26. Box Model

    In laymen's terms, the CSS box model is a container that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. It is used to create the design and layout of web pages.

    Float 
    
float: none;

  27. Clear 
    
clear: both;

  28. Display 
    
display: block;

  29. Height 
    
height: fit-content;

  30. Width 
    
width: auto;

  31. Margin 
    
margin: top right bottom left;

  32. Padding 
    
padding: top right bottom left;

  33. Overflow 
    
overflow: hidden;

  34. Visibility 
    
visibility: visible;

  35. Colors

    With the help of the color property, one can give color to text, shape, or any other object.

    Color 
    
color: cornsilk;

  36. Opacity 
    
opacity: 4;

  37. Template Layout

    Specifies the visual look of the content inside a template

    Box-Align 
    
box-align: start;

  38. Box-Direction 
    
box-direction: normal;

  39. Box-Flex 
    
box-flex: normal;

  40. Box-Flex-Group 
    
box-flex-group: 2;

  41. Box-Orient 
    
box-orient: inline;

  42. Box-Pack 
    
box-pack: justify;

  43. Box-Sizing 
    
box-sizing: margin-box;

  44. Max-Width 
    
max-width: 800px;

  45. Min-Width 
    
min-width: 500px;

  46. Max-Height 
    
max-height: 100px;

  47. Min-Height 
    
min-height: 80px;

  48. Table

    Table properties are used to give style to the tables in the document. You can change many things like border spacing, table layout, captain, etc.

    Border-Collapse 
    
border-collapse: separate;

  49. Empty-Cells 
    
empty-cells: show;

  50. Border-Spacing 
    
border-spacing: 2px;

  51. Table-Layout 
    
table-layout: auto;

  52. Caption-Side 
    
caption-side: bottom;

  53. Columns

    These properties are used explicity with columns of the tables, and they are used to give the table an incredible look.

    Column-Count 
    
column-count: 10;

  54. Column-Gap 
    
column-gap: 5px;

  55. Column-Rule-Width 
    
column-rule-width: medium;

  56. Column-Rule-Style 
    
columm-rule-style: dotted;

  57. Column-Rule-Color 
    
column-rule-color: black;

  58. Column-Width 
    
column-width: 10px;

  59. Column-Span 
    
column-span: all;

  60. List & Markers

    List and marker properties are used to customize lists in the document.

    List-Style-Type 
    
list-style-type: square;

  61. List-Style-Position 
    
list-style-position: 20px;

  62. List-Style-Image 
    
list-style-image: url(image.gif);

  63. Marker-Offset 
    
marker-offset: auto;

  64. Animations

    CSS animations allow one to animate transitions or other media files on the web page.

    Animation-Name 
    
animation-name: myanimation;

  65. Animation-Duration 
    
animation-duration: 10s;

  66. Animation-Timing-Function 
    
animation-timing-function: ease;

  67. Animation-Delay 
    
animation-delay: 5ms;

  68. Animation-Iteration-Count 
    
animation-iteration-count: 3;

  69. Animation-Direction 
    
animation-direction: normal;

  70. Animation-Play-State 
    
animation-play-state: running;

  71. Animation-Fill-Mode 
    
animation-fill-mode: both;

  72. Transitions

    Transitions let you define the transition between two states of an element.

    Transition-Property 
    
transition-property: none;

  73. Transition-Duration 
    
transition-duration: 2s;

  74. Transition-Timing-Function 
    
transition-timing-function: ease-in-out;

  75. Transition-Delay 
    
transition-delay: 20ms;

  76. CSS Flexbox

    Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align items vertically and horizantally using rows and columns. Items will "flex" to different sizes to fill the spaces. And overall, it makes the responsive design more manageable.

    Parent Properties (flex container)

    Display 
    
display: flex;

  77. Flex-Direction 
    
flex-direction: row | row-reverse | column | column-reverse;

  78. Flex-Wrap 
    
flex-wrap: nowrap | wrap | wrap-reverse;

  79. Flex-Flow 
    
flex-flow: column-wrap;

  80. Justify-Content 
    
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

  81. Align-Items 
    
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

  82. Align-Content 
    
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;

  83. Child Properties (flex items)

    Order 
    
order: 5; /* default is 0 */

  84. Flex-Grow 
    
flex-grow: 4; /* default 0 */

  85. Flex-Shrink 
    
flex-shrink: 3; /* default 1 */

  86. Flex-Basis 
    
flex-basis: | auto /* default auto */

  87. Flex Shorthand 
    
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

  88. Align-Self 
    
align-self: auto | flex-start | flex-end | center | baseline | stretch;

  89. CSS Grid

    Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layouts more easily and consistently across browsers.

    Parent Properties (Grid container)

    Display 
    
dispaly: grid | inline-grid;

  90. Grid-Template-Columns 
    
grid-template-columns: 12px 12px 12px;

  91. Grid-Template-Rows 
    
grid-template-rows: 8px auto 12px;

  92. Grid-Template 
    
grid-template: none | <grid-template-rows> / <grid-template-columns>;

  93. Column-Gap 
    
column-gap: <line-size>;

  94. Row-Gap 
    
row-gap: <line-size>;

  95. Grid-Column-Gap 
    
grid-column-gap: <line-size>;

  96. Grid-Row-Gap 
    
grid-row-gap: <line-size>;

  97. Gap Shorthand 
    
gap: <grid-row-gap> <gri-column-gap>;

  98. Justify-Items 
    
justify-items: start | end | center | stretch;

  99. Align-Items 
    
align-items: start | end | center | stretch;

  100. Place-Items 
    
place-items: center;

  101. Justify-Content 
    
justify-content: start | end | center | stretch | space-around | space-between;

  102. Align-Content 
    
align-content: start | end | center | stretch | space-around | space-between;

  103. Palce-Content 
    
palce-content: <align-content> <justify-content>;

  104. Grid-Auto-Columns 
    
grid-auto-columns: <track-size>;

  105. Grid-Auto-Rows 
    
grid-auto-rows: <track-size>;

  106. Grid-Auto-Flow 
    
grid-auto-flow: row | column | row dense | column dense;

  107. Child Properties (Grid items)

    Grid-Column-Start 
    
grid-column-start: <number> | <name> | span <number> | span <name> | auto;

  108. Grid-Column-End 
    
grid-column-end: <number> | <name> | span <number> | span <name> | auto;

  109. Grid-Row-Start 
    
grid-row-start: <number> | <name> | span <number> | span <name> | auto;

  110. Grid-Row-End 
    
grid-row-end: <number> | <name> | span <number> | span <name> | auto;

  111. Grid-Column Shorthand 
    
grid-column: <start-line> / <end-line> | <start-line> / span <value>;

  112. Grid-Row Shorthand 
    
grid-row: <start-line> / <end-line> | <start-line> / span <value>;

  113. Grid-Area 
    
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

  114. Justify-Self 
    
justify-self: start | end | center | stretch;

  115. Align-Self 
    
align-self: start | end | center | stretch;

  116. palce-Self 
    
palce-self: center;