Below is a list of HTML elements with a demonstration about how those elements now look with the default CSS styling that the site has in place.  I want to review them all and make adjustments so that when they are used in regular posts or pages, they look good.  – Wayne

H2 Inside An Article Is Another Thing To Consider With Initial Caps – How It Wraps, Font, Size, Weight, Etc.

H3 Provides another example, this time in sentence case, but again wrapping around to multiple lines.

H4 Should any of these things be centered?

HR how should the following <hr> be displayed in CSS?


Paragraph: What is the default line-height and other CSS we care about?  Where are the settings?  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et mi vel quam tempus tempus. Nam ut tincidunt arcu, vitae sagittis enim. Mauris id felis nec urna egestas suscipit. Donec egestas aliquet elit id egestas. Proin sollicitudin placerat tincidunt. Aliquam condimentum odio elit, ac pretium lacus sagittis non. Integer quis lobortis metus. Nulla id elementum massa. Praesent cursus interdum magna, ac.

See how the same elements look when you look at archival (“category”) view: https://yale1969.org/category/uncategorized/.

How about the spacing between paragraphs when compared to the line-height of text within paragraphs?  I’m going to prattle on a bit to give some lines to this paragraph to make an adequate amount so Sheila can see.  Again, one last time, I’ll prattle on a bit to give some lines to this paragraph to make an adequate amount of text.

Within a paragraph, text that is bold, italicized and bold-italics looks as indicated.  And a link looks like this and a bold link looks like this.  Links can have different styles when you hover over them and when you have “visited” them (e.g., after you have clicked, often the link changes appearance slightly).  Do we do that?  Should we.

Further, talking about links, what happens when you put an link in a headline?

H2 Link Here Goes to Google

H3 link here goes to Microsoft

H4 link here goes to Amazon

Ordered List – pay attn especially to spacing to first point and spacing between points, as well as indents.

  • Point One – and how do links like this look?
  • Point Two
    • Point Two-sub 1 – can the sub point be an open circle like in Admin editor page?  And how does <li> test wrap a long line like this re indents and line-height?
    • Point Two – sub 2, including links like this
  • Point three — and let’s consider how long lines will wrap, look and work as lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et mi vel quam tempus tempus. Nam ut tincidunt arcu, vitae sagittis enim. Mauris id felis nec urna egestas suscipit. Donec egestas aliquet elit id egestas. Proin sollicitudin placerat tincidunt. Aliquam condimentum odio elit, ac pretium lacus.

Ask the same questions about a Numbered List

  1. First – links in numbered lists should be the same
  2. Second
    1. Second a – is there a way to make this a) and not 1)?  that might be a question for Hitesh.  And again, we need a long line to see how the line-heights and spacing work.
    2. Second b – ditto … b, not 2.  And check links like this in sub points
  3. Third –  also let’s consider how long lines will wrap, look and work as lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et mi vel quam tempus tempus. Nam ut tincidunt arcu, vitae sagittis enim. Mauris id felis nec urna egestas suscipit. Donec egestas aliquet elit id egestas. Proin sollicitudin placerat tincidunt. Aliquam condimentum odio elit, ac pretium lacus.

How about the following blockquote?  How do blockquotes get styled.

In hoc est nec faucibus felis sollicitudin sit amet. Cras semper libero dolor. Duis quam ligula, pulvinar id tristique laoreet, sodales at ipsum. Sed sed tellus ac mauris egestas accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque massa mi, egestas in nunc cursus, volutpat tristique felis.

Matt Flynn

Last, we are going to encourage authors to put inline pictures next to paragraphs like this one.  My preference is to have  standard “medium” picture (which is 300 px wide, at most) inserted and “float: left” like this one.  I’d like Sheila to see if that’s the correct size and if the padding around the picture is correct.  Also, is the caption styled correctly?   I want to make sure this paragraph is long enough so that the text will wrap around the picture.  To repeat: I want to make sure this paragraph is long enough so that the text will wrap around the picture.

Okay, we are good so far.  Now I want to try something exotic — a “pull quote”.  This is a box that “floats”,  typically in the right margin — sort of like the way the picture above floats on the left. I’m going to thunk in two long pararaphs of Lorem stuff next, with a pullquote from Einstein floating on the right, with my own guesses about styling as to border (2px), margin between border and main text (10px), padding between border and interior text (5px), font-family (arial, sans serif), font-size (18 pt), and text decoration (italics).

“Everything you read on the internet is made up. It’s pure bunk.

And everyone knows it, even Abraham Lincoln.”

— Albert Einstein

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et mi vel quam tempus tempus. Nam ut tincidunt arcu, vitae sagittis enim. Mauris id felis nec urna egestas suscipit. Donec egestas aliquet elit id egestas. Proin sollicitudin placerat tincidunt. Aliquam condimentum odio elit, ac pretium lacus sagittis non. Integer quis lobortis metus. Nulla id elementum massa. Praesent cursus interdum magna, ac auctor enim gravida ut. Sed interdum, leo eget porttitor

luctus, felis mauris faucibus justo, quis viverra augue urna vel nisl. Donec malesuada urna ipsum, nec faucibus felis sollicitudin sit amet. Cras semper libero dolor. Duis quam ligula, pulvinar id tristique laoreet, sodales at ipsum. Sed sed tellus ac mauris egestas accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque massa mi, egestas in nunc cursus, volutpat tristique felis.


The last element to test is the “horizontal rule” or line”.  It is right above this short paragraph, and I’d like you to consider – is it the right size? should it be the full width of column or 70% of width, centered?  fat enough line?  dark enough?  right color?  how about the padding above and below it?

And last, all this needs to work on mobile as well.