CSS applied to the elements in lightning components

Question

html element in component : sample.cmp

<div class="slds-text-heading--large heading">
    Activity Dashboard
</div>

sample.css

.THIS .heading{
    padding: 1rem;
    border-bottom: 2px solid #d2522a;
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: #f9f9f9;
}

I have include this component in a lightning app. The problem is, above css is not applied to the div with class 'heading'. Also, it is not shown in Google chrome console styles. I had to add inline style to the div to make it work. But I cannot add inline css to every element because this is happening with other elements too. Am I missing something?

Answer 1

<div class="slds-text-heading--large heading">
    Activity Dashboard
</div>

if your div is top level element then you have to use

.THIS.heading

in your stylesheet. salesforce documentation