CSS #1 Inline Styles

 

In this exercise you will turn a text file into a formatted HTML document by using inline styles. You will see that styles provide much more control over the formatting of the document than the HTML tags we have used thus far. You will need to refer to the What is CSS document for the specific properties and values you will use in this document.

Copy the valentines_day.txt document to your home folder and save it as a web page. Apply appropriate HTML coding to the file to make it a web page. Next apply inline styles to change the formatting of the text. The two new tags you will use to apply most of the formatting will be the <div> and <span> tags. The <div> tag is used for blocks of text while the <span> tag is used for individual lines of text or individual words or letters. Here are the formatting styles you should apply:

Use the <h2> tag to make the heading "Origins of Valentine's Day" larger. Include the style attribute to center the heading, make the font color red, the font family Georgia, italicize the font, make it all upper case and give it a background color of pink.

Use the <div> tag to indent the first line of each paragraph. Use an indentation of 20-25 pixels.

Use the <span> tag to make the first letter in the first paragraph of each article xx-large, italics and red.

Use the edit find and replace feature of notepad to make every occurrence of Valentine appear red. You will use the span tag for this style.

Show the completed document to your instructor for teacher check. Also have the source code open so both are visible.