Activity Forums Salesforce® Discussions What is the use of THIS CSS class in Salesforce?

  • Avnish Yadav

    Member
    August 7, 2018 at 5:49 am

    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.

  • Parul

    Member
    September 28, 2018 at 5:25 pm

    Style your components with CSS.
    Add CSS to a component bundle by clicking the STYLE button in the Developer Console sidebar.
    .THIS {
    background-color: grey;
    }
    <aura:component>
    <div class="white">
    Hello, HTML!
    </div>

    <h2>Check out the style in this list.</h2>

    <ul>
    <li class="red">I'm red.</li>
    </ul>
    </aura:component>

  • William

    Member
    February 27, 2019 at 6:17 am

    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>

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos