Design View id elements

Wappler General
1

Hi all,

I have inherited a website where the style sheet uses id tags to style sections within the site, for example;

#hero h1 {
margin: 0;
font-size: 56px;
color: #fff;
}

#hero p {
font-size: 14px;
color: #333;
}

Etc etc

If I were to select an element within the section, say the h1 element, Design View does not recognise any style.

Is there a way around this or for Design View to be able to work with styled id elements?

2

Can you explain this a little more detailed? Maybe show a screenshot explaining the issue.

3

Of course.

The image below shows the <h1> tag selected which is styled by the entry in the style.css;

#hero h1 {
margin: 0;
font-size: 14px;
color: #fff;
font-family: "Poppins", sans-serif;
}

As you can see the Design Panel doesn’t show any styling, it will only detail if the tag has its own class.

style
style1415×521 124 KB

4

This is a class selector:

Screenshot 2023-01-18 at 15.57.41

It will display styles applied to classes.
It won’t display any styles applied like #id h1 { }. You can edit these in the Styles panel:

Screenshot 2023-01-18 at 15.59.02

or create new classes which override the current styles.

5

Yes you can edit in the styles panel but it does not have lovely graphic UI the Design Panel has, any ideas for adding this to the styles panel?