FranMich Logo

HTML/HTML5/XHTML - Lesson 5

All the hands-on labs are here for quick access.

Some Simple Styles to Dress Up Your Page One of the first things that most people think after they add an H1 tag to their pages is "eek! That text is big, bold and ugly!" So, today's lesson is a short segue into CSS. CSS let's us change the style of your web page. This can cover anything from how the page prints, the layout, to the color and font of your text. It's that last bit that you will learn how to affect in this lesson. If you want to learn more, I'll provide information in the optional reading section of the lesson.
Add Styles with Attributes on Your HTML Tags The easiest way to add styles to your HTML is with the style attribute. Attributes are added to HTML tags after the tag name but before the greater-than sign (>) in the first tag. For example, to add an attribute to an H1 headline, you would write:

<h1 style="...">Headline</h1>
Adding Inline Styles Inline styles are an easy way to add styles to your web pages. But there are advantages and disadvantages to using them. Learn more about inline styles so that you know how to use them and when it's appropriate to use them.
Changing Font Attributes with CSS Learn some of the basic CSS style properties for changing the fonts on your web pages. You can add these attributes to any HTML tag that contains text in your document. This article explains how to change the font size, face, and weight of your text.
Color on Web Pages When you think of colors you probably think of things like red, blue, green. And while you can use these types of color names to define colors on your web pages, there are millions of possible colors, and not nearly that many named colors. This article will explain several other ways you can add colors to web pages.
Change the Font Color on Your Web Page This simple article explains how to change the font color on a paragraph. You can use the techniques you learn in this article to apply colors to lots of other text.
Activity This is the homework for the “Simple CSS” of the HTML class. It includes a short quiz (answers below) and a project you can do to practice what you've learned in this lesson.
Simple CSS Quiz  1. How do you indicate an attribute on an HTML tag?

 2. What attribute do you use to add inline styles?

 3. List three (or more) different ways you can write a color with CSS.

 4. Write the HTML to change the font size and color on the body text of a document.
Simple CSS Project Open your web page document from the first lessons and give your heading tags a better looking style than the default "big, bold, and ugly." You can change the color, size, font face, or whatever you would like.

If you are sharing your work on the forum, you should upload your page to a hosting provider and provide a URL for us to look at. Or you can upload the file to the forum for us to look at.