Varying text size within a div

[Digmen1]

Hi Guys

As you know I am newish to HTML and CSS.

I have a div in which I would like to have two or three text styles.

Eg some normal text

And some larger

And some bold

And some red

What syntax could I use for this ?

Do I do this in my style sheet or is it best to do it in my html ?

I have used span and the stronger tag.

[CSS_Kidd]

Depending on what exactly you want to get done... This is what I would do:

.foo {
YOUR DIV
}
.foo h1 {
font-size:whatever;
anything else you want to add
}
.bar {
color:#990000;
}

<div class="foo">
<h1>Big Text</h1>
<p><strong>normal bold text</strong>
<!--bolding can be sporadic so I never create a style for it usually-->
<span class="bar">Red Text</span></p>
</div>

There are tons of different ways to do this and every one has their way. It really all depends on how you learned and how you intend on styling over all as well.

There will be many other samples and suggestions up here soon. My advice is try them all and find a middle ground.

[simonuk]

The correct implementation of headers should be the method you use. H1 for the large text, h2 for smaller text and P for normal text.

You should be using strong for bold text because that also tells accessibility tools like JAWS that you're placing more emphasis on that text.

Using an external style sheet will allow you to cascade the styles throughout the site so if you want to keep file sizes down but have continuity across the site that would be the best way forward. It is also much easier to make changes across the board when the styles are all in one place.

For the red text just create a class like:
.red {color:red;}

Which you then attach to the element or create a span if the colour needs to be inside text.