10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

H1 Tag Help, CSS Solution?

by copscloset
7 replies
  • WEB DESIGN
    • |
I Recently updated some of the pages of my website with H1 tags (and h2 and so on...).

This made the of text size much different on the pages.

I really want to take advantage of the way Google looks at the Heading Tags... but I HATE the unprofessional look it gives pages by making all the fonts different sizes... I want H1 and H2 tagged text to be the same size.

Is there a CSS solution out there (no I don't know much about CSS)

I heard that CSS lets you set up parameters which keeps every page looking the same... can they effect the Heading Tags by keeping them looking the same without changing the positive effect on Google?

I tried HTML to change the font size and IE seems to ignore these...

Any Help would be AWESOME!

Thank You in Advance...
#css #solution #tag
  • Profile picture of the author csmcmanus
    As a good rule to follow, you are going to want to differentiate between the h1 and h2 tags. your h1 should really only be used once on a page ( some guys even say once per site ) where you can run multiple h2 tags ( same with h3 h4 h5 h6) If you run the same size for both your h1 and h2, you will loose the emphasis that is naturally inherited with the style. I have heard as well, a rumor that the big g does not even recognize the h1 tag as important because of the rampant abuse of it.

    If you are trying to do an inline style ( much like the old days of table design ) the styles will not be recognized inline do to your style sheet. That may be why ie is not recognizing your changes.

    Perhaps you could post a link up for people to take a look at. CSS is very powerful, if done correctly.

    An answer to your question about the heading tags looking the same without changing positive effects on da big g is that if you have the same style declaration for your h1 and h2 then you will have a negative effect on your site.

    Hope this helped...
    {{ DiscussionBoard.errors[2215799].message }}
    • Profile picture of the author osegoly
      I agree with everything that was said above and I highly recommend you to check out some simple CSS tutorials and familiarize yourself with the concept. It's quite straight forward.
      {{ DiscussionBoard.errors[2216203].message }}
      • Profile picture of the author wardo
        You can make the headings as big or as small as you want but your h1's should be visually more prominant than your h2's really. This doesnt'y mean they have to be big and unprofessional though! This is how to change heading size in CSS:

        h1 {font-size:1.5em;}

        h2 {font-size:1.4em;}
        {{ DiscussionBoard.errors[2216742].message }}
        • Profile picture of the author copscloset
          Originally Posted by wardo View Post

          You can make the headings as big or as small as you want but your h1's should be visually more prominant than your h2's really. This doesnt'y mean they have to be big and unprofessional though! This is how to change heading size in CSS:

          h1 {font-size:1.5em;}

          h2 {font-size:1.4em;}
          Awesome! Now that I know it is possible I am off to a great start... THANKS!
          {{ DiscussionBoard.errors[2221039].message }}
  • Profile picture of the author justcrowd2010
    This forum really answered my question. Thanks for sharing
    Signature
    Expired Domains Search Engine Script(PageRank,backlinks,indexed,Alexa info) for Sale
    Expired Domains with Pagerank. List is published daily
    {{ DiscussionBoard.errors[2221057].message }}
  • Profile picture of the author Technista
    In addition to managing the font size in CSS, you can change many other attributes to customize your heading tags. For example:

    Remove the bold:
    h1 {font-style:normal;}

    Italicize:
    h1 {font-style:italic;}

    Change to a serif font:
    h1 {font-family:"Times New Roman", Times, serif;}

    Change the color to a dark grey:
    h1 {color:#222222;}

    Display in small caps type:
    h1 {font-variant:small-caps;}

    Put a colored background behind it (a light grey, for example) with a little padding around it:
    h1 {background: #eeeeee; padding:.2em;}

    Put a thin red dashed line under it:
    h1 {border-bottom:1px dashed #ff000;}

    This is just a start. Experiment and have fun!

    T
    Signature
    Atlanta Website Design
    {{ DiscussionBoard.errors[2226076].message }}
    • Profile picture of the author JKing
      One more item to think about is the margins on your h1 headings.

      They can tend to get out of control between the different browsers and put allot of unwanted spacing between the heading content and the text content below the headings.

      Try this to add a little more control to your headings.

      h1{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}

      or

      h1{margin:0px;padding:0px;}

      Both the above will totally reduce any unwanted spacing.

      Then you can go back and adjust as needed while you are editing.


      h1{margin:0px 0px 20px 0px;padding:0px;}

      The above would put a 20 pixel margin between the heading and the content below it.


      Notice the 4 settings for the margin element: 0px 0px 20px 0px

      To remember which margin each setting represents, use the "trbl" rule of thumb.

      trbl (pronounced: treble - you know, like on your stereo at home or in our car.)

      t = top
      r = right
      b = bottom
      l = left

      So:

      margin:0px 0px 0px 0px;

      Is in the order of: top, right, left, bottom (trbl)

      Hope this helps out in your site building adventures.

      JK
      Signature
      Turbo Flex Pro Theme Master - Turn Single Templates and Webpages Into Complete WordPress Blogs!
      {{ DiscussionBoard.errors[2232991].message }}

Trending Topics