puzzler.css

puzzler.css

Whoopee! No HTML to type! You get this for free. Downside: You cannot change anything on it. This is the file I will use in the grading process.


<!doctype html>
<!--Author: Morrison-->
<!--Date: 2021-09-07-->

<html lang="en">
<head>
<title>puzzler</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="puzzler.css"/>
</head>
<body>
    <h1>Awful CSS Puzzler</h1>

    <p>You are not to touch the HTML on this page.  All of your work must
     appear the file <code>puzzler.css</code>.  <span class="nerd">Your
     page must match the screenshot provided in this puzzler
     project.  </span></p>

    <ul>
        <li class="lucky">This list item is green.  and its font is bold.
        Check W3 schools for that.</li> <li class="nerd">This list
        item and its bullet are cyan.  That's color
        <code class="nerd">#00FFFF</code>. </li> 
        <li>This list item is
        normal-looking</li>
    </ul>

    <ol>
        <li>I insist</li>
        <li>that all ordered lists</li>
        <li>be enumarated with</li>
        <li>lower-case Roman Numerals</li>
    </ol>

    <p>Yeah this ordered list too.</p>

    <ol>
        <li>Now we</li>
        <li>see this miracle</li>
        <li>pulled off</li>
        <li>a second time</li>
    </ol>

    <p class="middle"> This paragraph's text is centered.  Even if it goes
    on for many lines and it begins to look like the <span
    class="title">King James Bible</span> or <span
    class="title">War and Peace</span>.</p>

    <div class="squawk">
        <p>Here is a paragraph in the div.</p>

        <p><img src="https://faculty.ncssm.edu/~morrison/rhino.gif"
                alt="ugly rhino picture"
                style="width:25%"/>
        </p>

        <p>Notice the pretty colors and the border.  You get a 
         freebie: to center any block-level element use these
         two style rules.</p>

        <pre>
        margin-left:auto;
        margin-right:auto;
        </pre>
    </div>
</body>
</html>

You can download this quickly by right-clicking on the link in the navigation area.

Your exciting starter kit includes this.


*Author: Morrison*/
/*Date: 2021-09-07*/
.squawk
{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color:orange;
    border:solid 1px black;
    padding:1em;/*  change this; tell me what it does in a comment.*/
}
img
{
    /*This is a freebie. What does it do?*/
    display:block;
    margin-left:auto;
    margin-right:auto;
    /* Put a black border of width 20 pixels around the image
     * that's your job.
     */
}

Your job is to add CSS to make this.

Firefox has a feature called Eyedropper which sniffs out hex codes from colors. Don't be shy.

picture of puzzler page

The image URL for the rhino is https://faculty.ncssm.edu/~morrison/rhino.gif