Web Page with CSS project

WebPageWithCSSProjectInstructions1.docx

Home >Computer Science homework help >Web Page with CSS project

Create a 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 <h1> and <h2> tags. Right now they look like this:

a. <h1 style="color:blue">Here is … </h1> and

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

b. <h2 style="color:orange">Finally, … </h2>

2. You want them to look like this:

a. <h1>Here is … </h1> and

b. <h2>Finally, … </h2>

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 <p> tags. Right now they look like this:

a. <p style="color:green"> and <p style="color:red">

5. Make them look like this:

a. <p> for the first paragraph and <p class=”two”> 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 <head> section of the document, insert a <style> tag on a line by itself, right after the line with the <title> tag.

2. Insert a </style> tag on a line by itself, right BEFORE the line with the </head> tag.

3. Open up some blank lines between <style> and </style>

4. Type the following code in the empty space between <style> and </style>

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):

<html>

<head>

</head>

<body>

<h1 style="color:blue"> Here is text in an h1 heading style, color is blue.</h1>

<h3 style="color:aqua">Now we're in an h3 heading style - aqua is our color here.</h3>

<h5 style="color:purple">Here is an h5 heading style in purple.</h5>

<h2 style="color:orange">Finally, h2 heading style in red.</h2>

This is a paragraph full of text in green.<br>

We're typing enough text here so that<br>

it wraps to at least a couple of lines in the browser. Actually, we're using break<br>

tags to get a few lines of text in the browser. We need to <i>italicize</i> one of<br>

the words in this paragraph as well.

This becomes: <p class=”two”>

</p>

And here's the second paragraph, this time red. Again, we're typing enough text, using<br>

break codes to get at least a second line of text in the browser. Here we're<br>

<b>bolding</b> one of the words as well.

</p>

<h3>Now, here is an unordered (bulleted) list of items: </h3>

<ul>

<li>Broccoli</li>

<li>Zucchini</li>

<li>Lettuce</li>

<li>Tomatoes</li>

</ul>

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

<ol>

<li>The Holy Quran (644) - 3 billion readers</li>

<li>The King James Bible (1611) - 2.5 billion readers</li>

<li>Quotations from Chairman Mao Tse-tung (1964) - 800 million readers</li>

<li>Don Quixote (1512)- 500 million readers </li>

<li>The Harry Potter Series (2007) - 450 million readers </li>

</ol>

<br>

<a href="https://www.news.google.com">Click here to link to Google News</a>

</body>

</html>