PGTUTOR.COM: CSS tutor- Lesson 2

CSS tutor- Lesson 2

Here's a recap of what we ended up with.

<html>
<head>
<title></title>

<style type="text/css">
p {
color: #ff0000
}
</style>

</head>
<body>

<p>The content of paragraph...</p>

</body>
</html>

Now to make the font face arial. It's pretty easy really.

<html>
<head>
<title></title>

<style type="text/css">
p {
color: #ff0000;
font-family: arial;
}
</style>

</head>
<body>

<p>The content of paragraph...</p>

</body>
</html>

Notice that the properties are separated by a ; It's a good practice to have a semicolon at the end of every property anyways so from now always include it.

View your webpage here

What if now we also want to make the paragraphs bold. Simply add this:

<html>
<head>
<title></title>

<style type="text/css">
p {
color: #ff0000;
font-family: arial;
font-weight:bold;
}
</style>

</head>
<body>

<p>The content of paragraph...</p>

</body>
</html>

View your webpage here

Don't worry if you don't understand why font-weight is used. It's just a property name. All the property names in CSS are summarized in lessons 10, 11, and 12.

So all the paragraphs on the page will now be red, arial, and bold. But what if you wanted a certain paragraphs on the page to be green and italic. That's what we learn in the next lesson.

By the way, you can also have a the style attribute within a tag. For example:

<html>
<head>
<title></title>
</head>
<body>

<p style="color:#ff0000; font-family:arial; font-weight:bold;">
The content of paragraph...</p>

</body>
</html>

View your webpage here

Notice that no style tags are required.

<< BACK NEXT >>

PgTutor - The easy way to make a website ...

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12

PGTUTOR is an award winning website. In the past 2 years, we've won over 20 legitimate awards. Go to our awards page to verify for yourself.

You're not taking a risk when buying our products. If for any reason you're unsatisfied with the quality of our product(s), we'll refund your money. Also, you get to keep the product you bought.