Custom style for element <p>

[lori]

I have a general question regarding styles. I have a couple of text fields I want to customize in terms of style. So this works like that in a template element:

<p style="font-weight: 500; font-size: larger; color: rgba(255, 255, 255, 0.5) !important; background-color: transparent !important;">My Text</p>

To avoid changing multiple elements, when for instance I want to change to color, I wanted to move that style to a central definition and refer it. Therefor a have added a a template (to the head section) and added the following:

<style>
	 .custom_group_section {
		font-weight: 500; 
		font-size: larger; 
		color: rgba(255, 255, 255, 0.5) !important; 
		background-color: transparent !important;
	 }
</style>

and then inside the text element and tried:

<p style="custom_group_section">My Text</p>

as well as

<p class="custom_group_section">My Text</p>

But both doesn't work. I am no html expert, can somebody give me a hint how to define such a central style correctly and refer it in a generic element?

[Steve-Mcl]

Hi

@lori

and then inside the text element and tried:

<p style="custom_group_section">My Text</p>

This is not valid (only style attributes go in the style tag)

@lori

as well as

<p class="custom_group_section">My Text</p>

This is correct

@lori

But both doesn't work.

Likely due to specificity. There are already styles applied to all dashboard elements (provided by the dashboard) however your elements class selector .custom_group_section is probably less specific than the built in styles dashboard provides.

Try adding more specificity in the CSS e.g.

<style>
	 .widget > div > div p.custom_group_section {
		font-weight: 500; 
		font-size: larger; 
		color: rgba(255, 255, 255, 0.5) !important; 
		background-color: transparent !important;
	 }
</style>

IMPORTANT My example (.widget > div > div p.custom_group_section) selector above is completely made up. You will need to inspect the thing you are trying to style to determine a valid selector

Essentially, you need to read up a bit on CSS selectors and specificity

Here is a quick how to get any elements selector: How to find a CSS selector? | BrowserStack Docs. but it will give you VERY specific (single target) selector - you need to thin it out.

If you want to check a selector works, put it in the browsers console like this $('div > p.my-selector') and you will instantly see if it selects the things you are wanting to be targeted by your CSS.

[lori]

Hi @Steve-Mcl,

thanks for the quick reply. I have seen that only some of the styles are applied when using my original global style definition. I tried your style definition, but it doesn't work.
I want to use my

styles only on first level stage inside a group.

I will read your recommended links and more about CSS selectors. That way I hope to get it working.

[Steve-Mcl]

@lori

I tried your style definition, but it doesn't work

I'd be very surprised if it did work

@Steve-Mcl

IMPORTANT My example (.widget > div > div p.custom_group_section) selector above is completely made up.

[lori]

I tried to copied the selector on my case but I did't got something suiteable I think.

#Erdgeschoss_Zimmer_Benno_cards > md-card:nth-child(19) > p

I have removed the class section and putted a simple <p> element inside my group. After switching to the chrome dev tools and selecting the

element I copied the selector and got it. Did I unterstand something wrong?

[Steve-Mcl]

@lori

I tried to copied the selector on my case but I did't got something suiteable I think.

Did you test it in the console?

@Steve-Mcl

If you want to check a selector works, put it in the browsers console like this $('div > p.my-selector') and you will instantly see if it selects the things you are wanting to be targeted by your CSS.

@lori

#Erdgeschoss_Zimmer_Benno_cards > md-card:nth-child(19) > p

This selector is extremely specific in that it will only EVER target a p element inside the 19th md-card inside an element explicitly named #Erdgeschoss_Zimmer_Benno_cards

I did explain this before...

@Steve-Mcl

but it will give you VERY specific (single target) selector - you need to thin it out.

And why i said...

@Steve-Mcl

Essentially, you need to read up a bit on CSS selectors and specificity

Look at the source HTML of your element. Look at the defining features of its parent and parents parents. Devise a selector that will be specific but also flexible enough to be re-used on other elements you apply your class to.

[Steve-Mcl]

As a hack, you could simply force it to work (you may not realise for some time why it is a hack, but trust me here (or read up on why !important it is bad)

<style>
	 p.custom_group_section {
		font-weight: 500 !important; 
		font-size: larger !important; 
		color: rgba(255, 255, 255, 0.5) !important; 
		background-color: transparent !important;
	 }
</style>

[TotallyInformation]

Not forgetting that your browser dev tools are made for this kind of issue.

Open up the elements tab, select the P tag you are interested in and look at the Styles panel, it shows you what styles might apply, where they come from and which have been overridden (they are crossed out).

You can also look at the "Computed" panel and get a different view.