Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS - Adding New Page

    I am about to add a new page to a web site, my styles for the existing page are external to the HTML. Many of the same <div>'s remain part of my new page; i.e. header, footer, etc. with new content to be added.

    Can the style of elements that remain "constant" throughout the site, from page to page, use the existing external CSS? How do I incorporate style changes, say for main content areas? I have started to develop an entire new external style sheet for the second page of the site, but am beginning to think it isn't necessary, or is it?

    For example, my "header" is not going to change from page to page as I am using the <div> as my logo. I assume that should only be addressed once site wide. I imagine navigation and footer <div>'s would be another area that could very likely remain the same from page to page.

    For those areas undergoing change, including main content <div>s, would they require different selectors to ensure unique styling to occur? Would it simply be a case of assigning unique selectors to areas that have changes in styles?

    Cheers

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,333
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Ideally, you would want to use one stylesheet for your entire site. So, as you already stated, the things that remain constant from page to page will be styled the same from page to page. New elements that are on the new pages you create will need to be styled, but can be in the same stylesheet.

    You can take the same layout for your first page, and keep that throughout your site. I never recommend changing the layout from page to page, as this will confuse visitors. They may think they left your site if they visit your contact page and it looks completely different than your home page.

    If you want a different style for a "common" element though, you can add an id or class to that element on THAT page. For example, if you have a <p> tag on one page, and you want to style a <p> on another page differently, then add a class like so:

    <p class="newParagraph">Text Here</p>

    Then style the class newParagraph.

    Once you get into includes, which I know is beyond this post, you can even keep things like your navigation bar or your header and footer code in separate files and then include it on every page. Makes things easier to change when needed, and cleans up your code a bit when working on it.
    Last edited by teedoff; 04-08-2011 at 08:38 PM.
    Teed

  • Users who have thanked teedoff for this post:

    justaguynpc (04-08-2011)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I am probably making more out of this than necessary. I have to remind myself that styles are styles, content changes are HTML, and each new page will have it's own unique html, for example "index.html" vs "faq.html."

    I will give it a go, and if I have any further issues I'll be back.

    Thanks again teedoff.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •