Custom css for a single entry in wordpress

Question

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.

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!

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

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

edited May 23 '17 at 12:23

Community

1
1

answered Feb 25 '16 at 09:24

Shadow_

160
1
14

2

Guys, I guess the OP wants to find out the way to edit pseudo- styles w/o creating child theme and editing original theme files – markoffden Feb 25 '16 at 09:39
`a:hover.green` are you sure on this `selector` – Gautam Jha Feb 25 '16 at 09:53

score 1 · Answer 2 · answered Feb 25 '16 at 09:16

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>

Custom css for a single entry in wordpress

2 Answers2