Locating ID to change background colour of rows in CSS

Hi ​@sk8coach 
Apologies I’ve had a period of leave and then some busy projects on the go.

For this page you want to replicate you will need to set up your page with full width rows.
HTML/WYSIWYG
Catalog
HTML/WYSIWYG
Catalog

inside your HTML you will have something like the following:
(all the below will just be for the widgets highlighted in bold above)
 

<div class="custom-block-full-width blue-block">
<h2 class="PHX-h2 PHX-generic-light">Get started</h2>
<p class="body-p">YOUR TEXT HERE</p>
    
  <div class="PHX-h3 catalog-callout-header PHX-generic-light">Check out the courses:
</div>
</div>

<!-- split for next block-->
<!-- catalog widget goes here→


In the above you have the following 6 elements:
custom-block-full-width
blue-block
PHX-h2
PHX-generic-light
body-p
PHX-h3
catalog-callout-header

You then need to build these elements in your CSS (change the styles and colors as you see fit):
 

.custom-block-full-width{
  max-width: 1248px;
  margin-top: 60px;
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
}

.blue-block{
  background-color: #002B80;
  color: white;
}

.PHX-h2{
  font-family: Inter, nunito, !important;
  font-size: 48px !important;
  line-height: 56px !important;
  letter-spacing: -2% !important;
  margin: 0px !important;
  font-weight: 400 !important;
}

.PHX-generic-light{
  color: #ECE9E1 !important;
}

.PHX-h3{
  font-family: Inter, nunito,;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 40px !important;
}

.catalog-callout-header{
  margin-top: 36px;
}

.body-p{
  font-size: 16px !important;
  line-height: 24px !important;
}

Now you need to made edits to your widgets on your page (change the page numbers and widget numbers for your page’s)

 

/*sets appearance of Essentials catalog*/
#doc-page-123 #doc-widget-123 {
  background-color: #002B80;
    max-width: 1248px;
    margin-left: auto;
    margin-right: auto;
    padding: 100px 24px 24px 24px;
    border-radius: 16px;
    margin-top: -130px;
    z-index: 0;
}


/* Set Essentials catalog widget title to white */
#doc-page-123 #doc-widget-123 .common-widget-title {
    color: white !important;
}

/* Set Essentials catalog total count text to white */
#doc-page-123 #doc-widget-123 .course-catalog-total-count {
    color: white !important;
}

/* HIDE Essentials CATALOG SEARCH BAR */
#doc-page-123 #doc-widget-123 .ui-data-browser-controls-bar {
    display:none !important;
}


/*sets Essentials description to higher z-index so that it pops out from behind Essentials catalog - replace with your HTML widget #*/
#doc-page-123 #doc-widget-122 {
  z-index: 5;
}

Once you are happy with the outcome, create the elements you need for the next widgets moving down the page.

Let me know how you get on!