Jump to content
#FlattenTheCurve ×
Mugan

Override CSS on an echo

Recommended Posts

I have a function which echos an array output, which creates links on a page related to that page. It all works well, but the CSS is making the links blue and purple as standard, and I want to overwrite this to make the links white. What can I add to the code to overwrite the style of the echo? The font size is working, but the colour is being overridden.

The code I currently have is:

    echo "<p> <font color='ffffff' size='4pt'>$echo</font></p>";

 

What am I doing wrong?

Share this post


Link to post
Share on other sites
Posted (edited)

Don't use deprecated html markup, such as font color. Use style attribute.

echo "<p style='font-size:4pt; color:#ffffff'>$echo</p>";

or define a class for those links in your css

.mylink {
    font-size: 4pt;
    color: #FFFFFF;
}

then

echo "<p class='mylink'>$echo</p>

NOTE: I have no way of knowing what $echo contains. If it contains <a> tag then the styling will need to be applied there and not to the <p>

Edited by Barand

Share this post


Link to post
Share on other sites

Thanks Barand, setting up the class worked perfectly!

Share this post


Link to post
Share on other sites

Are these links appearing in a particular section (e.g. page footer) of the website? If so, the styles could also be applied to all links in that section. That way you don't need to create extra classes. For example, if your links are in an HTML5 footer tag:

<footer>
	<p class="mylink"><?=$echo?></p>
</footer>

You could style the links with the following:

footer a {
    font-size: 4pt;
    color: #FFFFFF;
}

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.