Let's explore some common CSS examples that you can use to enhance your web projects:
-
Basic Styling:
- Set the background color of an element:
.my-element { background-color: #f0f0f0; }
-
Change text color:
.my-text { color: #333; }
-
Borders:
- Set border width, style, and color:
.my-box { border: 2px solid #ddd; }
-
Margins and Padding:
- Specify margins for each side:
.my-box { margin: 10px 20px; }
-
Set padding for an element:
.my-content { padding: 15px; }
-
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; }
-
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.
Top comments (0)