groups

We've played with border around text, marquees and such. We're going to start out tonight learning more about how to style the text itself. Here is some code to start with.



<div style="font: normal small Arial, Helvetica, sans-serif; color: #000099;"> This div is only styling the text. You could put the same thing in a paragraph or a span</div>

This div is only styling the text. You could put the same thing in a paragraph or a span

<p style="font: normal small Arial, Helvetica, sans-serif; color: #000099;"> This div is only styling the text. You could put the same thing in a paragraph or a span</p>

This div is only styling the text. You could put the same thing in a paragraph or a span

<span style="font: normal small Arial, Helvetica, sans-serif; color: #000099;"> This div is only styling the text. You could put the same thing in a paragraph or a span</span>

It doesn't matter which one you play with right now, but let's see what we can change. We're using CSS shorthand to style the font.

The word "font" tells the browser to "Pay attention. This is how I want the font to look.

You can look at the font and text styles:
view link file to see things that you can change.

For instance:
The first word after font in the code is the word "normal". That is the font-style. Look under font style on that page and you see your choices are normal, italic and oblique. Replace "normal" in the code and see what happens.

More in a minute!

<div style="font: normal small Arial, Helvetica, sans-serif; color: #000099;"> This div is only styling the text. You could put the same thing in a paragraph or a span</div>

The next item after the word font is the word "small". There are different ways that you can style the text. One of the ways is using these choices:

xx-small
x-small
small
medium
large
x-large
xx-large

Try replacing the word "small" with one of these and see what happens! You can also look in the CSS Font Styles and see other choices.

My sister called this am and said she's flying in from KY. So if you don't see much of me for a few days that's why! Will miss you guys! Rose

Of course, we've played with changing color: In the code below, I changed - color: #000099; to color: green; I also changed the font size to large

<span style="font: normal small Arial, Helvetica, sans-serif; color: #000099;"> This div is only styling the text. You could put the same thing in a paragraph or a span</span>

And here is the result:

I changed - color: #000099; to color: green; I also changed the font size to large

We'll miss you for sure Rose! Hope you have loads of fun with your sister. Will you be able to stay and play a little?

I change the font to bold large and the color to yellow green....