CSS trouble

[chamith7]

My website uses CSS (kind of) that someone else wrote for me.

<STYLE TYPE="text/css">
<!--
p
{
text-indent:27px; font:9pt verdana
}
//-->
</STYLE>

and then my website's body has something like:

<FONT blah blah blah>

<B>THE INCIDENT INCIDENT</B> - 24 January 2004
<P>I ran into an old friend at the store yesterday, but he didn't appreciate my clumsiness very much.</P><BR>

<B>THE DAYDREAMING INCIDENT</B> - 23 January 2004
<P>I daydream a lot. Because of this I sometimes have trouble focusing on ...</P><BR>

</FONT>


But the problem is I use CSS for the paragraphs, but I want to boldify and make the titles the font I want, and I guess it is bad html to a <P> tag inside my <FONT> tags (which are for the titles). So in order to have the titles in a font and size that I want, I would have to use a font tag on every single one which would be a big waste. Can someone tell me how I could just have like 2 styles (I guess it'd be called) one for the paragraphs and one for the titles. My website is at http://www.geocities.com/chamith7 if that will help you see what I am talking about. Thanks a lot in advance.

[coothead]

Hi there chamith7,

Try it like this, css...

<style type="text/css">
<!--
p
   {
    text-indent:27px; 
    font:9pt verdana
   }
h1,h2, h3
   {
    font-family:arial;
    color:#000080;
   }
span
   {
    font-family:couier;
    font-size:12px;
    color:#000000;
   }
//-->
</style>

and the body...

<h1>THE INCIDENT INCIDENT<span>-24 January 2004</span></h1> 
<p>I ran into an old friend at the store yesterday, but he didn't appreciate my clumsiness very much.</p>
<h2>THE DAYDREAMING INCIDENT<span>-23 January 2004</span></h2> 
<p>I daydream a lot. Because of this I sometimes have trouble focusing on ...</p>
<h3>AND THIS IS H3<span>-22 January 2004</span></h3>

cthead

[lavalamp]

Sure thing, for the titles you should use header tags; h1, h2, h3, h4, h5, h6.

In this case I'll use h2 tags since you should have a page title in an h1 tag, even if it's just something like <h1>Welcome</h1>. Anyway, here's some code:

<style type="text/css"><!--

h2{font:10pt "verdana", sans-serif;}

p{text-indent:27px;font:9pt "verdana", sans-serif;}

--></style>

</head>

</body>

<h2><b>THE INCIDENT INCIDENT</b> - 24 January 2004</h2>
<p>I ran into an old friend at the store yesterday, but he didn't appreciate my clumsiness very much.</p><br>

<h2><b>THE DAYDREAMING INCIDENT</b> - 23 January 2004</h2>
<P>I daydream a lot. Because of this I sometimes have trouble focusing on ...</p><br>

Just so you know, your entire page could be converted, quite easily, to a CSS and <div> based layout. Since it would be so easy it would be a good place for you to start learning CSS and XHTML if you have a little time. CSS is really easy to get the hang of and XHTML isn't that different to normal HTML.

[lavalamp]

Hi coothead, if he were to use a new header element for each of his topics, he would quickly run out of them, have you seen his page?

Headers are for conveying page structure to non-visual browsers, the code you have posted rates the first topic more important than the second, and the second more important than the third etc. But they are all equally important and therefore should all use the same header tag. Some W3C guidence - http://www.w3.org/TR/WAI-WEBCONTENT-...gical-headings.

[chamith7]

Wow, thank you both very much. I'll get on learning that stuff soon.

[coothead]

Hi there lavalamp,

Hi coothead, if he were to use a new header element for each of his topics,
he would quickly run out of them, have you seen his page?

You are jesting of course
I did not suggest that chamith7 should use multiple headers for his layout but....
just displayed examples of a tag; of which I presumed, he was unaware

cthead

[lavalamp]

That bit was a joke yes, but your code did imply that a new header tag should be used for each new topic.

[suppaman]

I am reading this thread too. I think lavalamp's code is more efficient.

[chamith7]

I read the CSS and XHTML tutorials at w3schools.com and never saw anything about <div>. Where can I learn how to use it on my site?

[me']

Originally posted by lavalamp
That bit was a joke yes, but your code did imply that a new header tag should be used for each new topic.

I'm sure what he meant was more like this:

<h1>Chaddy's Journal</h1>
<h2>Fresh from the Cortex</h2>

<h3><span>The Collision Incident</span> - 25 January 2004</h3>
<p>I ran into an old friend at the store yesterday, but he didn't appreciate my clumsiness very much.</p>

<h3><span>The Daydreaming Incident</span> - 24 January 2004</h3>
<p>I daydream a lot. Because of this I sometimes have trouble focusing on ...</p>

...

[dragon]

http://www.designplace.org/tutorials.php?page=1&c_id=24 and many other sites available through Google search.

[rmedek]

Hi chamith7,

"boldify"????

Think of a <div> as just that, a division of the page, and it starts to make more sense. For example...

<div id="intro">
<p>A well-written introduction, blah blah blah, yakety schmackety...</p>
</div>
<div id="maincontent">
<p>The main content, blah blah blah...</p>
</div>

... you get the point. Then in your CSS you can specify layout for each of those divisions and style your page. Hope this helps,

Rich

[lavalamp]

me' I think you're right there, that would make a lot more sense, and conform to the WCAG which is always good .

chamith7, div and span tags do absolutely NOTHING to what is inside them which is why they're so useful. The difference between them is that span is inline (will stay on a line with other in-line content) and div is a block level element (will always push itself onto a new line and expand to as wide as it can).

The real use of div and span tags is when you apply CSS to them, since they have no rules of they're own except for display:block; or display:inline; you can code away without worrying about other predefined rules getting in the way.