CSS advice

Hi all,

Is it acceptable to have more than one h1, h2, h3 etc etc tags set up on a page but with different formatting? For example I have styles I have set up as h1.10pxhead, h1.12pxhead, h1.16pxWO, h2.8pxBLK, h2.8pxWO.

It is not that I am filling my page with h1’s but just making sure they all get seen as h1, h2 etc etc.

Thanks,

Jonathan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Jonathan,

The structure of the tag itself is what identifies the item as h1, h2, etc.
How they appear visually makes no difference to search engines or other
devices trying to “understand” your site.

That said, best practices suggest your h1 text should act as a main
heading, with all following text including subpoint headers like h2, h3,
etc., in support of it. From that reasoning, it stands that if you have
multiple h1s on a page they should be divergent in topic, maintaining a
clear outline order.

My experience suggests things are much simpler when you restrict your page
to a single h1 topic and describe the diverging subtopics with h2 tags
instead. An example would be a page of different news topics (h2) under a
singular description of News (h1).

As I’ve said before, I think the key to good semantics is understand how
your content is relative and developing the ability to describe your
content in outline form.

Best wishes,


Ernie Simpson

On Tue, Jul 10, 2012 at 7:45 AM, Jonathan Riddle email@hiddenwrote:

Hi all,

Is it acceptable to have more than one h1, h2, h3 etc etc tags set up on
a page but with different formatting? For example I have styles I have set
up as h1.10pxhead, h1.12pxhead, h1.16pxWO, h2.8pxBLK, h2.8pxWO.

It is not that I am filling my page with h1’s but just making sure they
all get seen as h1, h2 etc etc.

Thanks,

Jonathan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie,

Thanks for replying. That all makes sense. I have usually just let Freeway get on and create my styles for me without me paying too much attention to making sure they are named well and tagged correctly, but I am using a few jquery plugins on this site, which of course carry their own css styles, and so I am having to be a lot more careful on how I approach this. Which really I should have always done, anyway!

I notice some of the supplied css sheets with the plugins are styled as:

#menu h4 {
font-size:10px;
font-weight:500;
margin:7px 0 -2px 0;}
and then in the html do the following:

    HEADING

    Text description

    I assume it is the id in both the CSS and the html, in this case menu, which means it takes on only the styling applied in #menu h4? However, will any other styling I may have set up in my default h4 be applied there?


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options

The way the plugin style works is to apply those attributes (font-size,
font-weight, margin) to h4 items only in the (id=)menu list. If you try to
set just those attributes in the plain h4 style, they will only apply to h4
items outside of the list #menu. However, other attributes that you set
in the plain h4 style - like color:red; will apply as the #menu h4 style
doesn’t even mention it.

If you are creating class styles for your headers, like h4.stylename, then
those will only affect the items you specifically apply them to – in a
similar fashion that the attributes of the #menu h4 style only apply within
the structure of the #menu list.

So think of the plain HTML Tag style as a ‘global’ style that is first
applied. Then Tag styles like #menu h4 are exceptions to the global rules
but only in those circumstances. Finally Class styles are exceptions to
everything and apply as indicated. Any attribute styling that is not
contradicted in the Cascade order will apply.

I hope this makes sense, as writing this stuff down is harder than it
seems. :slight_smile:


Ernie Simpson

On Tue, Jul 10, 2012 at 8:55 AM, Jonathan Riddle email@hiddenwrote:

Hi Ernie,

Thanks for replying. That all makes sense. I have usually just let Freeway
get on and create my styles for me without me paying too much attention to
making sure they are named well and tagged correctly, but I am using a few
jquery plugins on this site, which of course carry their own css styles,
and so I am having to be a lot more careful on how I approach this. Which
really I should have always done, anyway!

I notice some of the supplied css sheets with the plugins are styled as:

#menu h4 {
font-size:10px;
font-weight:500;
margin:7px 0 -2px 0;}
and then in the html do the following:

    HEADING

    Text description

    I assume it is the id in both the CSS and the html, in this case menu,
    which means it takes on only the styling applied in #menu h4? However, will
    any other styling I may have set up in my default h4 be applied there?


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It makes sense, Ernie :slight_smile:

I spent a good few hours over the weekend reading through the CSS tutes on w3schools, but they didn’t ever really cover my concern about having different syles applied to the same h1 h2 master tags.

Interesting about the pros and cons of internal and external sylesheets and inline ones too, and how the order of priority gets sorted, and you have cleared up my concerns about muliple styles on the same tags.

Thanks Ernie. I will be glad when this project is finished!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options