In this post, we will see how we can change the look and feel of our lightning component with the help of slds and also with our external CSS in the CSS component of the lightning bundle.
1 – Create the lightning component and name it “StyleComponent”
File -> New -> Lightning Component
2 – Copy and paste the below code between the aura:component tags
Now, if you see the preview then the output will look like below
3 – As we have not added any CSS, the output is not looking good. Let’s add slds on the app. Copy and paste the below code.
After saving the application, the preview will automatically be refreshed and you can see the difference between the new and old output.
Whenever you will add extends=”force:slds” line into the lightning application it will change the look and feel of the output.
4 – Now, let’s add some background CSS for the div tag. Open the component and click on style link from the right panel and replace the code with the below CSS.
Use below code for the component
Now, refresh the application you will see the output.
Note: – In style component of lightning bundle we can only use dot notation means we can only use class.
As you can see that there is no margin from the left and from the top. let’s add the CSS for that. Before we add CSS part wrap the whole content and put into the single div tag the outer one.
Use the below CSS
To see the latest output refresh the application and you will see the difference.
If you have any query/suggestion, please come up in the comment section with.
Sharing is Caring 🙂 😉