[Resolved] CSS needs !important or inline style to properly display font color

Home Forums Support [Resolved] CSS needs !important or inline style to properly display font color

Home Forums Support CSS needs !important or inline style to properly display font color

  • This topic has 3 replies, 2 voices, and was last updated 4 years ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1168383
    Paul

    I am intrigued by two things happening in CSS in Cover / Paragraph blocks.

    Challenge 1) The intention is to have “white Text” in an Anchor tag
    <h101><a href="https://xxx.co.uk">Online Shop</a></h101>
    The following CSS seems to work correctly (including the font-size) but “color: #ffffff;” does not work with or without the !important; property”

    h101 {
        display: table;
        margin: 10px auto 0px auto;
        padding: 2px 2px 2px 2px;
        font-variant-caps: all-small-caps;
        color: #ffffff !important;
        font-size: 24px;
        background-color:teal;
        opacity: 0.4;
    	}

    Solution is to add style="color:white;" in the anchor tag itself

    Challenge 2) THe intention is to have Teal Text
    <p class="pj-all-small-caps-48-white">Grass Fed | Certified Organic</p>
    The CSS works with the !important property for color but not without

    .pj-all-small-caps-48-white {
    	display: table;
        margin: 0px auto 0px auto;
        padding: 2px 2px 2px 2px;
        font-variant-caps: all-small-caps;
        color: teal !important;
        font-size: 36px;
        background-color: #ffffff;
        opacity: 0.5;
      }

    Apologies in both cases that I have a solution – but these seem like workarounds – what should I understand about CSS or GP that explains the behaviour?

      1) css controls font size but not color
      2) css controls font color but only with the !important property

    Thank you, Paul
    `

    #1168445
    Leo
    Staff
    Customer Support

    Hi there,

    1. I don’t believe <h101> is valid HTML.

    What if you use a

    and a class instead?

    2. Try adjusting your CSS to this selector:
    p.pj-all-small-caps-48-white

    You can generally see why CSS is not working and what’s overwriting it if you use the browser inspector tool.

    Let me know if this helps ๐Ÿ™‚

    #1205835
    Paul

    Hi Leo – I agree that <h101> doesn’t sound right – but it does work!
    And I have continued with !important
    Thanks for your help.

    #1206212
    Leo
    Staff
    Customer Support

    No problem ๐Ÿ™‚

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.