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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Location
    Australia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Defining CSS in different div sections

    Hi,
    I was wondering if it was possible to code different styles for heading under different div tags in one external css document?

    So I have one external css, and I want h1 in the header division to be different from h1 in the content division, to be different from the h1 blog posts division etc.
    I know I can use individual IDs, or internal styles, but was looking for a faster approach and thought that this might be a feature and that I didn't know the right syntax.

    Thanks,
    Alex
    Last edited by ASVincent; 05-10-2011 at 01:50 AM. Reason: Resolved

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Have a look at Specificity.

    And btw, just so you know, there a 6 levels of heading tags. h1 through h6. You dont have to use h1 for every important heading or key title/phrase.
    Teed

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by teedoff View Post
    Have a look at Specificity.

    And btw, just so you know, there a 6 levels of heading tags. h1 through h6. You dont have to use h1 for every important heading or key title/phrase.
    It is preferable to use h1 tags for your main headings, and h2 for sub-headings, etc. for:

    Search Engine Optimization
    Accessibility
    Clarity


    You can either give your various sections id numbers and target the headings within these:
    Code:
    #mainContent h1 { /* rules here */ }
    or use class names for either the sections (preferred) or each heading:
    Code:
    .contentClass h1 { /* rules to apply to headings within sections with this class */ }
    h1.headingClass { /* rules to apply to all heading 1's with this class */ }
    To add a class to a div:
    Code:
    <div class="contentClass"><h1>My Main Heading</h1></div>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by AndrewGSW View Post
    It is preferable to use h1 tags for your main headings, and h2 for sub-headings, etc. for:

    Search Engine Optimization
    Accessibility
    Clarity


    You can either give your various sections id numbers and target the headings within these:
    Code:
    #mainContent h1 { /* rules here */ }
    or use class names for either the sections (preferred) or each heading:
    Code:
    .contentClass h1 { /* rules to apply to headings within sections with this class */ }
    h1.headingClass { /* rules to apply to all heading 1's with this class */ }
    To add a class to a div:
    Code:
    <div class="contentClass"><h1>My Main Heading</h1></div>
    Yes I know, which is why I was pointing out there are lesser heading tags to be used for things like blog posts titles and such. Obviously, its good SEP practice to use heading 1 tags for page content headings, but less important sections dont have to be h1 tags.
    Teed


  •  

    Tags for this Thread

    Posting Permissions

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