function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
laurens.brandlaurens.brand 

What is wrong with this CSS

This is the component:

<aura:component implements='force:appHostable'>
    <h1 class="headline">My Lightning Component</h1>
</aura:component>

This is the app:

<aura:application >
    <h1>Hello Lightning App!</h1>
    <c:MyLightningComponent />
</aura:application>

This is the CSS:

.THIS{  
}

h1.THIS.headline {
    font-size:24px;
}

To me it seems to be doing what is it supposed to be doing. Which is "The component must include an H1 tag with a CSS class named 'headline'. The 'headline' CSS class must set a font-size of 24px."
Yet it complains that "The component is not using the correct CSS for the 'headline' class".
Anyone an idea of what I am doing wrong.
Much appreciated in advance.

 
Best Answer chosen by laurens.brand
sfdcdevsfdcdev
Make sure you're creating the css from MyLightningComponent or MyLightningComponent.cmp tab not from MyLightningApp or MyLightningApp.app tab.

All Answers

Mohith Kumar ShrivastavaMohith Kumar Shrivastava
The CSS for top level component will be like below
  
.THIS{

}

THIS.headline{
  font-size:24px;
}

Read more below on this 

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_css.htm
laurens.brandlaurens.brand
I tried that as well and it does not pass. I receive the same error "The component is not using the correct CSS for the 'headline' class"
Mohith Kumar ShrivastavaMohith Kumar Shrivastava
Is your style inside component or application?I assume its inside component and not in app style
laurens.brandlaurens.brand
Inside component.
Mohith Kumar ShrivastavaMohith Kumar Shrivastava
Looks like i missed . in previous one try either of one and should work
  
.THIS{

}

.THIS.headline{
  font-size:24px;
}
or 
.THIS{

}

.THIS. headline{
  font-size:24px;
}

 
laurens.brandlaurens.brand
No still not working. This is a #trailhead challenge. I am not sure if the check performed by Salesforce is correct. It can find the CSS but it complains that the CSS used is not using the correct values or something. Really strange. Hope someone from trailhead can shed some light in this. 
sfdcdevsfdcdev
Make sure you're creating the css from MyLightningComponent or MyLightningComponent.cmp tab not from MyLightningApp or MyLightningApp.app tab.
This was selected as the best answer
Thorsten KöbeThorsten Köbe
Hi Laurens,

if your still interested, for me the following worked
  
.THIS .headline {
	    font-size:24px;
	}
<aura:component implements="force:appHostable">
    <h1 class="headline">MyLightningComponent</h1>
</aura:component>


 
Lis MurphyLis Murphy
Thank you that worked.