Styling Multiple lines of text in a div?

You use HTML to structure the document. To tell the browser what is the point of each block of text. “This is a heading”, “This is a paragraph”, etc. You use CSS to tell the browser how each of those kinds of blocks should look.

I would probably do something like:
<h1 class=“headline”>MY HEADLINE</h1>
<p class=“datetime”>the date and time</p>
<p class=“newsstory”>THE NEWS STORY</p>
<p class=“comment”>comment/link</p>

Then in your CSS file or in the <style>block in the file, you’d define how you want each of those kinds of things to look. For example:
h1.headline {
font-size: larger;
text-align: center
}
p.datetime {
font-size: smaller;
font-style: italic;
}
p.newsstory {
font-face: courier
}
p.comment {
font-size: smaller
}

fwiw, <span> should only be used for in-line text, text that you want styled differently within a block (like a paragraph or a div or a heading).

Like, you might have:
span.title {
font-style: italic
}

and then in your HTML you might have:
<p class=“newsstory”>Today, records were broken, as Joe Smith’s new novel <span class=“title”>Something Worth Reading</span> exceeded all expectations…</p>

Basically, when deciding which tags to use you should take into account what the meaning of those particular tags is, and if that aligns with the text. If it’s a headline, you’d use <h1>. You can check w3schools’ tag list to find relevant tags (and only when you can find nothing relevant and need to style it, use meaningless element like <span> for inline text and <div> for blocks.

In this case I think I’d use <strong> for the date, <p> for each paragraph in the story and <a> for the links (of course). HTML 5 should bring more meaningful elements, but that’s still a while away, especially if Internet Explorer is not going to die soon.

Anyway, another advantage of using meaningful elements is that the browser will try to style it in accordance with its meaning, e.g. when CSS is disabled/not working (try for yourself :).

Also, if it’s all in the same <div> that has a class applied to it (e.g. “article”) then you don’t need to give each element a class, as you can just style them with:

.article h1{
text-align: center;
}

(i.e. align the text in the <h1> element within the element with the class “article” to the center.

P class, for full paragraphs and span class for lines, words, headlines or the like, would be my choice. And yes, I use span for links, if you need them to be a different style than the default links on your page.

@odali that makes very little sense. You can give a “class” attribute to an <a> tag. Why would you use a <span>?

<a href=“http://www.example.com”>Normal Link</a>
<a class=“special” href=“http://www.example.com”>Styled Link</a>

@MrItty I have tried doing that, and it makes much more sense than what I have said, but it doesn’t work in all browsers, for some reason.

Bear in mind that if your DIV has an ID, you can leverage off of it. Therefore, keeping it simple, you could use in your HTML

<div id=“myid”>
<h1>Headline of Story</h1>
<p class=“date”>Date, time</p>
<p>Text of story<p>
<a href=“comment-link.html” title=“comment on story”>Comment on story.</a>
<div>

Your markup is now extremely simple. Only one class is required. And your style sheet gets correspondingly simpler too. It would be something like:

#myid {
font: normal 11px/20px Arial, Helvetica, sans-serif;
text-align: left;
color: #000;
background-color: #fff;
}
#myid h1 {
font: bold italic 24px/40px Arial, Helvetica, sans-serif;
}
#myid a {
color: #00f;
}
#myid a:hover {
color: #f00;
background-color: #ddd;
}
#myid a:visited {
color: #777;
background-color: #fff;
}

.date {
font: normal 10px/18px Arial, Helvetica, sans-serif;
color: #777;
}

NOTES: You wouldn’t even need to separately style the <a> tag in the div is the default browser styling or a style declared for all <a> tags is OK with you. Also, while you could have hung the one required class on the ID, as in

#myid.date {
font: normal italic 10px/18px Arial, Helvetica, sans-serif;
color: #777;
}

But that class would then be limited to use only within that particular DIV. Might as well leave it open to use elsewhere in the site. And of course, if you are going to have more than one such DIV on a single HTML page, use a class for the DIV instead of an ID. You can leverage styles and inheritance off either IDs or Classes in the same way.

@odali I realize it’s been a while since I did web development, but I found it worked in every browser I used back then, so long as you remember to set the pseudo-classes (active, hover, visited) correctly. <shrug> Maybe times have changed. I don’t know.

@MrItty It’s odd, and not consistent what browser it doesnt work in, although its usually firefox it’s not always the case.. and all the psudo-classes work fine with the span class, but not the a class for some odd reason… I don’t see why it is like that, in fact it makes much more sense to do it the way you just described.. shrugs

@odali I’m a professional web developer and have never run into an instance where the psuedo-classes for tha <a> tag did not work in any recent browser, most of all Firefox. If you don’t declare them in the correct order, then they don’t seem to ‘work’ in compliant browsers like Firefox. But what is happening there is that the browser is correctly applying rules of inheritance and you are getting exactly what you asked for, just not what you wanted to get. See http://www.w3schools.com/CSS/css_pseudo_classes.asp

I do love CSS but I have to say back when html was all tables and such about 10 years ago….it sure was much more simple to get a solid firm grasp on haha. However CSS and such has opened up a whole world of amazing things..I suppose I should be grateful. I appreciate all the responses, this has cleared things up for me somewhat. It’s a bit strange when (I don’t just mean here in this question) people have 10 ways of doing it and everyone argues about what is correct and what is not. It’s like a 5 year old doing something wrong and mom says it’s okay and dad says it’s not so mom argues with dad and dad argues with mom and the 5 year old is left wondering….“is it okay? Let me try it again and see what happens” :)

Actually can someone clarify the meaning of inline…i’m assuming it’s just any line of text but what if that line of text wraps to the next line, is it still considered “inline”?

@johnny0313x yes. Inline simply means not block-level.

http://htmlhelp.com/reference/html40/inline.html

Well I tried all your suggestions and I am still struggling actually. I think part of it might have to do with the fact that it’s a news management php script and I edit the news template then use a php include on my page. ugh, it’s turning into one of those walk away from the computer moments lol

@ETpro I have been following your example and something doesn’t seem to be right. The date and news story doesn’t grab it’s style it;s just defaulting, here is my code if anyone is at all interested.

CSS:
#content1 h1 {
font-family: sans-serif;
color: #FFB00F;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 25px;
line-height: 0.8em;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-align: left;
text-indent: 0ex;
}

.date {
font-family: sans-serif;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: medium;
line-height: 1em;
word-spacing: 2ex;
letter-spacing: 0.1ex;
text-decoration: none;
text-transform: capitalize;
text-align: left;
text-indent: 0ex;
}

.story {
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: 1em;
word-spacing: normal;
letter-spacing: 0.1ex;
text-decoration: none;
text-transform: none;
text-align: left;
text-indent: 2ex;
}

HTML:
<h1> $subject</h1>
<p class=“date”>$time</p>
<p class=“story”>$titletext $maintext</p>
<br /> $comments<br />

The HTML is inserted with a PHP include into the div content1…

never mind I got it now, learning is….fun :)

Good going. And I am glad to see you noticed I had failed to properly close a couple of tags.