How to style for an individual page in a website

Hi,
I like to inform you that I have made a website which has 3 pages. I just use one style.css for all pages due to same design except one page named video.html where I use social buttons (FACEBOOK AND Google+ only)

The problem is when I gave styles for social buttons in style.css, it didn’t work. But when I gave style in <head> section of video.html page it worked properly. Can you please tell me, why it’s happen?

I want to give all styles only using style.css. How it’s possible?

Here is the code:

<div class=“social_profiles”>
<a href=“”><img src=“images/g_plus_1.png” alt=“” /></a>
<a href=“”><img src=“images/g_plus_2.png” alt=“” /></a>
</div>

<style type=“text/css”>
.social_profiles {position:fixed;width:48px;right:15px;top:50%;background:#fff;padding-top:10px;}
.social_profiles img {width:48px;padding-bottom:15px;}
</style>

No more, I am waiting for your kind response.

It’s probably because there are styles later in your stylesheet that override these rules. It would probably work if you put those styles at the end of your style sheet.

We can’t help much more without a link to the site.

Thank you so much for spending your valuable time for reply. I honestly say that nobody would ever tell me before about it like you. I am very glad and take it seriously as a result too. I hope you should continue help me and others in future as well.