What is the use of THIS CSS class in Salesforce?

Hello Prachi,

All top-level elements in a component have a special THIS CSS class added to them. This, effectively, adds namespacing to CSS and helps prevent one component's CSS from overriding another component's styling. The framework throws an error if a CSS file doesn't follow this convention.

Thanks.

All top-level elements in a component have a special THIS CSS class added to them. This, effectively, adds namespacing to CSS and helps prevent one component's CSS from overriding another component's styling. The framework throws an error if a CSS file doesn't follow this convention.

It’s easy to style a Visualforce page, either by mimicking the look and feel of a standard Salesforce page, or by using your own stylesheets or content types.

Many Visualforce components have a style or style Class attribute. Defining either of these attributes allows you to associate CSS code with the component. Custom CSS code enables you to change the default visual style of a component, including its width, height, color, and font.

Example

<apex:page standardController=”Account” showHeader=”false” tabStyle=”account” >
    <style type=”text/css”>
        .asideText { font-style: italic; }
    </style>
    <apex:outputText style=”font-weight: bold;” value=”This text is styled By CSS.”/>
    <apex:outputText styleClass=”asideText” value=”This text is styled via a stylesheet class.”/>
</apex:page>