Lesson 5(cont'd)

What HTML Tags Can I Define Using CSS?

Believe it or not, you can define any HTML tag! But here is a list of HTML tags that are commonly used within CSS:

BODY
P
H1 through H6
TD (the contents of a cell within a table)
A:link (an unvisited link)
A:visited (a visited link)

What Definitions Can I Use to Define These Tags?

Boy, you are full of great questions! There are many definitions that you can use, so to make things easy for you, let me provide you with a reference. This includes 28 commonly used definitions that you can use within Cascading Style Sheets. I would strongly recommend that you print this and place it in your Web Design Binder. Look this over before you continue the lesson.

Common CSS Definitions (Microsoft Word document)

So What Does This Look Like?

OK, when we put this all together, here is what a Cascading Style Sheet might look like:

An Example

Let's look at an example of how Cascading Style Sheets can be used instead of a lot of tags. This page will be a little silly, but it will demonstrate how CSS is used.

First, let's look at a page that does not use CSS:

<HTML>
<HEAD>
<TITLE>Example Without CSS</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<H1><FONT FACE="arial"><I>Here is H1 text</I></FONT></H1>
<H2><FONT FACE="modern" COLOR="#00FFFF"><U>Here is H2 text</U></FONT></H2>
<H3><FONT FACE="verdana" COLOR="#FF00FF">Here is H3 text</FONT></H3>
<P<FONT FACE="arial" SIZE="-1">This is text inside a P tag.</FONT></P>
<FONT FACE="arial">This is text only affected by the BODY tag.</FONT>

<P><TABLE BORDER="1">
<TR>
<TD><FONT SIZE="-1" FACE="arial" COLOR="#0000FF">This is text inside the cell of a table.</FONT></TD>
</TR></TABLE>

</BODY>
</HTML>

That sure is a lot of tags for only a few lines of text. Now let's look at the same page using CSS.

<HTML>
<HEAD>
<TITLE>Example With CSS</TITLE>

<STYLE TYPE="type/css">

</STYLE>

</HEAD>

<BODY>

<H1>Here is H1 text</H1>
<H2>Here is H2 text</H2>
<H3>Here is H3 text</H3>
<P>This is text inside a P tag.</P>
This is text only affected by the BODY tag.

<P><TABLE BORDER="1">
<TR>
<TD>This is text inside the cell of a table.</TD>
</TR></TABLE>

</BODY>
</HTML>

It takes a little bit of time to put together the style sheet, but look how much cleaner the code is in the body of your page. If you created a longer page, the style sheet would definitely save you time and effort.

A Couple of Final Notes

If you've been paying close attention, you may have noticed a couple of minor details in some of the code in this lesson. Let's take a look at these:

The paragraph tag, <P>, can be used without an end tag. However, when using CSS, it can be a good idea to include an end tag, </P>, when using paragraph tags. The reason for this is that it makes it absolutely clear to the browser which text is included within paragraph tags and which text is not included.
For font size, you have been used to using values between -2 and 4 (Example: <FONT SIZE="-1">). You'll notice that within CSS, font size is indicated by the point size (Example: font-size: 10 pt), just like what you might use in Microsoft Word or other word processing applications. In general, 12 points is the default size, the normal size that you would see on your browser. If you want the font size to be smaller, use a value less than 12. If you want to use a larger font size, use a value greater than 12. After a little experimenting, you'll get used to using point size.
If your CSS code doesn't seem to work properly, I have found that sometimes changing just one character fixes the problem. If you set up your CSS code, and find that it's not working, try this. In your STYLE tag:
<STYLE TYPE="type/css">
change the "=" character to a "-" character, so your code looks like this:
<STYLE TYPE-"type/css">
I have found that this sometimes gets the CSS code to work properly.

Your Assignment

OK, now it's your turn to use CSS on one of your Web pages. Your assignment for this week is to create a new Web page by incorporating a Cascading Style Sheet into the page that you created during Week 4. Your goal is to make both pages look identical. The code for the style sheet should appear in the <HEAD> portion of your page. Then remove any unnecessary tags on the page (there should be no <FONT> tags left on your page).

When you have finished the page, post the new page to the Internet and e-mail Ms. Porter the URL. Then print the code that you created for this page and place it in your Web Design Binder. Highlight the code that makes up the Cascading Style Sheet. Good luck!

Web Design 2