CSS EXAMPLES

Simple CSS examples:

  1. Changing text color:

body {
  color: red;
}

  1. Changing background color:

body {
  background-color: yellow;
}

  1. Adding a border:

img {
  border: 2px solid black;
}

  1. Changing font size:

h1 {
  font-size: 36px;
}

  1. Aligning text:

p {
  text-align: center;
}

  1. Adding padding:

div {
  padding: 20px;
}

Complicated CSS examples

CSS can be used to create complex layouts, animations, and interactions.

  1. Creating a responsive navigation bar with dropdown menus:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
}

.nav-link {
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }

  .dropdown {
    display: block;
  }

  .dropdown-content {
    position: static;
    display: none;
  }
}

  1. Creating a responsive grid layout with CSS Grid:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

.card {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

  1. Creating a complex animation with keyframes:

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  border-top: 4px solid #3498db;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

These examples demonstrate how to change the style for a section on a web page. Please note that each section has a unique ID, and it's important to use the correct ID when applying the style changes. Make sure to double-check the ID before modifying the code to ensure that the changes are applied to the intended section.

Please note, only make edits to the code if you are proficient and comfortable with Shopify's theme code editing. Be aware that Ecomgraduates reserves the right to charge for fixing any bugs or issues that arise from modifications not done by our team. Your understanding and attention to this matter are greatly appreciated.

Last updated