1. Font size and scale size

    for legibility font should be between 14px -16px on body and heading 1 to 6 should use https://typescale.com/ to scale font fit with your browser.

  2. CSS variables

    you can set and define your primary color on root and other class you can use by function var().

    .main table{
    color: var(--primary);
  3. table with fixed

    using fixed table make you easy when your table have long height.

    table,.main table {
     width: 100%;
    table-layout: fixed;
    overflow: auto;
    max-height: 500px;
    display: block;
  4. Hover

    make style by using hover
    example:when you hover on table tr and it will show background.
    It notify you the point you stay.

    .entry-content tr:hover{
  5. Shadow

    this website https://getcssscan.com/css-box-shadow-examples provide shadow example and you can preview style too.
    generally,we always use shadow on card box and make your website more friendly.

  6. CSS @media Rule

    Hide an element when the browser’s width is 700px wide or less:

    @media screen and (max-width: 700px) {
      .test {
        display: none;
  7. -webkit-line-clamp

    when you have several lines on your card description,you should  truncate texts to make your website better then before.

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;