function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mohammed ArshadMohammed Arshad 

Help on applying CSS attribute 'style' into <apex:outputText>

I am trying to apply a style in the <apex:outputText> but it doesn't work.
Below is the code:
<apex:outputText  value="Please refer this link for more information <a href =https://www.w3schools.com/>https://www.w3schools.com</a>"/>

So now i wanted to give some css touch to the above hyperlink by changing the
<apex:outputText  value="Please refer this link for more information <a style=color:antiquewhite;text-decoration:underline;padding:42px; href =https://www.w3schools.com/>https://www.w3schools.com</a>"/> etc... but when i try to put the style in the <a> tag it is not working. Can anyone help me on this. 

Thanks 
Best Answer chosen by Mohammed Arshad
kjunkjun
ah ok, how about one of these: 

  
<style>
.a {color: antiquewhite; text-decoration: underline; padding: 42px;}
</style>

<div class="a">
<apex:outputText>Please refer this link for more information</apex:outputText><apex:commandLink action="https://www.w3schools.com" value="https://www.w3schools.com"/>
</div>

<div>
<apex:outputText>Please refer this link for more information</apex:outputText><apex:commandLink action="https://www.w3schools.com" styleClass="a" value="https://www.w3schools.com"/>
</div>

 

All Answers

kjunkjun
Try this:
  
<apex:outputText value="Please refer this link for more information"> <a href="https://www.w3schools.com">https://www.w3schools.com</a></apex:outputText>

 
Mohammed ArshadMohammed Arshad
Thanks for your reply!
I tried as per your suggestion but it didn't work. I have put in this way..
<apex:outputText value="Please refer this link for more information"> <a style=color:antiquewhite;text-decoration-line:underline;padding:60px; href="https://www.w3schools.com">https://www.w3schools.com</a></apex:outputText>
But it throws this error : 
Error: Open quote is expected for attribute "style" associated with an element type "a".
Ajay K DubediAjay K Dubedi
Hi Mohammed,

Try below code: 
<apex:page >
    
    <apex:outputText  value="Please refer this link for more information" />
    <a href = "https://www.w3schools.com" style = "color:antiquewhite; text-decoration:underline; padding:42px;">
        https://www.w3schools.com
    </a>
</apex:page>
    
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
Mohammed ArshadMohammed Arshad
Hi Ajay,

I have applied the above code but that too didn't help and i am on the same page..
Ajay K DubediAjay K Dubedi
Hi Mohammed,

Please try the following (updated) code: (fix of you code) 
<apex:page >
    <apex:outputText  value="Please refer this link for more information"><a style="color:antiquewhite;text-decoration:underline;padding:42px;" href ="https://www.w3schools.com">https://www.w3schools.com</a></apex:outputText> 
</apex:page>
A better way to do the same:
  
<apex:page>  
  
    Please refer this link for more information<br/>  
    <apex:outputLink value="https://www.w3schools.com" id="theLink">www.w3schools.com</apex:outputLink>  
      
</apex:page>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
kjunkjun
ah ok, how about one of these: 

  
<style>
.a {color: antiquewhite; text-decoration: underline; padding: 42px;}
</style>

<div class="a">
<apex:outputText>Please refer this link for more information</apex:outputText><apex:commandLink action="https://www.w3schools.com" value="https://www.w3schools.com"/>
</div>

<div>
<apex:outputText>Please refer this link for more information</apex:outputText><apex:commandLink action="https://www.w3schools.com" styleClass="a" value="https://www.w3schools.com"/>
</div>

 
This was selected as the best answer
Mohammed ArshadMohammed Arshad
Hey kjun,

Thanks for your help!!!!

The issue is resolved now