Resources

//CSS: Text formatting
//STYLE: Use comments to communicate

Hidden Agenda

• Make a page using CSS text formatting.
• It does not have to be a script. Have fun! It could be anything.
• Start to use comments to explain and communicate your code

Saving your work

Download the template and save it as "1.05S-HelloColor-LastName.html" in your Computer Programming 12 directory.

The Assignment

Find a part of a classic comedy sketch, movie, television show, or video game cutscene.

Then convert it to a script form as below using the usual HTML tags:

<h1>Mitchell and Webb: <em>Nazis</em></h1>

<p>
    <strong>Scene:</strong>
    <em>German trench during World War II</em>
</p>
<ul>
    <li>
        <strong>Second Nazi:</strong> 
        I mean, what do skulls make you think of? 
        Death... cannibals... beheading... pirates...
    </li>
    <li>
        <strong>Hans: </strong>
        Pirates are fun!
    </li>
    <li>
        <strong>Second Nazi: </strong>
        I didn't say we weren't fun, 
        but fun or not pirates are still the baddies.
    </li>
    <li>
        <br />...<br />
        <strong>Second Nazi: </strong>
        <em>(regarding the Allies)</em> 
        Their symbols are all quite nice! 
        Stars, stripes, lions, sickles...
    </li>
    <li>
        <strong>Hans: </strong>
        What's so good about a sickle?
    </li>
    <li>
        <strong>Second Nazi: </strong>
        Well, nothing, 
        and if here's one thing we've learn in the last thousand miles of retreat 
        it's that Russian agriculture is in dire need of mechanisation.
    </li>
    <li>
        <strong>Hans: </strong>
        Tell me about it.
    </li>
    <li>
        <strong>Second Nazi: </strong>
        But, you gotta say, 
        it's better than a skull. 
        I mean, I really can't think of anything worse, 
        as a symbol, than a skull!
    </li>
    <li>
        <strong>Hans: </strong>
        What about a... rat's [bottom].
    </li>
</ul>

Then apply the formatting by adding the appropriate CSS to the text by defining the text properties for each of the tags above.

Extend and expand

There are other kinds of CSS styles that we do not look at in the course. Look up how to use some of the following and put them into your example somehow:

• background-image:
• font-variant:
• direction:
• opacity:
• text-align:
• text-decoration:
• text-indent:
• transition:
• transform: