Oracle Apex: Can not call StaticID in Page's Inline CSS

Question

I'm trying to touch up my Title Bar with some custom CSS. On the title region, I've set a static id of "Homepage-Title" Page Designer Showing Static ID. Then I went to the Inline CSS section of the page attributes and added this CSS which calls my static id Inline CSS Calling My Static ID. Yet no matter what I type in this CSS code, the region title still looks the same Run-Time View. Any suggestions for a CSS noob?

Answer 1

In this cases is very useful to use the browser built in inspector, so right click on the element and inspect.

The code created for the title bar region is:

...
<div id="Homepage-Title" class="t-BreadcrumbRegion t-BreadcrumbRegion--showBreadcrumb t-BreadcrumbRegion--useRegionTitle lto137080881619071323_0"> 
  <div class="t-BreadcrumbRegion-body">
    <div class="t-BreadcrumbRegion-breadcrumb">
      
    </div>
    <div class="t-BreadcrumbRegion-title">
      <h1 class="t-BreadcrumbRegion-titleText">New</h1>
    </div>
  </div>
  <div class="t-BreadcrumbRegion-buttons"></div>
</div>
...

Notice that the ID is set to the region div. So your CSS should look something like:

#Homepage-Title .t-BreadcrumbRegion-titleText {
    color: red;
    font-weight: bold;
    font-size: 24px;
}