The Black Madonna of Chartres, France (styling added)

The Black Madonna of Chartres, France (no styling)

I love the wonderful black Mother!

Thro all Nature’s store there’s no other

Sheds such beams of tenderness

from the sad patient eyes,

With the soft arms that pillow

young life’s ecstasies.

And the wonderful heart of that Mother!

The loving sad heart of that Mother!

Could God grant us no other

’Twere proof enough, surely

His wisdom and justice, All-loving.

And the tender sweet tones of her crooning

To Heavenly music attuning

All the worries and frets

The hurts and back sets

Of the proud pushing world,

With her simple “God knows”

And her “Honey, He cares!”

Her faith, hope and love, rock buttressed

More steadfast an anchor

for storm tossed in the drift

More heartening a beacon

for fog bound and no rift

Than cathedrals and synods and masses.

Anna J. Cooper

Now, let's check out the original, hand-written version and see how these stack up:

HTML code:

<h1>The Black Madonna of Chartres, France</h1>
      <!--NOTE: I want this titled centered on the page and underlined, so I'll do that by changing the stylesheet for "h1". <h1> is the top-level of headings, so it'll almost always be used for the title.-->
<div class="poem">
      <!--NOTE: "div" doesn't automatically change anything. it'll remain invisible until it gets styles that are different from the default. many texts have lots of different <div> sections in them, so it's a good habit to add a "class" attibute INSIDE of the <div>. the class can be named anything you want. I will label this one "poem" then add styles in the stylesheet '-->
<p class="poem_dent_1">I love the wonderful black Mother!</p>
      <!--NOTE: I explain the three different "class" labels in the stylesheet notes-->
<p>Thro all Nature’s store there’s no other</p>
<p>Sheds such beams of tenderness</p>
<p class="poem_dent_3">from the sad patient eyes,</p>
<p>With the soft arms that pillow</p>
<p class="poem_dent_3">young life’s ecstasies.</p>
<p>And the wonderful heart of that Mother!</p>
<p>The loving sad heart of that Mother!</p>
<p>Could God grant us no other</p>
<p class="poem_dent_3">’Twere proof enough, surely</p>
<p>His wisdom and justice, All-loving.</p>
<p>And the tender sweet tones of her crooning</p>
<p class="poem_dent_1">To Heavenly music attuning</p>
<p class="poem_dent_2">All the worries and frets</p>
<p class="poem_dent_3">The hurts and back sets</p>
<p class="poem_dent_1">Of the proud pushing world,</p>
<p class="poem_dent_2">With her simple <i>“God knows”</i></p>
<p class="poem_dent_3">And her <i>“Honey, He cares!”</i></p>
<p class="poem_dent_1">Her faith, hope and love, rock buttressed</p>
<p>More steadfast an anchor</p>
<p class="poem_dent_3">for storm tossed in the drift</p>
<p>More heartening a beacon</p>
<p class="poem_dent_3">for fog bound and no rift</p>
<p>Than cathedrals and synods and masses.</p>
<p class="signature"><i>Anna J. Cooper</i></p>
</div>

Stylesheet (CSS) Code:

h1 {
text-align:center; 
/*NOTE: "text-align:" indicates where the text should align horizontally (side-to-side). this can be set to left, right, center, or justify (justify=evenly spread horizontally)*/
text-decoration:underline;
/*NOTE: "text-decoration:" can do lots of different things! here it is adding an underline for the header. check out this page to see other options for decoration: https://www.w3schools.com/css/css_text_decoration.asp  */
}

/*NOTE: in the stylesheet, you use a period (.) before the class label to tell the system that it's looking for the a "class" attribute', then the "p" tells the system to apply this to the <p> lines */

.poem p {
text-indent:0em;
/*the "text-indent" styling is set to 0em. this will make sure that the poem lines will have no indent by default. */
padding-left:25%;
padding-right:25%;
/* the two padding styles above makes sure that the left-most 20% and right-most 20% of the screen stay blank in the poem. it helps it stand out*/
margin-top:0em;
margin-bottom:0em;
/* the two "margin" styles above make sure the lines are close to one another. there is no extra space on the bottom or top of the paragraph lines. */
}

/* there are three different styles below for the 3 different classes in the main HTML text. each class has a different indent distance, which correlates with the original work (linked as Resource). the "text-indent" distance can be changed however you want (by %, em, or px) */

p.poem_dent_1 {
text-indent:8%;
}

p.poem_dent_2 {
text-indent:12%;
}

p.poem_dent_3 {
text-indent:16%;
}

/* the last style I'll add is the signature line. Anna Julia Cooper placed her signature below the poem on the right side of the page. this "text-align" style will make sure we can mimic that. we will also place a little space between the poem and signature. */
p.signature {
text-align:right;
margin-top:1em
}