htmlcsswordpresscustom-wordpress-pages

How can I remove the highlight to make the section look more natural

I'm still in my beginning stages of learning html and css, but I am struggling to find answers for this.

I've modified this section to add in links, but since I did I am not able to remove the green box around the links and make it look more natural. Can anyone help me to guide what I'm doing wrong?

I'm working off of wordpress if that makes any difference.

Here is what it looks like with the below html code: enter image description here

html code:

<p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus libero saepe harum id, animi tenetur itaque vel repellendus temporibus delectus. Sed saepe officia repudiandae quidem blanditiis quam totam eos adipisci.
</p>
<a href="../../contact-us">GET STARTED</a>
<ul class="service-info">
    <li><i class="Defaults-phone"></i><a href="tel:15555555555">555-555-5555</a></li>
    <li><i class="Defaults-comments"></i><a href="https://wa.link/testing">Contact us on WhatsApp</a></li>
    <li><i class="fa fa-envelope"></i><a href="mailto:info@testemail.com">Send us a Message</a></li>
</ul>

I tried adding custom css such as the following and other suggestions I found on stackoverflow without success:

a, a:focus{
  color: inherit;
  border: inherit;
  outline:none;
} 
a:link{
  text-decoration: none;
}

Adding a screenshot of the inspect code if this helps:

enter image description here

*** Update: I was able to get it working from the suggestions but not from the adding to the additional css as I originally thought.

Adding it through inline css seems to work, but now I'm questioning is this really a good practice? Should it be setup for a custom variable and then create a entry in my css file to make it standard? or since I'm only seeing it impact this page, I can leave it as is?

updated code that gives me the result I want:

<p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus libero saepe harum id, animi tenetur itaque vel repellendus temporibus delectus. Sed saepe officia repudiandae quidem blanditiis quam totam eos adipisci.
</p>
<a href="../../contact-us">GET STARTED</a>
<ul class="service-info">
    <li><i class="Defaults-phone"></i><a style="background-color:transparent;background:none;outline:none" href="tel:15555555555">555-555-5555</a></li>
    <li><i class="Defaults-comments"></i><a style="background-color:transparent;background:none;outline:none" href="https://wa.link/testing">Contact us on WhatsApp</a></li>
    <li><i class="fa fa-envelope"></i><a style="background-color:transparent;background:none;outline:none" href="mailto:info@testemail.com">Send us a Message</a></li>
</ul>
Solution

  • color property refers to the color inside the element, usually text color, for the green background color you'll need to define the background-color property, example:

    a, a:focus{
  ...
  background-color: transparent;
  ...
}

    As stated in the comment, for a more specific application of the style it's advised you use more specific selectors or chain of selectors.

    If this doesn't work, then it's probably a parent style overriding your css, you can use background-color: transparent !important; to uptick your css style priority, this should be used as a last resort. It's important to note that different selectors have different priorities, it's more than likely that one of the parents styles has higher priority, element selectors have a low priority when compared with IDs and classes:

    You can either edit the existing style, if you are permitted to do so, and taking side effects into consideration, or compose a selector so that its styles have higher priority in order to override the parent styles.

    Edit:

    I saw you edited the answer stating that you used inline styles to fix the problem, that makes sense since, as seen above, inline styles have the highest priority, wether it's a good solution, it deppends, I would argue against it, for the usual reasons maintainability, reusability, and scalability. If it's a single shot, I could consider leting it slide, but don't make it a habit, it quickly becomes a nightmare for you and for others using the code.

    Note:

    You shouldn't edit the question to add an answer, or to add further questions, if you want to answer your own question, you can, and you should, it is the correct way of doing it. For new questions just post a new question.