H-tag display properties in style sheet

HTML & CSS
1

Having finally arrived in the 21st century :blush: , I am now halfway through revamping my site from HTML4 to XHTML/CSS3, but unfortunately, it’s only the easy half that I have done; the hard one is still in front of me. :frowning:

I’m now struggling with 2 related questions.

  1. Can I set the display for ALL H-tags in my stylesheet in such a way that every page displays the H-tags the same way?
  2. If that can be done, will it display the same over various systems and browsers?
    I am having a hard time getting things to display the same or at least very similar in IE, Opera, Chrome and the various Mozilla derivatives and I shudder at the thought of expanding to Apple desktop/laptop, tablets, Ipad, Iphone, androids etc.
2

Yes. :slight_smile:

If that can be done, will it display the same over various systems and browsers?

Yes, pretty much. :slight_smile:

Perhaps show us an example of what you are doing if you are having problems. :slight_smile:

3

Thanks Ralph.
Not quite at the stage of displaying things in the new format; I’m revamping a live site and can’t afford to have it down, so the lot will have to be redone, tested and replaced overnight. At the moment, I am “designing” the master style sheet, and deciding what goes in there, what goes in the internal ss and what goes inline. It will be “auto-sizing” and if I can get that working properly, the current “3-column” centered will change to “2-column” floating left lined.

Do you have a link to an example of how to define H-tags in a master style sheet?
What I am trying to achieve, is choose the font (probably Verdana), colour, size, H1 H2 H3 stepping down in size, 4-6 the same size@ about 1.5-2 times the size of body text and override the font choice, sizing and colouring of the browser.

4

There’s nothing to it, really. E.g.

h1, h2, h3, h4 {font-family: verdana, sans-serif; color: #222;}
h1 {font-size: 2em;}
h2 {font-size: 1.75em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;}
5

:blush:
Just as well I admitted to still needing to learn a lot.
Thanks Ralph.

6

No probs. You are welcome to ask any questions. :slight_smile:

7

You may come to regret that generosity, but I’ll try not to take it too literally. :smiley:
Bearing in mind that I am still in the early stages of the revamp and therefore all options fully open, should I make my site suitable for all display sizes, including minin screens like smartphones/iphones/androids, or set up a main site for anything from say 800x600 upward, and a redirect when small screens are detected?

8

It’s up to you, really, but unless your site is a huge one, I’d say use CSS to resize the layout for different viewports, rather than redirect users to a different version of the site, which is more work. Responsive design is all the rage at the moment.

9

Ralph, you’re a genius. flexible grid and “adjusting images” is just what I was looking for. Apart from putting the “normal text” on the left and buttons/images/links of the right, the Baker street enquirer structure is pretty much what I had in mind.
My site is very text heavy (1000-2000 words on most pages) by necessity wich causes display problems to no end on fixed witdth format.
Many thanks for the links.

10

Glad that helped. It’s much nicer to have flexible pages, given the nature of the web, so I’m glad this is being recognized more now. :slight_smile: