Forum Moderators: not2easy

Message Too Old, No Replies

Using CSS with H tags

         

Digimon

12:03 am on Jun 19, 2003 (gmt 0)

10+ Year Member



Hi all, I've been doing some research about how to use CSS to customize the appearance of text inside H tags but I haven't found examples on how to use them in the way I want (maybe is not possible). I want to use them not just in title unless inside a paragraph. Example:

<h1>Page about Widgets</h1>
<p>
<h2>widgets</h2> is one of the most useful terms in Webmaster World.Everybody in those forums use them as example in all kind of situations. So, we have to be thankful about <h3>widgets</h3>.We use them all the time and it works.
</p>

Wich is the code I have to use to get it as "normal" text?
(the example could sound a little spammy but my that's not my real intention ;-)

Thanks in advance!

MWpro

12:10 am on Jun 19, 2003 (gmt 0)

10+ Year Member



You are right, H#'s should really just be used for titles/headings/whatever you want to call it. What it seems that you want to do is put emphasis on certain words inside of the paragraph. What you want to do is style an <em> tag to get the effect you want.

Having said that, I will direct you to a similar thread from a few days ago which will teach you how to style these, and also the difference between block tags (h1, h2, p, etc) and inline tags (em, span, strong, etc).
[webmasterworld.com...]

pageoneresults

12:11 am on Jun 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hello Digimon, looks like you've been reading information that relates to <h> tags and their prominence in the overall relevancy factor.

Unfortunately what you are wanting to do may not produce the desired results. <h> tags are supposed to be used in a certain way to obtain the greatest visibility. What you are proposing is not the correct way to utilize them based on my research.

But, if you absolutely have to do it...

h2{display:inline;}

DrDoc

12:15 am on Jun 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A better approach would perhaps be to wrap the word in a span tag and give it a certain class name.

.kwd1 {
font-size: 130%;
font-weight: bold;
}
.kwd2 {
color: red;
font-size: 130%;
font-weight: bold;
}

<h1>Page about Widgets</h1>
<p>
<span class="kwd1">widgets</span> is one of the most useful terms in Webmaster World. Everybody in those forums use them as example in all kind of situations. So, we have to be thankful about <span class="kwd2">widgets</span>.We use them all the time and it works.
</p>

grahamstewart

12:33 am on Jun 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



One good way to check if your using good markup is to view the site without any CSS applied to it. It should still be readable and make good sense.

But your example would look like this..


Page about Widgets

widgets

is one of the most useful terms in Webmaster World.Everybody in those forums use them as example in all kind of situations. So, we have to be thankful about

widgets

.We use them all the time and it works.

Also I'm not even sure you are allowed to place <h> tags inside a <p>.. it certainly doesn't make any sense to.

DrDoc

12:36 am on Jun 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Also I'm not even sure you are allowed to place <h> tags inside a <p>.. it certainly doesn't make any sense to.

Nope, you're not... Not if you care about the page validating.

grahamstewart

12:40 am on Jun 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Didn't think so but I couldn't be bothered looking :)