You are currently viewing CSS Styles Examples

CSS Styles Examples

CSS (Cascading Style Sheets) is a fundamental technology used in web design to control the visual presentation of HTML elements. By defining styles such as colors, fonts, layouts, and animations, CSS transforms plain HTML into visually appealing and user-friendly websites.

Using CSS styles effectively enhances:

  • Website Appearance – Consistent branding, readability, and aesthetic appeal.
  • User Experience – Improved navigation, responsiveness, and interactivity.
  • Performance – Optimized loading times with clean, reusable code.

In this guide, we’ll explore practical CSS style examples to help you master styling techniques from basic text formatting to advanced animations. Whether you’re a beginner or an experienced developer, these examples will provide valuable insights for creating modern, dynamic web designs. If you’re ready to take your front-end development skills to the next level, join our software development course in Kenya for hands-on, real-world training.

Basic CSS Styles Examples

If you’re new to CSS, these basic styling properties are the perfect place to start. They help you control how text and elements appear on your web page.

1. Text Color and Background Color

You can easily change the color of text and the background of elements using color and background-color.

p {

  color: #333; /* Text color */

  background-color: #f0f0f0; /* Light grey background */

}

2. Font Family and Font Size

Customize the appearance of text with different fonts and sizes:

h1 {

  font-family: 'Arial', sans-serif;

  font-size: 32px;

}

You can use web-safe fonts or link to Google Fonts for more variety.

3. Padding, Margin, and Border

These properties control spacing and borders around elements:

  • div {
    
      padding: 20px;      /* Space inside the element */
    
      margin: 10px;       /* Space outside the element */
    
      border: 2px solid #000; /* Solid black border */
    
    }

    Padding is the space inside the element, between the content and the border.

  • Margin is the space outside the element, pushing it away from other elements.
  • Border outlines the element.

4. Text Alignment and Decoration

Adjusts how your text is displayed and styled:

h2 {

  text-align: center;         /* Centers the text */

  text-decoration: underline; /* Underlines the text */

}

You can also use text-decoration: none; to remove underlines from links or text-align: right; to align text to the right.

CSS Styles Examples for Layout

CSS layout techniques help you structure and organize content on your web pages. Here are the most commonly used layout methods:

1. Flexbox Layout

Flexbox is a powerful layout tool that makes it easy to align and distribute space among items in a container.

.container {

  display: flex;

  justify-content: space-between; /* Distributes items with space between */

  align-items: center;            /* Vertically centers items */

}
<div class="container">

  <div>Item 1</div>

  <div>Item 2</div>

  <div>Item 3</div>

</div>

Perfect for one-dimensional layouts (rows or columns).

2. Grid Layout

CSS Grid is great for building two-dimensional layouts (rows and columns).

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr); /* Three equal columns */

  gap: 20px; /* Space between grid items */

}
<div class="grid-container">

  <div>Box 1</div>

  <div>Box 2</div>

  <div>Box 3</div>

</div>

Grid is ideal for more complex designs like galleries and dashboards.

3. Float and Clear

Before Flexbox and Grid, float was commonly used to place elements side by side.

.left-box {

  float: left;

  width: 50%;

}

.right-box {

  float: right;

  width: 50%;

}

.clearfix::after {

  content: "";

  display: table;

  clear: both;

}
<div class="clearfix">

  <div class="left-box">Left</div>

  <div class="right-box">Right</div>

</div>

Use clear: both; to prevent layout issues when using floats.

4. Positioning (Relative, Absolute, Fixed, Sticky)

CSS positioning lets you place elements precisely where you want.

.relative-box {

  position: relative;

  top: 20px;

  left: 10px;

}

.absolute-box {

  position: absolute;

  top: 0;

  right: 0;

}

.fixed-box {

  position: fixed;

  bottom: 0;

  right: 0;

}

.sticky-box {

  position: sticky;

  top: 0;

}
  • Relative: Moves element relative to its normal position.
  • Absolute: Positions element relative to its nearest positioned ancestor.
  • Fixed: Stays in place even when you scroll.
  • Sticky: Sticks to a position when scrolling until a boundary is reached.

CSS Styles for Buttons

Well-designed buttons are key to user interaction. CSS lets you enhance buttons with subtle effects and styles to make them visually appealing and interactive.

1. Hover Effects

Add interactivity by changing the button’s appearance when a user hovers over it.

.button-hover {

  background-color: #007BFF;

  color: white;

  padding: 10px 20px;

  border: none;

  cursor: pointer;

  transition: background-color 0.3s ease;

}

.button-hover:hover {

  background-color: #0056b3;

}

Tip: Use transition for smooth effects.

2. Rounded Corners

Give buttons a softer look with the border-radius property.

.button-rounded {

  background-color: #28a745;

  color: white;

  padding: 10px 20px;

  border: none;

  border-radius: 12px;

}

You can use border-radius: 50px; for pill-shaped buttons.

3. Gradient Background

Make buttons more eye-catching with gradient backgrounds.

.button-gradient {

  background: linear-gradient(to right, #ff7e5f, #feb47b);

  color: white;

  padding: 10px 20px;

  border: none;

  border-radius: 8px;

}

You can change the direction and colors for endless variations.

4. Shadow Effects

Add depth and dimension with box-shadow.

.button-shadow {

  background-color: #6c63ff;

  color: white;

  padding: 10px 20px;

  border: none;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}

Combine shadows with hover effects for a pressed or lifted look.

CSS Styles for Images

Images are a core part of web design, and CSS can help style them beautifully while maintaining performance and responsiveness.

1. Border Radius (Circular Images)

Create round or circular images using the border-radius property:

.img-circle {

  width: 150px;

  height: 150px;

  border-radius: 50%;

  object-fit: cover;

}
<img src="profile.jpg" class="img-circle" alt="Profile Picture">

Use object-fit: cover to ensure the image doesn’t appear stretched.

2. Box Shadow

Add a subtle shadow around your images for a polished look:

.img-shadow {

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  border-radius: 10px;

}
<img src="landscape.jpg" class="img-shadow" alt="Landscape">

This gives depth and separates the image from the background.

3. Hover Zoom Effect

Make your images interactive by zooming in slightly on hover:

.img-zoom {

  transition: transform 0.3s ease;

}

.img-zoom:hover {

  transform: scale(1.05);

}
<img src="product.jpg" class="img-zoom" alt="Product">

You can adjust the scale() value for a more dramatic zoom.

4. Responsive Image Styling

Ensure your images adapt to different screen sizes:

.img-responsive {

  width: 100%;

  height: auto;

  max-width: 100%;

}
<img src="banner.jpg" class="img-responsive" alt="Responsive Banner">

This makes sure images scale within their containers without overflowing.

CSS Styles Examples for Forms

Styling form elements can significantly improve user experience. Here are some CSS styles to make your forms modern and user-friendly:

1. Styled Input Fields

Clean and simple input fields improve readability and focus:

.input-field {

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 6px;

  width: 100%;

  box-sizing: border-box;

  font-size: 16px;

}
<input type="text" class="input-field" placeholder="Enter your name">

2. Custom Checkboxes and Radio Buttons

Use CSS to give checkboxes and radio buttons a unique look:

.custom-checkbox input[type="checkbox"] {

  appearance: none;

  width: 20px;

  height: 20px;

  border: 2px solid #007BFF;

  border-radius: 4px;

  background-color: white;

  cursor: pointer;

  position: relative;

}

.custom-checkbox input[type="checkbox"]:checked::before {

  content: '✔';

  position: absolute;

  left: 3px;

  top: -2px;

  color: #007BFF;

  font-size: 16px;

}
<label class="custom-checkbox">

  <input type="checkbox"> Subscribe

</label>

Same logic can be applied to radio inputs by adjusting shape with border-radius: 50%;.

3. Submit Button Styling

Make your submit button stand out with bold colors and subtle effects:

.submit-btn {

  background-color: #28a745;

  color: white;

  padding: 12px 25px;

  border: none;

  border-radius: 6px;

  font-size: 16px;

  cursor: pointer;

  transition: background-color 0.3s ease;

}

.submit-btn:hover {

  background-color: #218838;

}
<button type="submit" class="submit-btn">Submit</button>

4. Focus and Active States

Help users stay oriented by styling focus/active states:

.input-field:focus {

  border-color: #007BFF;

  outline: none;

  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);

}
<input type="email" class="input-field" placeholder="Email address">

This adds accessibility and visual feedback as users navigate your form.

CSS Animation Examples

CSS animations help bring your website to life by adding motion and interactivity. Here are some commonly used CSS animation techniques:

1. Hover Transitions

Smooth transitions when hovering over elements like buttons or cards:

.card {

  background: #fff;

  padding: 20px;

  border-radius: 12px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 16px rgba(0,0,0,0.2);

}

2. Keyframe Animations

Use @keyframes to define custom animations like bouncing or rotating:

@keyframes bounce {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-20px); }

}

.bounce-box {

  animation: bounce 1s infinite;

}
<div class="bounce-box">Bouncing</div>

You can control duration, delay, direction, and repetition.

3. Animated Loaders or Spinners

Create simple spinners using border and keyframe rotation:

.loader {

  width: 40px;

  height: 40px;

  border: 4px solid #f3f3f3;

  border-top: 4px solid #3498db;

  border-radius: 50%;

  animation: spin 1s linear infinite;

}

@keyframes spin {

  to { transform: rotate(360deg); }

}
<div class="loader"></div>

Lightweight and doesn’t require JavaScript.

4. Fade-in and Slide-in Effects

Add soft entrance animations when elements appear on the screen:

.fade-in {

  opacity: 0;

  animation: fadeIn 2s forwards;

}

@keyframes fadeIn {

  to { opacity: 1; }

}

.slide-in {

  transform: translateX(-100px);

  opacity: 0;

  animation: slideIn 1s forwards;

}

