I am a complete novice to CSS and need some help styling a long paragraph of text. Each paragraph starts with a name.
Example:
Joe: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Bill: Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Joe: In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
How do I style “Joe:” and “Bill:” so the names are bold?
ANY help would be greatly appreciated
Thank you, Karen
I’m sure someone will post some kind of solution, but I have to ask… why not put some kind of tag (like <b>) around the names in the source?
A cross-browse way would be to do
<p><span class="special">Joe:</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
p span.special{font-weight:bold;}
And style from there. However there is a first-word pseudo class where you could do
<p>Joe: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
..
p:first-word{font-weight:bold;}
And itwill style the first word in the code. I don’t recommend the pseudo class as it is not widely supported as the previous method.
Edit: Yea your right, I did give a solution.
- <b> is depreciated because CSS can do it so much better. (Awkward sentence lol).
Thank you so much Ryan! It worked great!
Karen
Ryan, I can understanding using SPAN if you wanted to add style which holds no meaning to the document such as color, but surely if you wanted the first letter to be bold (therefore holding emphasis) you should either use em (with italics removed and weight applied) or strong? (Just a semantic suggestion) 
<b> is depreciated but <strong> isn’t. If the first name is semantically more important than the rest of the sentence then it is acceptable to use a <strong> tag. If its just to make the sentence pretty then CSS is a better approach.
Huh?
Who said it’s deprecated?
em is for emphasized text. If you aren’t saying it differently, don’t use it.
strong is for text that needs to stand out in meaning. If there’s no special meaning with the text, don’t use strong.
Sometimes you want something to be bold for no meaningful reason. B is not deprecated. <i> is also not deprecated. They have their place; just not for emphasized or strong text.
I’m not sure if I would use <b> here or the span-- both are meaningless and are there to change the way the text LOOKS. Both are in the HTML, so neither really separates content from presentation, with the exception that the span’s class could have different styles applied to it some other day (so, I guess I’d choose the span here).
LONG LIVE <BBBBBBBBBBBBBBBBBBBBBBBB>
Your welcome :).
<b> is depreciated (even if it’s not technicallY) because CSS can easily style it more and once it DOES become depreciated (if not already) you won’t have to convert. It’s more semantic code as well.
@Alex, I just did that for demonstration purposes, I didn’t intend to actually use a <span>. Heck I hardly use it.
<b> isdepreciated (even if it’s not technicallY) because CSS can easily style it more and once it DOES become depreciated (if not already) you won’t have to convert. It’s more semantic code as well.
Lawlz, actually your misspelling makes more sense here, because you are saying the worth of <b> is low because we have CSS… which is true. : )
Although a span is not more semantic. It’s meaningless, however meaningless is exactly what we want here: to make the names stand out visually, but otherwise they aren’t actually special (unless this was turned into a definition list with the names as dt’s and the speech as dd’s, which would be stretching it I think).
I can’t type today. I’m going really slow to make sure I don’t mistype.
A lot of CSS is overtaking HTML. Also I just used <span> in the example as a way to style. I didn’t want him to actually use it unless it fitted his needs.
Nice to see one person use the right word
OHHH So it IS depreciated?? LIAR!! (ACtually you tricked me.)
Wait, noone misspelled depreciated…
Depreciated and deprecated are different words with different meanings. HTML tags get deprecated by new standards, not depreciated over several years by your accountant
I thought depreciated means outdated??
That’s what dictionaries are for. Or rather, that’s what the “define” keyword at Google is for
http://www.google.com/search?q=define:depreciate&oi=glossary_definition
depreciate - decrease in value of an asset due to obsolescence or use
http://www.google.com/search?q=define:deprecate&oi=glossary_definition
deprecate - In computer software standards and documentation, the term deprecation is applied to software features that are superseded and should be avoided
LOL I’ve been using depreciated (is tihs how you pronounce deprecated)
deh-preh-cated
How do I style this line of text?
<h1>Sitepoint Forums: Web Design Using CSS</h1>
I want "Sitepoint Forums:"to be bold and a dark blue. Then I want “Web Design Using CSS” to NOT be bold and a lighter blue.
Thank you!
Again use the same technique, wrap it in an element aka <span class=“special”> and give special CSS there.
Alternatively if it does actually appear like that as you say in the browser there is a first-line pseudo class, however stick to the first way.
<h1><span class="special">Sitepoint Forums:</span> Web Design Using CSS</h1>
..
h1 span.special
{
font-weight:bold;
color:darkblue;
}
The tag is deprecated. My car is depreciating as we speak.
Actually, I thought <b> and <i> were deprecated. They’re not…?
Ryan is right, the pseudo-class would work very nicely but it doesn’t work in all browsers. His <span> example is the way to do it.
If for whatever reason you want more than an H1 element to be bold and dark blue, you should alter the code:
.special {
font-weight:bold;
color:darkblue;
}
Now anything you use the “special” class for can have that formatting:
<p class="special">Ryan is da bomb.</p>
<h3><span class="special">Woo</span> hoo!</p>