Let's explore some common CSS examples that you can use to enhance your web projects:

1. Basic Styling:

   • Set the background color of an element:

    .my-element {
      background-color: #f0f0f0;
    }
   

• Change text color:
  

   .my-text {
     color: #333;
   }
  

1. Borders:

   • Set border width, style, and color:

    .my-box {
      border: 2px solid #ddd;
    }
   

2. Margins and Padding:

   • Specify margins for each side:

    .my-box {
      margin: 10px 20px;
    }
   

• Set padding for an element:
  

   .my-content {
     padding: 15px;
   }
  

1. Backgrounds:

   • Set a background color for the entire page:

    body {
      background-color: #f9f9f9;
    }
   

• Use an image as the background:
  

   .hero-section {
     background-image: url('path/to/image.jpg');
     background-size: cover;
   }
  

1. Responsive Design:

   • Use media queries to adjust styles based on screen size:

    @media screen and (max-width: 768px) {
      .my-element {
        font-size: 14px;
      }
    }
   

Remember to replace the class names (e.g., .my-element) with your actual HTML elements.