CSS to change appearance of internal links in specific blocks on a specific page

Hi there,

for the colors first.
Each of those sections sits inside its own parent Container block. If you select that Container block you can set its Link Color to whatever you need. This will override the theme colors for those links.

For the underline - whilst you have those Container blocks selected, go to Advacned > Additional CSS Class(es) and add: remove_link_underline

The you can use this CSS:

.remove_link_underline a {
    text-decoration: none;
}

You can then add the remove_link_underline to any Container block you want to remove its inside link underlines from .

Ahh, I didn't realize you could change the link text within containers. That is simple. Thank you, David!

Regarding the link underlines:

I have added the additional CSS class remove_link_underline to both parent container blocks and implemented the CSS you provided, but they are still appearing.

Any idea what I may be doing incorrectly?

You have a couple of missing } in you Simple CSS. This syntax error is the cause why the code isn’t working.

Try modifying your overall Simple CSS code to something like this:

        @media (max-width: 300px) {
            .wp-block-image .alignright,
            .wp-block-image .alignleft {
                float: none;
                margin: 1em auto;
            }
            .wp-block-latest-posts li {
                text-align: center;
                text-decoration: none;
            }
            /* static color */
            .wp-block-latest-posts li a {
                color: #1A1A1A;
            }
            /* hover color */
            .wp-block-latest-posts li a:hover {
                color: #ccc;
            }
        }
        
        .remove_link_underline a {
            text-decoration: none;
        }

Kindly let us know how it goes.