CSS Examples

CSS is essential for creating visually appealing, functional, and interactive websites. In this guide, we’ll explore practical CSS examples that demonstrate common techniques used in web design. These examples are beginner-friendly and can help you understand how to style and structure elements effectively.

For more coding tutorials, visit The Coding College, your one-stop resource for learning web development!

CSS Example 1: Styling a Basic Button

Buttons are a crucial part of user interaction. Let’s style a simple button with CSS.

HTML:

<button class="btn">Click Me</button>

CSS:

.btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.btn:hover {
  background-color: #45a049;
}

Explanation:

• The background-color property sets the button’s color.
• border-radius creates rounded corners.
• The :hover pseudo-class changes the button’s color when hovered over.

CSS Example 2: Creating a Responsive Layout

Responsive design ensures your website looks good on all devices.

HTML:

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.box {
  flex: 1 1 calc(33.33% - 20px); /* Adjust width */
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
  border: 1px solid #ddd;
}

@media (max-width: 768px) {
  .box {
    flex: 1 1 100%;
  }
}

Explanation:

• display: flex creates a flexible layout.
• flex-wrap: wrap ensures the boxes wrap to the next line if necessary.
• The @media rule adjusts the layout for smaller screens.

CSS Example 3: Styling a Navigation Bar

Navigation bars are an integral part of website navigation.

HTML:

<nav>
  <ul class="nav-bar">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

CSS:

.nav-bar {
  display: flex;
  list-style: none;
  padding: 0;
  background-color: #333;
  margin: 0;
}

.nav-bar li {
  margin: 0;
}

.nav-bar a {
  display: block;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}

.nav-bar a:hover {
  background-color: #575757;
}

Explanation:

• The display: flex property aligns navigation items horizontally.
• The :hover pseudo-class adds an interactive highlight effect.

CSS Example 4: Adding Shadows to a Box

Shadows add depth to your design.

HTML:

<div class="shadow-box">This is a box with a shadow.</div>

CSS:

.shadow-box {
  background-color: white;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid #ddd;
}

Explanation:

• The box-shadow property creates a shadow effect with offset, blur radius, and color.

CSS Example 5: Styling Text with Shadows

You can also apply shadows to text.

HTML:

<h1 class="text-shadow">CSS is Amazing!</h1>

CSS:

.text-shadow {
  font-size: 36px;
  color: #333;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Explanation:

• The text-shadow property creates depth by adding a shadow to the text.

CSS Example 6: Animating an Element

CSS animations make websites more engaging.

HTML:

<div class="animated-box"></div>

CSS:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

Explanation:

• The @keyframes rule defines the animation’s key states.
• The animation property applies the animation to the element.

CSS Example 7: Styling a Gradient Background

Gradient backgrounds are modern and visually appealing.

HTML:

<div class="gradient-bg">Beautiful Gradient</div>

CSS:

.gradient-bg {
  padding: 20px;
  text-align: center;
  color: white;
  background: linear-gradient(to right, #4CAF50, #2196F3);
}

Explanation:

• linear-gradient creates a smooth transition between colors.

Conclusion

These examples illustrate the versatility of CSS and its practical applications in web design. Whether you’re creating buttons, layouts, or animations, CSS provides the tools you need to bring your ideas to life.

Explore more tutorials and learn web development at The Coding College, where coding meets creativity!