CSS class ordering

Question

Hello,
I am using JDeveloper 11.1.1.6 and Oracle ADF Skin Editor 11.1.2.3. I have browsed the community sites and not found a question / answer about the issue I'm facing.
I have been able to create custom CSS classes in my custom skin and apply them to my WCP project via JDeveloper. My custom CSS class (.HeaderTitle1) is being applied to the ADF component (outputText) via the styleClass property. I can see (in my browser) that my custom class and the built-in ADF class are being applied to the outputText component.
The problem is that the built-in ADF class takes precedence over my class. Based on CSS rules (see this example), this is because the ADF class is defined later in the CSS file (or loaded later if in a separate file). I've looked at the CSS file in the Chrome Developer Tools, and I can see that there is just 1 CSS file and that my custom CSS classes are in the middle of the file with ADF classes before and after them.
Question: Is there any way I can control the order of the declarations in the CSS file? How can I ensure that my custom CSS classes will take precedence?
Thanks!

Answer 1

Sure, Alejandro. It's actually not an outputText (that's one of our use cases), but applying a custom style to the goLink component that is giving us grief.
Here is my css:
.HeadingTitle1
  font-weight: bold;
  font-size: 24px;
  text-transform: uppercase;
Here's how I'm referencing this css in my .jsp file:
<af:goLink text="My Loan" id="gl1" styleClass="HeadingTitle1" />
The result (via Google Chrome Tools):
<a id="pt1:r1:0:gl1" class="HeadingTitle1 af_goLink" href="edit-address.jspx">Edit Address</a>
Hmm, actually it looks like I've solved my own problem. Looking at the source of the CSS file, I can see that the HeadingTitle1 class is defined AFTER than the af_goLink class (containing the properties I'm concerned with):
.af_goLink
     font-size: 15px;
.HeadingTitle1
  font-size: 24px;
Based on this CSS demo, I thought this problem was that the af_goLink class is defined later in the CSS file, so that it took precedence over my custom CSS class, but it looks like it's behaving the way I need / expect it to.
Not sure why I wasn't seeing this all along. Thanks for the help, Alejandro and Frank.