//CSS: Text formatting
//STYLE: Use comments to communicate
- 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
and save it as
in your Computer Programming 12 directory.
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: