A4 – Stylized Text – Web Scripting

The goal of this assignment is teach you how use CSS rules to stylize a HTML page.

For this assignment you must follow all of the rules specified below.

You must work independently.
Before coding, please study my 3 online tutorials in section III titled CSS, Selectors, and The CSS Algorithm. Please takes notes in your notebook while studying these tutorials.

After learning about CSS complete the following programming assignment.

Add a file named stylized_text.html to …/public_html/courses/csci230/ and a file named stylized_text.css to …/public_html/courses/csci230/css/.
Copy the HTML content below into your stylized_text.html file. You are not allowed to modify this content at all!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Stylizing Text</title>
    <link rel="stylesheet" href="css/stylized_text.css">
</head>

<body>

<h3>Funny Looking</h3>
<p id="author">by Alan Balter</p>

<p data-keywords="Mom">
At the hospital on the day of my birth<br>
I&apos;m told I looked strange for what it&apos;s worth<br>
Doc didn&apos;t whack my rump like he did to others<br>
Nope, I looked so funny he slapped my mother</p>

<p data-keywords="Mom Dad monkey">
    <br>
Mom said my face could make onions cry<br>
Dad took me to the zoo, and a girl made a crack<br>
    &quot;How nice of that man to bring the monkey back&quot;</p>

<p class="blue-paragraph" >
    Once I got sick with the Asian flu<br>
I needed some medicine like other kids do<br>
The doctor was hardly a humanitarian<br>
    When he suggested I visit a veterinarian</p>

<p>
    Being quite truthful; indeed brutally frank<br>
They turn off the camera when I go to a bank<br>
The first time I visited a psychiatrist&hyphen;Ouch!<br>
    She insisted I lie face down on the couch</p>

<p>
    But, I made it to college and earned a bachelor&apos;s degree<br>
Then completed a Master&apos;s and Ph.D<br>
I&apos;m the owner and president of a large company<br>
    Where lots of good looking people work for me</p>

<p>
    So if you don&apos;t like the image you see in your mirror<br>
Here&apos;s a message that couldn&apos;t be any clearer<br>
Don&apos;t worry young people; just hit the books<br>
    &apos;Cause what you know gets you further than how you look</p>

</body>
</html>

3. Your job is to add content to your stylized_text.css file so that it looks identical to this web page.

4. You are allowed to use only the partially completed rules below. You will have to change the order in order. When using these rules seek to understand how to construct CSS rules using identifiers, classes, attributes, pseudo-classes, pseudo-elements, CSS properties and their allowed values.

.blue-paragraph, #blue-paragraph { }
p:nth-of-type(5) { }
p:first-letter { }
#author { }
[data-keywords="Mom"] { }
:not(h3) { }
[data-keywords*="Dad"]::before { }
body { }
:nth-child(8) { }
h3::after { }

5. You are allowed to use only the following CSS properties, in the quantity specified.

color (3)
content (2)
font-family (1)
font-size (2)
font-style (1)
font-weight (1)
text-align (1)

6. You are allowed to use only the following CSS values.

cadetblue
large
"So yeah, I wasn\'t a handsome guys"
130%
fantasy
center
italic
" \01F923"
#0a6ebd
orange
bold