IPL Kidspace: Learning HTML

Reference
The World
Computers
Health & Nutrition
Reading Zone
Math & Science
Art & Music
Sports & Rec.
Fun Stuff

Science Fair
Stately Knowledge
Learning HTML
Orca Search
Poison Prevention
Author Page
Culture Quest
Story Hour
Say Hello
U.S. Presidents

Have a question? Ask an IPL Librarian!

(Use our Contact Us form for questions/suggestions about our site.)

More about CSS

CSS is extremely powerful, but it can also be extremely complicated. So I'm going to keep it simple and only show you a few simple ways you can use it on your website.

In particular, I want to show you how you should…

properly center text
adjust font style or type
adjust font size
adjust font color
add a background image
adjust background color

We've already shown you how to do these things just using HTML, but that's no longer the proper way to do these things. You should do them using CSS.

We've shown you once how to center text using CSS.

<p style="text-align: center;">Woo-Hoo! I'm learning HTML!</p>

You can also align the text to the right or left if you want.

Here's how to adjust font style or type.

<p style="font-family: courier;">Woo-Hoo! I'm learning HTML!</p>

See the More Fonts and Text Styles page that we just went through for other font face name that you can use.

Here's how to adjust font size.

<p style="font-size: 24px;">Woo-Hoo! I'm learning HTML!</p>

For font-size, you pick any number you want and write "px" after it. You can also you em, as in 1em , 2em, 1.5em, 1.2em, and so on. You can also use the following word values: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, and larger.

Here's how to adjust font color.

<p style="color: blue;">Woo-Hoo! I'm learning HTML!</p>

For font-color, you use any one of the 147 word values supported by the popular internet browsers. We used blue above. You can also use a hexadecimal value, such as #000000, which is black, or #00FF00, which is green. There are many more of these. I've already shown you how to use a hexadecimal value to set the background color. You can also use Color RGB, which I won't show you here. But to learn more about the colors available to you through CSS, see the W3Schools CSS Colors page:

W3Schools CSS Colors
http://www.w3schools.com/css/css_colors.asp

Here's how to add a background image. It's very similar to how I did it just using HTML. Note that you put the name of the file of the image you want to use as your background inside the parentheses following the word url.

Here's how to add a background color. You have all the same colors available here as you do for font color, which I just mentioned above.

You should also get to know two more highly useful HTML tags: <span></span> and <div></div>. It would be impractical to use CSS without the span and div tags. Both tags work as invisible containers, and you can apply CSS to whatever is inside these containers.

The span tags work best for small amounts of text. You can use the div tags around text, images, other HTML tags and basically around anything in-between the <body></body> tags in your HTML file, but div tags will add a line break before the opening div tag and after the closing div tag.

Here is an example of how to use span and div tags with CSS and inline styles:

<html>

<head>

<title> Learning HTML </title>

</head>

<body>

Woo-Hoo! <span style="color: blue; font-size: 24px;"> I'm </span>learning HTML!

<div style="color: blue;">Woo-Hoo! <span style="font-size: 24px;"> I'm </span>learning HTML!</div>

Woo-Hoo! <div style="font-size: 24px;"> I'm </div>learning HTML!

</body>

</html>

Did you see how you can put two CSS properties together in the same style attribute?

Ready to learn about internal and external style sheets ?

Previous | Home | Next

This resource originally created by Deborah Dunk.
Revised and edited by Michael Galloway in 2005 & in 2006.

Updated on 14 Jul 2008



You are here:	Home » KidSpace » Learning HTML
KidSpace Home Subjects Reference The World Computers Health & Nutrition Reading Zone Math & Science Art & Music Sports & Rec. Fun Stuff Features Science Fair Stately Knowledge Learning HTML Orca Search Poison Prevention Author Page Culture Quest Story Hour Say Hello U.S. Presidents	Have a question? *Ask an IPL Librarian!* (Use our Contact Us form for questions/suggestions about our site.) More about CSS CSS is extremely powerful, but it can also be extremely complicated. So I'm going to keep it simple and only show you a few simple ways you can use it on your website. In particular, I want to show you how you should… properly center text adjust font style or type adjust font size adjust font color add a background image adjust background color We've already shown you how to do these things just using HTML, but that's no longer the proper way to do these things. You should do them using CSS. We've shown you once how to center text using CSS. <p style="text-align: center;">Woo-Hoo! I'm learning HTML!</p> You can also align the text to the right or left if you want. Here's how to adjust font style or type. <p style="font-family: courier;">Woo-Hoo! I'm learning HTML!</p> See the More Fonts and Text Styles page that we just went through for other font face name that you can use. Here's how to adjust font size. <p style="font-size: 24px;">Woo-Hoo! I'm learning HTML!</p> For font-size, you pick any number you want and write "px" after it. You can also you em, as in 1em , 2em, 1.5em, 1.2em, and so on. You can also use the following word values: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, and larger. Here's how to adjust font color. <p style="color: blue;">Woo-Hoo! I'm learning HTML!</p> For font-color, you use any one of the 147 word values supported by the popular internet browsers. We used blue above. You can also use a hexadecimal value, such as #000000, which is black, or #00FF00, which is green. There are many more of these. I've already shown you how to use a hexadecimal value to set the background color. You can also use Color RGB, which I won't show you here. But to learn more about the colors available to you through CSS, see the W3Schools CSS Colors page: W3Schools CSS Colors http://www.w3schools.com/css/css_colors.asp Here's how to add a background image. It's very similar to how I did it just using HTML. Note that you put the name of the file of the image you want to use as your background inside the parentheses following the word url. <body style="background-image: url('background.jpg');"> Here's how to add a background color. You have all the same colors available here as you do for font color, which I just mentioned above. <body style="background-color: #3cb371;"> You should also get to know two more highly useful HTML tags: <span></span> and <div></div>. It would be impractical to use CSS without the span and div tags. Both tags work as invisible containers, and you can apply CSS to whatever is inside these containers. The span tags work best for small amounts of text. You can use the div tags around text, images, other HTML tags and basically around anything in-between the <body></body> tags in your HTML file, but div tags will add a line break before the opening div tag and after the closing div tag. Here is an example of how to use span and div tags with CSS and inline styles: <html> <head> <title> Learning HTML </title> </head> <body> Woo-Hoo! <span style="color: blue; font-size: 24px;"> I'm </span>learning HTML! <div style="color: blue;">Woo-Hoo! <span style="font-size: 24px;"> I'm </span>learning HTML!</div> Woo-Hoo! <div style="font-size: 24px;"> I'm </div>learning HTML! </body> </html> Did you see how you can put two CSS properties together in the same style attribute? Ready to learn about internal and external style sheets ? Previous \| Home \| Next This resource originally created by Deborah Dunk. Revised and edited by Michael Galloway in 2005 & in 2006. Updated on 14 Jul 2008
	IPL \| TeenSpace \| About the IPL \| Privacy Policy \| Accessibility Info \| Contact Us © 1995-2008 The Regents of the University of Michigan. All rights reserved. © 2008, Drexel University, All Rights Reserved