css selectors for styling sections/subsections etc?

[gvarnavi]

I'm using the wolfram-notebook-embedder within a react application to render some notebooks for a class (see e.g. here by clicking the 3rd Wolfram Language tab on the top of the page).

I was wondering how best to style the various sections using css selectors? Inspecting an embedded dummy notebook with various styles, it seems to load various style tags directly (e.g. for a 'Title' section):

<style type="text/css" data-is-wolfram-notebook-style="true">
  .cc11 {
  font-family: 'Source Sans Pro','Lucida Sans',Arial,sans-serif;
  font-size: 44px;
  font-weight: 400;
  font-style: normal;
  color: rgba(204,10,2,1);
  }
  </style>

Presumably one could overwrite these using something like:

.cc11 {
	color: rgba(0,255,0,1) !important;
}

My problem is that the class naming does not appear to be consistent. Even within the same notebook, if I reload a bunch of times the class name for 'Title' jumps around from .cc11 to .cc7, .cc8 etc.

Any ideas on how to proceed?