Login | Register | FAQ
Anonymous

How to make style sheet only for the body section

+ Post a reply

1, 2


How to make style sheet only for the body section

by jayavinoth » Tue May 17, 2011 2:41 pm

Hi guys,
I want to apply style sheet only for the body section and not for header and footer. this is my website http://www.solvedhow.com/How+to+Lose+Weight-5.html , in this I tried to apply the following style sheet for each page, with different colors. But the links in headers and footers are also changed. Please help me to solve this problem.
<style>
<!--A:link { text-decoration: none; color: orange }
A:active { text-decoration: none; color: orange }
A:visited { text-decoration: none; color: orange }
A:hover { text-decoration: underline; color: orange }-->
</style>


Check my website and see the live problem.

Thanks in advance...
User avatar

jayavinoth

  • Posts: 65
  • Joined: Tue May 17, 2011 2:36 pm

Re: How to make style sheet only for the body section

by HTML.net » Tue May 17, 2011 6:22 pm

Hi,

Try this:

#body_area a:link { text-decoration: none; color: orange }
#body_area a:active { text-decoration: none; color: orange }
#body_area a:visited { text-decoration: none; color: orange }
#body_area a:hover { text-decoration: underline; color: orange }

And read more about grouping of elements in CSS here: http://html.net/tutorials/css/lesson8.php

All the best,

- Andreas, HTML.net
User avatar

HTML.net
Site Admin

  • Posts: 1184
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: How to make style sheet only for the body section

by HTML.net » Tue May 17, 2011 8:29 pm

Hi CubeSquare

You are right, this would sufficient:

#body_area a { text-decoration: none; color: orange }
#body_area a:hover { text-decoration: underline; color: orange }

And you don't need semicolon after the last declaration. It's optional.

- Andreas
User avatar

HTML.net
Site Admin

  • Posts: 1184
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: How to make style sheet only for the body section

by jayavinoth » Wed May 18, 2011 3:57 am

I used this but not working. I want to change the color of the link in body for each page.
<style>
#body_area a{ text-decoration: none; color: orange }
#body_area a:hover { text-decoration: underline; color: orange }
</style>
User avatar

jayavinoth

  • Posts: 65
  • Joined: Tue May 17, 2011 2:36 pm

Re: How to make style sheet only for the body section

by HTML.net » Wed May 18, 2011 8:01 am

Also, be aware that some of the links have been given different classes.

For instance, the links in the right column "Related Articles" have the class "articles_tab1". Then you need to find this class in the stylesheet and change the layout for these links.

Again, read this lesson: http://html.net/tutorials/css/lesson8.php - it will make you a lot wiser.

- Andreas, HTML.net
User avatar

HTML.net
Site Admin

  • Posts: 1184
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: How to make style sheet only for the body section

by jayavinoth » Wed May 18, 2011 9:19 am

Hi friends,
Thanks for your help,,

<style type="text/css">
<!--
#body_area a{ text-decoration: none; color: orange }
#body_area a:hover { text-decoration: underline; color: orange }-->
</style>

I used this code in header file. but no use.Nothing is happening.
See i want change the color of the links in body section for each page like this,

http://www.ehow.com/how_7690643_style-maxi-dresses.html
http://www.ehow.com/how_4723783_lose-weight-quickly.html

Look in first link, all the links are in red color except the footer and header. In second link, all the links are in green color except the header and footer.

I want this type of trick. Help me please
User avatar

jayavinoth

  • Posts: 65
  • Joined: Tue May 17, 2011 2:36 pm

Re: How to make style sheet only for the body section

by HTML.net » Wed May 18, 2011 9:37 am

You have a lot of different classes on your links. You need to find these classes in the style sheet and change the colors.

Try to insert this in bottom of your style sheet:

#body_area a { text-decoration: none; color: orange }
#body_area a:hover { text-decoration: underline; color: orange }

#navig_txt a { text-decoration: none; color: orange }
#navig_txt a:hover { text-decoration: underline; color: orange }

#comment_reply a { text-decoration: none; color: orange }
#comment_reply a:hover { text-decoration: underline; color: orange }

#share_link a { text-decoration: none; color: orange }
#share_link a:hover { text-decoration: underline; color: orange }

#foot_links a { text-decoration: none; color: orange }
#foot_links a:hover { text-decoration: underline; color: orange }

If you insert the CSS in your HTML file, it's important that you do it inside the head'er (<head></head>) after the style sheet links (<link rel="stylesheet" type="text/css" href="css/lytebox.css" media="screen" />)

- Andreas, HTML.net
User avatar

HTML.net
Site Admin

  • Posts: 1184
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: How to make style sheet only for the body section

by jayavinoth » Wed May 18, 2011 9:54 am

Thanks friend,
How to change for each page?
I am having only one head section in the header.html page.
User avatar

jayavinoth

  • Posts: 65
  • Joined: Tue May 17, 2011 2:36 pm

Re: How to make style sheet only for the body section

by jayavinoth » Wed May 18, 2011 10:07 am

I don't know where to use the codes you given. I applied it in the head section, but no changes appears.
Help me please
User avatar

jayavinoth

  • Posts: 65
  • Joined: Tue May 17, 2011 2:36 pm

Re: How to make style sheet only for the body section

by HTML.net » Wed May 18, 2011 10:17 am

You should make the changes in the style sheet.

Use a couple of hours reading the CSS tutorial: http://html.net/tutorials/css/. It will make you a lot wiser :)

- Andreas, HTML.net
User avatar

HTML.net
Site Admin

  • Posts: 1184
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.


+ Post a reply

1, 2