@keyframes slideIn {

  to {

    transform: translateX(0);

    opacity: 1;

  }

}
<div class="fade-in">Hello, I faded in!</div>

<div class="slide-in">I slid in from the left!</div>

Perfect for page loads, scroll-based reveals, and user attention-grabbing content.

Responsive CSS Examples

Responsive design ensures your website looks great on all devices phones, tablets, and desktops. Below are key CSS strategies to make your layout adapt smoothly to different screen sizes:

1. Media Queries

Media queries apply styles based on device width or other conditions:

/* Default styles (mobile-first) */

.container {

  font-size: 16px;

}

/* Styles for tablets and above */

@media (min-width: 768px) {

  .container {

    font-size: 18px;

  }

}

/* Styles for desktops */

@media (min-width: 1024px) {

  .container {

    font-size: 20px;

  }

}

Use min-width for mobile-first design and max-width for desktop-first.

2. Mobile-First Design

Start with styles for small screens, then scale up:

.button {

  display: block;

  width: 100%;

}

/* Larger screens */

@media (min-width: 768px) {

  .button {

    display: inline-block;

    width: auto;

  }

}

This approach ensures your site works well on mobile by default.

3. Responsive Navigation Bar

Adapt your navbar layout depending on screen size:

.navbar {

  display: flex;

  flex-direction: column;

}

@media (min-width: 768px) {

  .navbar {

    flex-direction: row;

    justify-content: space-between;

  }

}

You can enhance it with a hamburger menu using JavaScript or CSS tricks for toggling.

4. Hiding and Showing Elements Based on Screen Size

Hide or show elements depending on the viewport:

.mobile-only {

  display: block;

}

.desktop-only {

  display: none;

}

@media (min-width: 768px) {

  .mobile-only {

    display: none;

  }

  .desktop-only {

    display: block;

  }

}

CSS Variables and Custom Properties

CSS Variables, also known as custom properties, are a powerful feature in modern CSS. They allow you to store values in reusable variables and apply them throughout your stylesheet. This makes your CSS more maintainable and easier to update. Learn more in the official W3C Working Draft on CSS Custom Properties, which introduces the syntax (e.g. --var-name) and explains how var() Supports cascading, inheritance, and fallback values, enabling scalable and dynamic styling.

1. Introduction to CSS Variables

CSS Variables are defined using the prefix. They can hold values like colors, fonts, dimensions, and more. Once defined, you can reuse these variables in your stylesheets, making it easier to make global design changes.

2. Example of Defining and Using Variables

Here’s a simple example of how to define and use CSS variables:

/* Defining CSS Variables */

:root {

  --primary-color: #3498db;

  --secondary-color: #2ecc71;

  --font-size: 16px;

  --border-radius: 8px;

}

/* Using CSS Variables */

body {

  font-size: var(--font-size);

  background-color: var(--primary-color);

  color: white;

}

button {

  background-color: var(--secondary-color);

  color: white;

  padding: 10px 20px;

  border: none;

  border-radius: var(--border-radius);

  cursor: pointer;

}

button:hover {

  background-color: var(--primary-color);

}

Key Points:

  • :root selector: It’s where you define global variables, and it allows you to access them throughout your document.
  • var() function: This is how you reference and apply the value of the variable.

Why Use CSS Variables?

  • Reusability: Once a variable is defined, you can use it anywhere in your CSS.
  • Easier Updates: Updating a variable’s value automatically updates all instances where it’s used.
  • Dynamic Changes: CSS variables can be dynamically updated using JavaScript.

Why Use CSS Styles?

CSS (Cascading Style Sheets) plays a vital role in web development. It’s what brings your HTML content to life visually and ensures your website is both functional and attractive. Here are some of the key reasons why CSS styles are essential:

1. Separation of Structure and Style

HTML is used to define the structure and content of a web page, while CSS is used to define its presentation. By keeping these two layers separate:

  • Your code becomes cleaner and easier to maintain.
  • You can reuse the same CSS styles across multiple pages, saving time and reducing redundancy.
  • It becomes easier to make design changes without touching the underlying content.

2. Responsive and Consistent Design

With CSS, you can create responsive layouts that adapt to different screen sizes, whether it’s desktop, tablet, or mobile.

  • Use media queries to define styles for different devices.
  • Maintain a consistent look and feel across your website with shared stylesheets.
  • Ensure your brand identity remains strong no matter where users view your site.

3. Enhanced User Experience

Well-styled content makes your website more visually appealing and easier to navigate:

  • Use colors, spacing, and typography to guide users’ attention.
  • Add transitions, animations, and interactive effects to engage users.
  • Improve readability and accessibility through thoughtful design choices.

In conclusion, CSS is a powerful tool that brings style, structure, and interactivity to your web pages. From basic text formatting to responsive layouts and dynamic animations, CSS styles allow you to create visually engaging and user-friendly websites. By mastering these examples and applying best practices, you can build websites that look great on any device and deliver a seamless user experience.

Leave a Reply