New to webdesing, need advice on CSS styling best practices

,
1

Hello everyone,

I’m new to web design and have a basic understanding of HTML and CSS.

I’m building a WooCommerce website using Bricks. Bricks is also new to me; I used Elementor before. I want to style the Products page using custom CSS. I want to style product image, layout for every element of a product(price, title and add to cart alignment etc)

I’m just not sure if I’m doing it the right way and I’m looking for best practices and advice.

For now, I’m using the Page Settings tab to put my CSS code (I wonder if it’s a good place for it). My code looks like this:

.brxe-woocommerce-products ul > li div a img{
	border-radius: var(--border-radius-lg);
}
.brxe-woocommerce-products ul > li > h5 > a {
	color: var(--main-storm-color);  
}
.brxe-woocommerce-products ul > li{
  align-items: center;
  text-align: center;
}
.brxe-woocommerce-products ul > li > h5{
	margin-bottom: auto !important;
}

/*button*/
.brxe-woocommerce-products ul > li > div > a{
	border-radius: var(--border-radius-lg);
  color: var(--main-storm-color) !important;
  background-color: white !important;
  border: 1px solid var(--main-storm-color) !important;
}

Basically, what I’m doing is trying to find a selector using the dev tools in Chrome and assign values to particular properties. Some of them cannot be easily applied, so I use the !important declaration to override them. I know using !important in general isn’t good (or is it okay?), so what would be a better way to do it?

What do you think in general about the approach where I just simply get selectors and reassign values?

Thanks for any advice!

Mikhail

Mikhail