PGTUTOR.COM: CSS tutor- Lesson 1

CSS tutor- Lesson 1

Remember in the HTML tutor when I told you that learning font and all the other tags that are removed from HTML 4.01 strict will pay up. Well, now is the time.

Imagine that you wanted a paragraph in your html file to have a font face of arial and color red. Then you would do something like this:

<body>
<p><font color="#ff0000" face="arial">The content of paragraph...
</font></h2>
</body>

View your webpage here

If you wanted other paragraphs on your website to look like this then you would copy these tags to every other paragraph. Fortunately, there is an efficient and easier way. You guessed it: CSS.

In CSS we have a selector, a property, and a value. In this case we have one selector (the p tag), two properties (font-face and font-color), and many possible values for each of these two properties. Let's get started with the "basic layout" of an HTML file:

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

Within the head tags, add the style tags.

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

<style type="text/css">

</style>

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

Now add the selector value whose properties you wish to modify.

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

<style type="text/css">
p {}
</style>

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

Now we want to change the color to red or its hex code equivalent #ff0000.

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

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

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

Now finally add the p tags:

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

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

</head>
<body>

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

</body>
</html>

View your webpage here

This might be a bit confusing in the beginning but don't worry. It will sink in slowly.

Before you move on to the next lesson, just think what we need to do to make the text arial.

<< 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.