Web Page with CSS project

  Create a web page with an internal Cascading Style Sheet (CSS)

Createa web page with an internal Cascading Style Sheet (CSS)

We’ll start with the web page you created in the previous assignment (the one with 4 heading styles, 2 paragraphs, unordered and ordered lists, an image and a link). You can use the copy provided on page 2 of this document.

To add an internal cascading style sheet to the page, do the following:

1. Remove the inline styles from the

and

tags. Right now they look like this:

a.

Here is …

and

Get rid of the stuff in yellow; replace it with the stuff in light blue

b.

Finally, …

2. You want them to look like this:

a.

Here is …

and

b.

Finally, …

3. Eventually we’ll style them both in MediumSeaGreen, but we’ll take care of that in the internal style sheet.

4. Remove the inline styles from both opening

tags. Right now they look like this:

a.

and

5. Make them look like this:

a.

for the first paragraph and

for the second paragraph

6. We’ll style them with LightBlue-colored text against a Navy background, but that will happen inside the internal style sheet.

Adding the Internal Cascading Style Sheet.

1. In the section of the document, insert a

tag on a line by itself, right BEFORE the line with the tag.

3. Open up some blank lines between

4. Type the following code in the empty space between

This is an image of the text you’ll be typing. You need to type it out into your editor (Notepad, TextEdit, or Edit). Be sure to get all the open/close curly braces, commas, colons and semi-colons right when you type!

Save as an HTML file as you go along. When you’ve completed the doc, be sure to open it using a browser to make sure the web page works! Submit it to the dropbox: “HTML Page with CSS”

Here’s a copy of the code we used to build the previous project: the web page with 4 heading styles, 2 paragraphs, the unordered (bulleted) list, the ordered (numbered) list, the image and the link. It uses inline styles. Copy and paste all of it into a simple editor (Notepad in Windows, TextEdit on a Mac, and Edit on a Chromebook):

Here is text in an h1 heading style, color is blue.

Now we’re in an h3 heading style – aqua is our color here.

Here is an h5 heading style in purple.

Finally, h2 heading style in red.

This is a paragraph full of text in green.

We’re typing enough text here so that

it wraps to at least a couple of lines in the browser. Actually, we’re using break

tags to get a few lines of text in the browser. We need to italicize one of

the words in this paragraph as well.

This becomes:

And here’s the second paragraph, this time red. Again, we’re typing enough text, using

break codes to get at least a second line of text in the browser. Here we’re

bolding one of the words as well.

Now, here is an unordered (bulleted) list of items:

• Broccoli
• Zucchini
• Lettuce
• Tomatoes

Here are the five most widely-read books of all time in an ordered (numbered) list:

1. The Holy Quran (644) – 3 billion readers
2. The King James Bible (1611) – 2.5 billion readers
3. Quotations from Chairman Mao Tse-tung (1964) – 800 million readers
4. Don Quixote (1512)- 500 million readers
5. The Harry Potter Series (2007) – 450 million readers

Click here to link to Google News