Instant CSS

This page has a PDF with a rapid introduction to CSS and it includes two example files referred to in the texte

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