CSS (Cascading Style Sheets) is essential for designing the front end of websites

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.

The above is the detailed content of CSS (Cascading Style Sheets) is essential for designing the front end of websites. For more information, please follow other related articles on the PHP Chinese website!