CSS #2 Embedded Styles

There are three methods for applying styles to a web page, inline styles, embedded styles and external style sheets. You have already worked with inline styles and have seen how tedious it can be to apply styles within a document. With embedded styles you only need to declare a style once and it will be automatically applied throughout a entire HTML document. This saves on the amount of coding necessary but still provides the greater flexibility provided by styles.

In this exercise you will work with an existing HTML document and apply embedded styles. With embedded styles you place the style elements in the HEAD section of the document. Refer to the What is CSS page for the correct syntax for employing embedded styles.

Open the CSS 2 Exercise web page. View the source code and save the file in a folder called CSS (you will need to create this folder) with a name css2yourname.  Make the following changes to the document using styles. I would suggest you make one change at a time and view the change as soon as you have coded the style.

Remember you will be placing these styles in the head of your document.

1. Change all h1 headings so the text color is navy, the font is georgia, the text is centered and has a background of lightblue.

2. Change all h2 headings so the text color is purple, the font is verdana and the background is lightblue.

3. Change all h3 headings so the text color is blue, the font is sans-serif and the background is lightblue.

4. Change all td so the text color is navy, the font is georgia and the background is lightblue.

5. Change all p so the text color is blue and the font is times-romans.

6. Save this page as css2 and then save it again as css2b. Modify the css2b file to include 5 more different styles.

7. Choose one of the td tags and create an inline style where the color is pink, the font serif and the background is purple. Which type of style is more powerful, embedded or inline? Explain.

Once you have completed the changes show the final pages and your source code to your instructor for teacher check.