Using contentStyle and inlineStyle property to change basic styling of component in ADF Faces

Sharing is Caring

Hello All,
Again a post about ADF Basics for beginners, about contentStyle and inlineStyle property of components.
I have seen lots of thread on OTN about changing the basic styles of the component . for example,

How to change the font size of inputText?
How to change color of inputText/output text ?
How to change color of link or button?

and everyone starts creating a CSS/skin for these minor changes but there is no need for that
The skin should be used for complex styles or you have to apply the same style to all components of your application

If you will read API docs then you will know this, See what docs say about the inlineStyle property-

The CSS styles to use for this component. This is intended for basic style changes; you should use the skinning mechanism if you require any complex style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute.

Difference between contentStyle and inlineStyle –


contentStyle property used to style content part of component like if you want to change color of inputText or any other input component then you have to specify this in contentStyle property of that component

inlineStyle is about the whole component and also available in output (outputText) or collection (table, tree etc) component’s property where contentStyle is not there. This can be used to set width, height, border or color of output components etc.

So this is enough about theory, no one likes theory 😉 , Everyone is looking for some code that is ready to use
Let’s see some practical usage of both properties –

Change font, color, size(width), padding of input components (af:inputText, af:inputDate, af:selectOneChoice etc)-

Used this in contentStyle property of components
and check the output

you can also change input text to uppercase , lowercase, Initcap using contentStyle property, just use any of this –
text-transform:uppercase; // To change in uppercase
text-transform:lowercase; //To change in lowercase
text-transform:capitalize; //To change in initcap

Change properties of output components, color of link/button –

Output components don’t have contentStyle property as there is not content part in the component , here we make use of inlineStyle property
See what happens on applying the same style in outputText and link using inlineStyle

It looks good 🙂 , but the same style doesn’t work for the button because the button has multiple root element (we can only change width, color of text and font of the button but background color and another styling cannot be changed using inlineStyle property)
For more detail about button skinning check – Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Change data collection components (af:table, af:treeTable,etc) height, width –


just write in inlineStyle property like this
background color will be applied on empty area of table and color will be applicable on column header and EmptyText
Remember to set table’s height using inlineStyle ensure that autoHeightRows should be set to -1

In the same way we can change color of columns too, see I have used different background colors (set background-color:colorName; in inlineStyle of af:column) for columns and it looks like this

Now it’s your turn, try more combination on different components. you can do a lot using contentStyle and inlineStyle property. Remember all these changes can be done using skin also but if have some minor changes then why use skin, when framework provides these wonderful properties

Cheers 🙂 Happy Learning

Related Posts

0 thoughts on “Using contentStyle and inlineStyle property to change basic styling of component in ADF Faces”

Leave a Reply

Your email address will not be published. Required fields are marked *