Custom css for a single entry in wordpress

0 Views

I am styling a landing page for a facebook campaign on a wordpress website. It is not my own website and I do not want to change in the general css for the whole website when I style the landing page. Therefore I’m styling all the elements of my entry right in the text editor for that entry, if that makes sense.

When people click the link on facebook they get to the page I’m making. Basically the page should consist of two buttons that redirects people further on the page. I styled two anchor tags like squared buttons and so far so good, but to really get the “clickable” feel I want the background to change when the a tag is hovered.

Read More

Here is how I created the buttons: 

<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>

If I had a stylesheet I could just style the a:hover with another background color and I would be done, but since I’m styling the individual elements on the page I dont know how to style the :hover property of the element within style="".

How do I style the :hoverproperty of an html element right in html? Or is there a way to create a stylesheet inside of the entry in wordpress?

I’ve tried to add this in to the entry, but it did not work: 

<style media="screen" type="text/css">
.green a:hover {background-color: #799f34;}
.blue a:hover {background-color: #2c8cba;}
</style>

Could someone point me in the right direction? Thanx!

Post Views: 0

Related posts

2 comments

  1. You need to add !important to your CSS rules to override backgroound-color directly in HTML.

    a:hover.green  {background-color: #799f34!important;}
a:hover.blue {background-color: #2c8cba!important;}

    If OP wants to do it in HTML, not in CSS, there is some examples I found: exaple one and related post

  2. I think you should put these code in any other block/ div which will identify this page from the rest of the page. i create a snippet of your code this will clear everything to you. 

    #land-pg .green:hover {background-color: #799f34 !important;}
#land-pg .blue:hover {background-color: #2c8cba !important;}
    <div id="land-pg">

<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>

</div>
ANOTHER SAME DIV BELOW which are not affected
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>

<a class="blue" style="background-color: #35a8e0; display: inline-block; 
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>

Comments are closed.