InstantCSS

This page has a PDF with a rapid introduction to CSS and it includes two example files referred to in the text. This should be handed to students who complete the HTML section. It is a chance for them to dive in and do a little independent learning.

If you understand it, you can work the puzzler. No modification of the HTML is necessary. All occurs in the CSS.

Download by right-clicking on the links to get the files.

Code for example1.html


<!doctype HTML>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="main.css"/>
        <title>Style Basics</title>
    </head>
    <body>
        <p style="color:red">We have a new language, CSS. This language 
            has its own grammar. 
        </p>
    </body>
</html>

Code for example2.html


<!doctype HTML>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="main.css"/>
        <title>Style Basics</title>
        <style>
            h1, h2   
            {
                text-align:center;
            }
            body
            {
                background-color: green;
            }
        </style>
    </head>
    <body>
    <h1>Page Style Example</h1>

    </body>
</html>

Code for puzzler.html


<!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="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 declarations.</p>
        <pre>
        margin-left:auto;
        margin-right:auto;
        </pre>
    </div>
</body>
</html>

Code for puzzler.css


/*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.
     */
}