Change CSS of grid view (Not just for a field) in Drupal 7

Question

I designed a grid of 3 columns in Drupal 7 using view. Below is the default outcome-

It doesn't look beautiful. Hence I want to change the css for each row and column, something like following-

I already have awards and award-list class defined inside style file. But I don't know how to configure the view, so that it uses these class instead of default classes.

Notice carefully the first image, in which I am able to add the css class awards (in the first line div). Also I am able to add css to each td element. This is perfectly fine. The problem is that td has some more parameters defined such as background, color, text-align, border etc, which I don't need for this view. Also there are few more unwanted attributes defined for table class view-view-grid cols-3. These elements are background and border, which I don't want for this view.

I found out a workaround, in which I redefine all these attributes inside style.css and I changed the border from 1px to 0px etc. See below the css, which I appended in style.css-

.awards table{
  background: #BAF5D9;
  border: 0px;
}

.awards td{
  background: #BAF5D9;
  color: #333;
  text-align: center;
  padding: 0px;
  border: 0px;
}

Here #BAF5D9 is background color of the theme. You can notice that it not a proper way to redefine. as the css is getting bigger.

I want to configure this view, in such a way, so that these attributes don't be generated.

Please have a look. I really appreciate your help.

Answer 1

You can add classes to view https://www.ostraining.com/blog/drupal/css-views/

Also see: How to add CSS classes to a Views-generated block? (NOT to its generated content, the block itself!)